순서가 있으면 번호로

KRDS CP-248 — 모든 항목에 순서를 지정할 수 있거나 순위를 매기는 것이 가능하다면 순서 있는 목록을 사용하고 있다.

0. 들어가며 — 차례가 있는 항목들

이번 368편은 앞 편(CP-247)의 짝입니다. 순서를 지정하거나 순위를 매길 수 있는 항목이면 순서 있는 목록(<ol>) 을 사용하라는 규칙이죠.

CP-247이 ‘동등하면 순서 없는 목록(점)’이었다면, CP-248은’순서·순위가 있으면 순서 있는 목록(번호)’입니다. 절차의 단계, 우선순위 순위처럼 — 항목의 순서가 의미를 가지면 번호를 매겨야 사용자가 그 순서를 인지하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 순서·순위 가능하면 순서 있는 목록

CP-248 (컴포넌트 > 텍스트 목록) “모든 항목에 순서를 지정할 수 있거나 순위를 매기는 것이 가능하다면 순서 있는 목록을 사용하고 있다.”

항목들이 순서(차례)나 순위(우선)를 갖는 경우, 번호로 나열하는 순서 있는 목록(<ol>)을 사용하라는 뜻입니다.

정리: 순서·순위가 있으면 순서 있는 목록(<ol>)을 써라. 이게 CP-248입니다.

2. 왜 순서 항목에 순서 있는 목록인가

순서 있는 목록(<ol>, 번호 1·2·3)은 — 항목들이 순서나 순위를 가짐을 뜻합니다. 항목의 나열 순서가 의미를 갖죠 — 순서를 바꾸면 의미가 달라집니다. CP-247(동등·무순서 → <ul>)의 정반대 경우입니다.

순서 있는 목록이 맞는 경우:

절차·단계 — 순서대로 따라야 하는 과정. 예: “1. 신청서 작성 → 2. 서류 첨부 → 3. 제출 → 4. 결과 확인”. 1번을 먼저 해야 2번이 가능하죠. 순서가 본질입니다.

순위·등수 — 우선순위·등급. 예: “1위 ○○, 2위 △△, 3위 □□”. 번호가 순위를 표현하죠.

차례가 있는 안내 — “1순위 확인 사항, 2순위 확인 사항”처럼 우선순위가 있는 항목.

이런 항목들은 — 번호로 나열해야 사용자가 그 순서·순위를 인지합니다. 번호는 ’이 항목들은 순서가 있고, 1번 부터 차례대로’라는 신호죠.

순서 없는 목록을 쓰면 안 되는 이유. 만약 순서 있는 항목(절차 등)에 글머리 기호(순서 없는 목록) 를 쓰면 — 사용자는 ‘이 항목들이 순서 없이 동등한가?’ 하고 순서를 놓칩니다. 절차를 “• 신청서 작성 • 서류 첨부 • 제출”로 점 나열하면 — 어느 것을 먼저 해야 하는지, 순서대로 해야 하는지가 안 보이죠. 사용자가 순서를 무시하고 임의로 진행하다 실패할 수 있습니다. 그래서 순서 있는 항목엔 점이 아니라 번호를 씁니다.

시맨틱 스크린 리더에 순서 전달. 시각적으로 번호가 순서를 보이듯, <ol> 시맨틱은 스크린 리더에 순서를 전합니다 <ol>을 만나면 “순서 있는 목록, 항목 1, 항목 2…” 처럼 번호·순서를 함께 읽죠(브레드크럼이 경로 순서를 <ol>로 표현한 것 CP-086과 같은 원리). 절차를 <ol>로 마크업하면 비시각 사용자도 ‘1단계, 2단계’ 순서를 인지합니다. 반대로 <ul>로 하면 순서 정보가 사라지죠.

판단 기준 — 순서가 의미 있는가. CP-247과 CP-248의 선택 기준은 하나 — ‘항목의 순서가 의미를 갖는가?’ 입니다:

순서 무의미(바꿔도 됨) → 순서 없는 목록 <ul>(CP-247).

순서 유의미(바꾸면 안 됨) → 순서 있는 목록 <ol>(CP-248).

준비물(순서 무의미)은 <ul>, 절차(순서 유의미)는 <ol>이죠. 이 의미 구분이 — 시각(점/번호)과 시맨틱(ul/ol) 양쪽에서 항목 관계를 정확히 전합니다. 잘못 쓰면 거짓 정보를 주죠(동등 항목에 번호 = 가짜 순서, 순서 항목에 점 = 순서 누락).

이 규칙은 CP-247과 함께 목록 유형 선택의 핵심이고, CP-252(태그 일치)에서 이 시각·시맨틱 일치를 다시 강조 합니다. 의미에 맞는 목록 유형이 정확한 정보 전달의 기본이죠.

정리하면 — 항목들이 순서·순위를 가지면, 그 의미에 맞게 순서 있는 목록(<ol>, 번호)을 써서 사용자가 순서를 인지하고 시각·시맨틱으로 ’순서 있음’을 전해야 합니다.

3. 점검 / 개선

무엇을 점검하나

순서 항목 ol — 순서·순위가 있는 항목이 순서 있는 목록(<ol>)인가.

점 오용 없음 — 순서 있는 항목(절차 등)에 글머리 기호를 잘못 쓰지 않았는가.

시맨틱 — <ol>/<li>로 마크업되어 스크린 리더에 순서가 전달되는가.

개선 방향

절차·순위 항목을 <ol>/<li>로(번호). 점 오용 제거.

순서 무의미하면 <ul>로(CP-247). 의미에 맞는 태그.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
콘텐츠/퍼블리셔	항목 순서 의미 판단·목록 유형 선택
개발	<ol>/<li> 시맨틱 마크업

기관 유형	CP-248 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (텍스트 목록 사용 시)

절차·순위 목록을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 순서·순위가 있는 항목이 순서 있는 목록(<ol>) 인가요?

□ 순서 있는 항목(절차 등)에 글머리 기호를 잘못 쓰지 않았나요?

□ <ol>/<li>로 마크업되어 스크린 리더에 순서가 전달되나요?

❓ FAQ

Q1. 절차에 점(<ul>)을 쓰면요? 사용자가 순서를 놓쳐 임의로 진행하다 실패할 수 있습니다. 절차는 번호 (<ol>)를 씁니다. Q2. CP-247과 어떻게 구분하나요? ’항목 순서가 의미 있는가’로 판단합니다. 무의미하면 <ul>(247), 유의미하면 <ol>(248)이죠. Q3. 스크린 리더에 순서가 전달되나요? <ol>은 “순서 있는 목록, 항목 1, 2…”로 읽혀 순서가 전달됩니다.

6. 마무리

CP-248의 메시지:

순서가 있으면 번호로 — 순서·순위 항목은 순서 있는 목록(<ol>)을 쓴다.

절차·순위처럼 항목 순서가 의미를 가지면 번호(<ol>)로 써야, 사용자가 순서를 인지하고 시맨틱으로도 순서가 전달되죠. 점으로 쓰면 순서를 놓칩니다. CP-247(동등→ul)과 의미에 맞는 목록 유형을 고릅니다. 다음 편은 항목의 일관된 어투입니다.

다음 편 예고 ▶ 「369. (CP-249) 동일한 수준의 항목은 일관된 어투로 작성하고 있다.」

ViewCheck는 순서·순위 항목이 순서 있는 목록으로 마크업되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 텍스트 목록(Text list) 가이드 — https://www.krds.go.kr/html/site/component/component_23.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준