텍스트목록 유형적합태그

KRDS CP-252 — 목록 유형에 적합한 태그를 사용하고 있다. (글머리 기호는

태그, 번호로 구분은

,

태그로 마크업)

KRDS 체크리스트 항목 CP-252 · 컴포넌트 > 텍스트 목록(Text list) 〈846 규칙 완전 분해 시리즈 (372)〉 — “목록은 목록 태그로”: 목록 유형별 시맨틱 태그

0. 들어가며 — 보이는 목록을 코드로도

이번 372편은 목록 유형에 적합한 태그(글머리 기호는 <ul>/<li>, 번호는 <ol>/<li>)를 사용하라는 규칙입니다.

목록을 — <div>에 글머리 기호(•)를 직접 타이핑하거나, <br>로 줄바꿈만 해서 만들면, 시각적으론 목록처럼 보여도 스크린 리더는 ’목록’으로 인지 못 하죠. CP-252는 목록을 시맨틱 목록 태그(<ul>/<ol>/<li>)로 마크업하되, 유형(글머리/번호)에 맞는 태그를 쓰라고 규정합니다. CP-247·248의 의미 구분을 마크업으로 확정하는 규칙이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 유형 적합 태그

CP-252 (컴포넌트 > 텍스트 목록) “목록 유형에 적합한 태그를 사용하고 있다. (글머리 기호는 <ul>, <li> 태그, 번호로 구분은 <ol>, <li> 태그로 마크업)”

글머리 기호(•) 목록은 <ul>+<li>로, 번호(1·2·3) 목록은 <ol>+<li>로 마크업해, 목록을 시맨틱하게 구현 하라는 뜻입니다.

정리: 글머리 목록은 <ul>, 번호 목록은 <ol>, 항목은 <li>로 마크업하라. 이게 CP-252입니다.

2. 왜 유형에 맞는 목록 태그여야 하나

목록은 — ’여러 항목의 나열’이라는 구조를 가집니다. 이 구조가 스크린 리더에 전달되려면, 시맨틱 목록 태그로 마크업해야 하죠. 그리고 그 태그가 목록 유형(글머리/번호)의 의미와 맞아야 합니다(CP-247·248). CP-252는 이 ’시맨틱 + 유형 일치’를 확정합니다.

시맨틱 목록 태그의 효과. <ul>/<ol>/<li>로 마크업하면 — 스크린 리더가 두 가지를 전달합니다:

“목록, 항목 N개” — 전체 개수를 알림. 사용자가 ’몇 개짜리 목록인지’를 압니다.

“항목 2 / N” — 각 항목의 위치를 알림. 사용자가 ‘지금 몇 번째를 듣는지’ 압니다.

또 스크린 리더는 — 목록 단위로 점프하는 탐색을 지원하고, 목록의 시작·끝을 안내하죠. 이 모든 게 시맨틱 목록 태그가 있어야 작동합니다.

잘못된 목록 — 가짜 목록. 흔한 실수는 — 목록을 시맨틱 태그 없이 만드는 것입니다:

<div> + 글머리 기호 타이핑 — <div>• 항목1</div><div>• 항목2</div> 처럼 점을 글자로 직접 침. 시각적 으론 목록이지만, 스크린 리더엔 ’목록’이 아니라 그냥 텍스트 줄들이죠. 개수·위치 정보가 없습니다.

<br>로 줄바꿈 — 항목1<br>항목2<br>항목3 처럼 줄바꿈만으로 나열. 역시 목록 구조가 없죠.

<p> 나열 — 각 항목을 별개 <p>로. 목록으로 안 묶입니다.

이런 ‘가짜 목록’은 — 시각 사용자에겐 목록처럼 보여도, 비시각 사용자는 ’이게 목록인지, 몇 개인지, 지금 몇 번째 인지’ 모릅니다. 목록의 구조 정보가 사라지죠(표 CP-245의 가짜 div 표, 아코디언 CP-199 정신).

유형 일치 — ul vs ol. 시맨틱 목록 태그를 쓰되, 유형에 맞는 태그를 써야 합니다(CP-247·248):

글머리 기호(동등·무순서) → <ul> + <li>. 시각적으로 점(•), 시맨틱으로 ‘순서 없는 목록’.

번호(순서·순위) → <ol> + <li>. 시각적으로 번호(1·2·3), 시맨틱으로 ‘순서 있는 목록, N번째’.

이 일치가 중요한 이유 — 시각(점/번호)과 시맨틱(ul/ol)이 맞아야 모든 사용자에게 일관된 정보가 갑니다. 예를 들어 — 번호 목록인데 <ul>로 마크업하고 CSS로 번호를 흉내 내면, 시각 사용자는 번호(순서)를 보는데 스크린 리더는 ’순서 없는 목록’으로 읽어 순서 정보가 어긋나죠. <ol>을 써야 시각·시맨틱 모두 ’순서 있음’을 전합니다. 반대로 동등 항목을 <ol>로 하면 가짜 순서를 주고요.

번호·기호는 태그가 자동 제공. <ul>/<ol>을 쓰면 — 글머리 기호(•)나 번호(1·2·3)가 태그에 의해 자동 으로 표시됩니다(브라우저 기본 스타일). 그래서 점·번호를 직접 타이핑할 필요가 없죠. 스타일(기호 모양, 번호 형식)은 CSS list-style로 조정하되, 의미는 태그가 담습니다.

이 규칙은 텍스트 목록의 ’시맨틱 토대’입니다 — 유형 구분(247·248)을 마크업으로 확정(252)하고, 계층(250)도 중첩 목록 태그로, 접근성(253)까지 시맨틱 위에서 작동하죠. 사이드 메뉴 CP-099, 표 CP-245, 아코디언 CP-199에서 본 ’시각 구조를 시맨틱으로’의 목록 버전입니다.

정리하면 — 목록은 시맨틱 목록 태그(<ul>/<ol>/<li>)로 마크업해 구조를 스크린 리더에 전달하되, 유형(글머리/ 번호)에 맞는 태그(<ul>/<ol>)를 써서 시각·시맨틱 정보를 일치시켜야 합니다.

3. 점검 / 개선

무엇을 점검하나

시맨틱 목록 — 목록이 <ul>/<ol>/<li>로 마크업됐는가(가짜 div/br 목록 아님).

유형 일치 — 글머리는 <ul>, 번호는 <ol>로 시각과 시맨틱이 맞는가.

개수·위치 전달 — 스크린 리더가 “목록, 항목 N개”를 읽는가.

개선 방향

가짜 목록(div+•, br 나열)을 <ul>/<ol>/<li>로 전환.

글머리는 <ul>, 번호는 <ol>로 유형 일치. 기호·번호는 태그 자동 제공.

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

역할	책임
퍼블리셔/개발	시맨틱 목록 태그·유형 일치 마크업
접근성 담당	목록 구조 스크린 리더 전달 검증

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

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 목록이 <ul>/<ol>/<li> 로 마크업됐나요(가짜 div/br 목록 아님)?

□ 글머리는 <ul>, 번호는 <ol>로 시각과 시맨틱이 맞나요?

□ 스크린 리더가 “목록, 항목 N개”를 읽나요?

❓ FAQ

Q1. <div>에 점을 직접 치면 안 되나요? 시각적으론 목록이어도 스크린 리더는 ’목록’으로 인지 못 합니다. <ul>/<li>가 필요하죠. Q2. 번호 목록을 <ul>+CSS 번호로 하면요? 시각은 번호인데 스크린 리더는 ’순서 없는 목록’으로 읽어 순서가 어긋납니다. <ol>을 쓰세요. Q3. 점·번호를 직접 안 쳐도 되나요? 네. <ul>/<ol>이 기호·번호를 자동 표시합니다. 스타일은 list-style 로 조정하죠.

6. 마무리

CP-252의 메시지:

목록은 목록 태그로 — 글머리는 <ul>, 번호는 <ol>, 항목은 <li>로 마크업하라.

목록 구조가 스크린 리더에 전달되려면 시맨틱 목록 태그가 필수이고, 유형(글머리/번호)에 맞는 태그를 써야 시각· 시맨틱이 일치하죠. 가짜 목록(div+•, br)은 구조를 잃습니다. 다음 편은 텍스트 목록 그룹의 마지막 — list-style- type:none 접근성 유의입니다.

다음 편 예고 ▶ 「373. (CP-253) list-style-type: none 스타일 지정으로 인한 접근성 문제에 유의하여 구현하고 있다.」

ViewCheck는 목록이 유형에 맞는 시맨틱 태그로 마크업되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.3.1 Info and Relationships — https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

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

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