브레드크럼 ol li마크업

KRDS CP-086 — 목록과 항목을

로 마크업하여 스크린 리더에서 계층 구조와 깊이를 빠르게 탐지할 수 있도록 제공하고 있다.

KRDS 체크리스트 항목 CP-086 · 컴포넌트 > 브레드크럼(Breadcrumb) 〈846 규칙 완전 분해 시리즈 (206)〉 — “순서 있는 목록으로 마크업하라”: ol/li 시맨틱

0. 들어가며 — ’순서가 있다’를 코드로 말하기

이번 206편은 브레드크럼을 <ol>(순서 있는 목록)과 <li>(항목)로 마크업하라는 규칙입니다.

브레드크럼은 단순한 링크 나열이 아니라 순서가 있는 경로입니다 — 홈(1단계) → 정책(2단계) → 보도자료 (3단계). 이 ’순서’와 ’몇 개 중 몇 번째’라는 정보를 스크린 리더가 알려면, 시각적 배치가 아니라 시맨틱 태그로 표현해야 하죠. 순서가 있으니 <ul>이 아니라 <ol>을 씁니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — ol/li 마크업

CP-086 (컴포넌트 > 브레드크럼) “목록과 항목을 <ol>, <li>로 마크업하여 스크린 리더에서 계층 구조와 깊이를 빠르게 탐지할 수 있도록 제공하고 있다.”

브레드크럼 경로를 순서 있는 목록 <ol> 로, 각 경로 단계를 목록 항목 <li> 로 마크업해, 보조기술이 ’몇 단계 중 몇 번째’라는 구조를 인지하게 하라는 뜻입니다.

정리: 브레드크럼은 <ol>+<li>로. 순서·개수·깊이를 시맨틱으로 전달하라. 이게 CP-086입니다.

2. 왜 ol/li로 마크업하나

브레드크럼의 본질은 ’순서가 있는 단계들의 목록’입니다. 그리고 HTML에는 이를 정확히 표현하는 태그가 이미 있죠 — <ol>(ordered list, 순서 있는 목록)과 <li>(list item). 이 시맨틱 태그를 쓰면 스크린 리더가 두 가지 중요한 정보를 자동으로 전달합니다: (1) “목록, 항목 3개” 처럼 전체 개수, (2) “항목 2 / 3” 처럼 현재 위치 (몇 번째). 사용자는 이걸 듣고 ’경로가 3단계이고 지금 2번째를 읽고 있구나’를 압니다 — 시각 사용자가 한눈에 파악하는 ’깊이’를 귀로도 아는 거죠.

반대로 브레드크럼을 <div>나 <span>만으로 만들거나, > 기호를 글자로 끼워 “홈 > 정책 > 보도자료”를 그냥 나열하면 — 스크린 리더는 이를 ’연속된 링크와 텍스트’로만 읽습니다. 몇 단계인지, 지금 몇 번째인지 알 수 없죠. 순서·구조 정보가 통째로 사라집니다.

왜 <ul>(순서 없는 목록)이 아니라 <ol>(순서 있는 목록)일까요? 브레드크럼의 단계는 순서가 의미를 가집니다 — 홈이 먼저고 현재가 마지막이라는 위계가 있죠. 순서를 바꾸면 경로가 깨집니다. 이렇게 항목의 순서가 의미 있는 목록은 <ol>로 표현하는 것이 시맨틱적으로 정확합니다. WAI-ARIA APG의 브레드크럼 패턴도 <nav> 안에 <ol>을 두는 구조를 권장하죠.

전체 구조를 합치면 다음과 같습니다 — CP-085의 <nav aria-label="브레드크럼">이 영역을 알리고, 그 안의 <ol>이 ’순서 있는 경로’임을, 각 <li>가 ’단계’임을, 그 안의 <a>가 ’링크’임을 전합니다. 시맨틱 태그 하나하나가 의미를 쌓아, 스크린 리더 사용자에게 시각 사용자와 동등한 경로 정보를 제공하죠. 현재 위치(마지막 항목)는 보통 링크가 아니라 텍스트로 두고 aria-current="page"를 부여해 ’현재 페이지’임을 명시하는 것이 APG 권장 패턴입니다.

3. 점검 / 개선

무엇을 점검하나

<ol> 사용 — 브레드크럼 목록이 <ol>(순서 있는 목록)인가(<ul>/<div> 아님).

<li> 항목 — 각 경로 단계가 <li>로 마크업됐는가.

개수·위치 전달 — 스크린 리더가 ’몇 개 중 몇 번째’를 읽는가.

현재 표시 — 마지막 항목에 aria-current="page"가 있는가(권장).

개선 방향

<nav aria-label="브레드크럼"> <ol> <li><a href="/">홈</a></li> <li><a href="/policy">정책</a></li> <li><span aria-current="page">보도자료</span></li> </ol> </nav>

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

역할	책임
퍼블리셔/개발	<ol>/<li> 시맨틱 마크업, aria-current 부여
접근성 담당	스크린 리더 개수·위치 안내 검증

기관 유형	CP-086 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (브레드크럼 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레드크럼이 <ol> 로 마크업됐나요(<div>/<ul> 아님)?

□ 각 단계가 <li> 인가요?

□ 스크린 리더가 ’항목 N개 중 M번째’를 읽나요?

□ 마지막(현재) 항목에 aria-current="page"가 있나요?

❓ FAQ

Q1. <ul>을 쓰면 안 되나요? 브레드크럼은 순서가 의미를 가지므로 <ol>이 시맨틱적으로 정확합니다. Q2. CSS로 > 기호와 배치를 잘 하면 충분하지 않나요? 시각적으로는 충분해 보여도 스크린 리더는 순서·깊이를 모릅니다. 시맨틱 태그가 필요합니다. Q3. aria-current는 꼭 넣어야 하나요? 필수는 아니지만, ’현재 페이지’를 보조기술에 명시해주는 APG 권장 사항입니다.

6. 마무리

CP-086의 메시지:

순서 있는 목록으로 마크업하라 — <ol>+<li>로 깊이와 위치를 들리게.

브레드크럼은 순서가 의미를 갖는 단계 목록입니다. <ol>/<li>로 마크업하면 스크린 리더가 ’몇 단계 중 몇 번째’를 자동으로 전달해, 비시각 사용자도 경로의 깊이를 압니다. <nav>(CP-085)와 함께 시맨틱 골격을 완성하죠. 다음 편은 경로 구분자(>)의 명도 대비입니다.

다음 편 예고 ▶ 「207. (CP-087) 구분자는 배경과 3:1 이상의 명도 대비를 갖도록 사용하고 있다.」

ViewCheck는 브레드크럼이 <ol>/<li> 시맨틱으로 계층·깊이를 노출하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 브레드크럼(Breadcrumb) 가이드 — https://www.krds.go.kr/html/site/component/component_07.html

WAI-ARIA APG — Breadcrumb Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

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

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