구획으로 감싸고 aria-label=“브레드크럼”으로 구획 제목을 제공하고 있다.

KRDS CP-085 — 브레드크럼 목록을

KRDS 체크리스트 항목 CP-085 · 컴포넌트 > 브레드크럼(Breadcrumb) 〈846 규칙 완전 분해 시리즈 (205)〉 — “스크린 리더에게 ’여기 브레드크럼’이라 알려라”: nav + aria-label

0. 들어가며 — 눈으론 보이는데 귀로는 안 들린다면

이번 205편은 브레드크럼을 <nav>로 감싸고 aria-label="브레드크럼"을 붙이라는 규칙입니다.

시각 사용자는 “홈 > 정책 > 보도자료”를 보고 단번에 ‘아, 경로구나’ 합니다. 그런데 스크린 리더 사용자는 화면을 못 보죠. <nav aria-label="브레드크럼">이 없으면, 스크린 리더는 이 영역을 그냥 ’링크 몇 개’로만 읽어 — 이게 경로 안내인지, 무슨 메뉴인지 알 수 없습니다. CP-085는 이 영역에 ’브레드크럼’이라는 이름표를 달아 그 역할을 들리게 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — nav 구획 + aria-label

CP-085 (컴포넌트 > 브레드크럼) “브레드크럼 목록을 <nav> 구획으로 감싸고 구획 태그에 aria-label="브레드크럼" 으로 구획 제목을 제공함으로써 스크린 리더로 구획을 빠르게 탐색하고 정보 역할을 인지할 수 있도록 구현하고 있다.”

브레드크럼 전체를 시맨틱 내비게이션 영역인 <nav>로 감싸고, 그 <nav>에 aria-label="브레드크럼"을 부여해 보조기술이 이 영역을 ’브레드크럼 내비게이션’으로 인지·탐색하게 하라는 뜻입니다.

정리: 브레드크럼은 <nav aria-label="브레드크럼">으로 감싸 역할과 이름을 보조기술에 알려라. 이게 CP-085입니다.

2. 왜 nav와 aria-label이 필요한가

스크린 리더 사용자는 페이지를 위에서 아래로 순서대로만 읽지 않습니다. 대신 구획(landmark) 단위로 빠르게 점프하죠 — “내비게이션 영역으로”, “메인 콘텐츠로”, “푸터로”. 이 점프가 가능하려면 각 영역이 시맨틱 태그(<nav>, <main>, <header> 등)로 표시돼 있어야 합니다. 브레드크럼을 그냥 <div>로 감싸면 이 점프 목록에 안 잡혀, 스크린 리더 사용자는 브레드크럼을 ‘찾아’ 갈 수단이 없죠.

그래서 첫째, <nav>로 감쌉니다. <nav>는 ’내비게이션 영역’을 뜻하는 시맨틱 구획이라, 스크린 리더의 구획 목록에 등장합니다. 사용자는 단축키로 내비게이션 영역들을 훑으며 브레드크럼으로 바로 갈 수 있죠.

둘째 문제가 있습니다 — 페이지엔 보통 <nav>가 여러 개입니다(메인 메뉴, 사이드 메뉴, 브레드크럼, 푸터 메뉴…). 스크린 리더가 “내비게이션, 내비게이션, 내비게이션…” 만 읽으면 어느 게 어느 건지 구분이 안 되죠. 그래서 aria-label로 각 <nav>에 고유한 이름을 붙입니다. aria-label="브레드크럼"이 있으면 스크린 리더는 “브레드크럼, 내비게이션” 이라고 읽어, 사용자가 이 영역이 경로 안내임을 즉시 압니다. WAI-ARIA APG의 브레드 크럼 패턴도 정확히 이 방식(<nav aria-label="Breadcrumb">)을 권장합니다.

핵심은 — 같은 정보를 시각·비시각 사용자 모두에게 전달하는 것입니다. 시각 사용자에게 ‘>’와 배치로 ’경로’ 임이 보이듯, 스크린 리더 사용자에게는 <nav>(구획)와 aria-label(이름)이 같은 의미를 전합니다. 이건 다음 편들과 한 묶음입니다 — CP-086은 <ol>/<li>로 ’순서 있는 목록(계층)’임을 알리고, CP-087·088은 구분자의 대비와 스크린 리더 처리를 다루죠. CP-085는 그 토대인 ’구획 + 이름’을 놓습니다.

참고로 aria-label 값은 화면에 글자로 보이지 않고 보조기술만 읽습니다. 한국어 사이트면 “브레드크럼”으로, 다국어면 해당 언어 라벨을 주면 됩니다.

3. 점검 / 개선

무엇을 점검하나

<nav> 감싸기 — 브레드크럼 전체가 <nav>로 감싸였는가.

aria-label — 그 <nav>에 aria-label="브레드크럼"(또는 동등 이름)이 있는가.

구획 탐색 — 스크린 리더 구획 목록에 ’브레드크럼’으로 잡히는가.

개선 방향

<nav aria-label="브레드크럼"> <ol> … </ol> <!-- CP-086 --> </nav>

다국어 사이트는 언어별 라벨 제공. 이미 <h2> 등 보이는 제목이 있으면 aria-labelledby로 연결도 가능.

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

역할	책임
퍼블리셔/개발	<nav> 구획·aria-label 마크업
접근성 담당	스크린 리더 구획 탐색 검증

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

공공 사이트는 웹접근성 의무 대상이라 반드시 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 브레드크럼 전체가 <nav> 로 감싸였나요?

□ 그 <nav>에 aria-label="브레드크럼" 이 있나요?

□ 스크린 리더 구획 목록에서 ’브레드크럼’으로 잡히나요?

❓ FAQ

Q1. <div>에 role="navigation"만 줘도 되나요? <nav>가 더 권장됩니다. 굳이 div를 쓸 땐 role을 줘야 하지만, 시맨틱 태그가 안전합니다. Q2. aria-label을 안 붙이면요? 페이지에 nav가 여러 개라 어느 게 브레드크럼인지 구분이 안 됩니다. 이름이 있어야 빠르게 식별됩니다. Q3. 라벨이 화면에 보이나요? aria-label은 보조기술만 읽고 화면엔 안 보입니다. 시각적으로는 기존 디자인 그대로입니다.

6. 마무리

CP-085의 메시지:

스크린 리더에게 ’여기 브레드크럼’이라 알려라 — <nav aria-label="브레드크럼">.

시각 사용자에게 배치와 ’>’로 경로임이 보이듯, 스크린 리더 사용자에게는 <nav> 구획과 aria-label 이름이 같은 의미를 전합니다. 그래야 구획 점프로 빠르게 도달하고 역할을 인지하죠. 다음 편은 목록 마크업 — <ol>/<li>로 계층과 깊이를 알리는 규칙입니다.

**다음 편 예고 ▶ 「206. (CP-086) 목록과 항목을

,

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

ViewCheck는 브레드크럼이 <nav> 구획과 aria-label로 보조기술에 노출되는지를 진단합니다.

📚 참고 출처

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컴포넌트,웹표준