목록임을 코드로 알리게

KRDS BP-044 — 스크린 리더 사용자가 목록형 정보임을 인지하고 각 항목이 포함하고 있는 세부 정보의 논리적 구성을 이해할 수 있도록 적절한 마크업을 사용하고 있다.

0. 들어가며 — 목록 탐색 그룹의 마지막

이번 610편은 스크린 리더 사용자가 목록형 정보임을 인지하고 각 항목의 세부 정보 논리적 구성을 이해하도록 적절한 마크업을 사용하라는 규칙입니다. 목록 탐색 그룹(BP-037~044)의 마지막이죠.

목록을 — <div>만으로 쌓으면, 시각적으론 목록처럼 보여도 스크린 리더는 ’목록’임을 모릅니다. <ul>/<li> 같은 시맨틱 마크업을 써야 — ’목록, 항목 5개 중 1번째’처럼 읽죠. BP-044는 이를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 목록형 정보 시맨틱 마크업

BP-044 (기본 패턴 > 목록 탐색) “스크린 리더 사용자가 목록형 정보임을 인지하고 각 항목이 포함하고 있는 세부 정보의 논리적 구성을 이해할 수 있도록 적절한 마크업을 사용하고 있다.”

목록을 시맨틱 마크업(<ul>/<ol>/<li> 등)으로 구성해, 스크린 리더 사용자가 목록임과 항목 구성을 이해하게 하라는 뜻입니다.

정리: 목록을 시맨틱 마크업으로 만들어 스크린 리더가 목록임을 인지하게 하라. 이게 BP-044입니다.

2. 왜 목록 시맨틱 마크업인가

목록은 시각적으로는 ’여러 항목이 나열된 것’으로 한눈에 보이죠. 그런데 스크린 리더 사용자는 시각이 아닌 코드 구조로 인지합니다. 목록이 <div>만으로 쌓이면, 시각적으론 목록 같아도 스크린 리더는 그냥 텍스트 덩어리로 읽죠. BP-044는 적절한 시맨틱 마크업을 요구합니다.

시맨틱 마크업이 없을 때의 문제:

목록 인지 불가 <div>로만 쌓은 목록은 스크린 리더가 ‘목록’임을 모릅니다. ’목록, 5개 항목 중 1번째’ 같은 안내가 없죠. 사용자는 이게 목록인지, 전체 몇 개인지, 지금 몇 번째인지 모릅니다.

구조 이해 불가 — 각 항목이 — 제목·날짜·요약 등 세부 정보로 구성되는데, 마크업이 없으면 그 논리적 구성을 파악하기 어렵죠. 어디까지가 한 항목인지 경계도 모호합니다.

탐색 비효율 — 스크린 리더는 — 목록 단위로 건너뛰기(목록 다음으로) 같은 탐색을 제공하는데, 시맨틱 목록이 아니면 이 탐색이 안 됩니다.

그래서 BP-044는 — 목록형 정보에 적절한 마크업을 쓰라고 합니다:

목록 시맨틱 요소 — 순서 없는 목록은 <ul>, 순서 있는 목록은 <ol>, 각 항목은 <li>로 만듭니다. 스크린 리더가 — ‘목록, 항목 N개’, ’○번째 항목’을 안내해, 목록임과 규모·위치를 알리죠. 시맨틱 마크업 규칙(CP-441)의 목록 적용입니다.

항목 내 구조 각 항목(<li>) 안의 제목·날짜·요약 등을, 적절한 요소(제목은 <h3>·강조, 날짜는 <time> 등)와 논리적 순서로 구성합니다. 스크린 리더가 항목의 세부 정보를 의미 있게 읽게요.

읽기 순서 = 논리 순서 DOM 순서가 사용자가 이해할 논리적 순서와 일치해야 합니다(CP-444 읽기 순서 정신). CSS로 시각 순서만 바꾸고 DOM이 뒤죽박죽이면 스크린 리더가 엉뚱한 순서로 읽죠.

정의형은 <dl> 항목이 ‘용어-설명’ 쌍이면 <dl>/<dt>/<dd>, 표 형태 데이터면 <table> 등 정보 성격에 맞는 시맨틱을 씁니다.

목록 마크업의 효과:

인지 — 스크린 리더 사용자가 — ’목록, 12개 항목’을 듣고, 이게 목록임과 규모를 즉시 압니다.

위치 파악 — ’5번째 항목’처럼 — 현재 위치를 알아 길을 잃지 않죠.

빠른 탐색 — 목록 단위 건너뛰기로 — 효율적으로 탐색합니다.

시맨틱 마크업 규칙의 목록 적용. 적절한 시맨틱 요소 사용(CP-441), 논리적 읽기 순서(CP-444) — 이 일반 규칙을, ’목록형 정보’라는 구체 맥락에 적용한 게 BP-044입니다. 목록은 — 시맨틱이 특히 중요한 정보 구조죠.

이 규칙은 목록 탐색의 ’스크린 리더 접근성’을 담당합니다 — 목록을 시맨틱 마크업으로 만들어(044), 스크린 리더 사용 자도 목록임과 항목 구성을 인지하게 하죠. 목록 탐색 그룹(037~044)의 접근성 마무리입니다.

정리하면 — <div>만으로 쌓은 목록은 스크린 리더가 목록임을 모르므로, <ul>/<ol>/<li> 등 시맨틱 마크업으로 구성 하고 항목 내부도 논리적 순서·구조로 만들어 목록임과 세부 구성을 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

목록 시맨틱 — 목록이 <ul>/<ol>/<li> 등 시맨틱 요소로 구성되는가(<div> 나열 아님).

항목 구조 — 각 항목 내부가 논리적 순서·적절한 요소로 구성되는가.

읽기 순서 — DOM 순서가 논리적 순서와 일치하는가(CP-444).

개선 방향

목록을 <ul>/<ol>/<li>로(정의형 <dl>, 표형 <table>). 시맨틱 마크업(CP-441).

항목 내부 논리 순서·구조. DOM=읽기 순서(CP-444). 스크린 리더 인지 검증.

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

역할	책임
퍼블리셔/개발	목록 시맨틱 마크업 구현
QA/접근성	스크린 리더 목록 인지 검증

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

웹접근성 의무 대상이며 목록형 정보를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 목록이 <ul>/<ol>/<li> 등 시맨틱 요소로 구성되나요(<div> 나열 아님)?

□ 각 항목 내부가 논리적 순서·적절한 요소로 구성되나요?

□ DOM 순서가 논리적 읽기 순서와 일치하나요(CP-444)?

❓ FAQ

Q1. <div>로 목록을 만들면 왜 안 되나요? 시각적으론 목록 같아도 스크린 리더가 ‘목록’임을 모릅니다. ’목록, 항목 N개’ 안내가 없어 규모·위치를 못 알죠. <ul>/<li> 시맨틱을 써야 합니다. Q2. 스크린 리더가 목록을 어떻게 읽나요? <ul>/<li>면 ‘목록, 12개 항목’, ’○번째 항목’처럼 읽고, 목록 단위 건너뛰기도 됩니다. 사용자가 목록임·규모·위치를 즉시 알죠. Q3. 항목 내부 구조도 중요한가요? 네. 제목·날짜·요약을 적절한 요소와 논리적 순서로 구성해야, 스크린 리더가 항목 세부를 의미 있게 읽습니다. DOM 순서=읽기 순서여야 하죠(CP-444).

6. 마무리

BP-044의 메시지:

목록임을 코드로 알리게 — 목록형 정보를 시맨틱 마크업으로 구성하라.

<div>만으로 쌓은 목록은 스크린 리더가 목록임을 모릅니다. <ul>/<ol>/<li> 시맨틱으로 구성하고 항목 내부도 논리적 순서·구조로 만들어 목록임과 세부 구성을 인지하게 하는 게 핵심이죠. 목록 탐색 그룹(BP-037~044)이 끝났습니다. 다음 편부터는 사용자 피드백 그룹입니다.

다음 편 예고 ▶ 「611. (BP-045) 사용자 피드백 그룹 시작」

ViewCheck는 목록형 정보가 적절한 시맨틱 마크업으로 구성되는지를 진단합니다.

📚 참고 출처

KRDS 기본 패턴 — 목록 탐색 가이드 — https://www.krds.go.kr/html/site/pattern/pattern_04.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컴포넌트,웹표준