눈엔 보이되 귀엔 안 들리게

KRDS CP-088 — 스크린 리더에서 구분자 정보가 탐지되지 않도록 하고 있다.

0. 들어가며 — 브레드크럼 그룹의 마지막, 구분자 숨기기

이번 208편은 브레드크럼 그룹(CP-069~088)의 마지막 규칙입니다. 구분자(>, / 등)가 스크린 리더에 읽히지 않게 하라는 내용이죠.

앞 편(CP-087)에서 구분자를 시각적으로 또렷이 보이게 했습니다. 그런데 스크린 리더가 그 구분자를 “홈, 꺽쇠, 정책, 꺽쇠, 보도자료” 처럼 읽으면 — 사용자는 단계마다 “꺽쇠”라는 잡음을 들어야 합니다. 거추장스럽고 경로 파악을 방해하죠. 그래서 구분자는 눈엔 보이되 귀엔 안 들리게 처리합니다. 이번 편을 풀어내며 브레드크럼 20개 규칙을 마무리합니다.

1. 규칙 원문 — 구분자 스크린 리더 미탐지

CP-088 (컴포넌트 > 브레드크럼) “스크린 리더에서 구분자 정보가 탐지되지 않도록 하고 있다.”

브레드크럼의 구분자가 보조기술(스크린 리더)에는 읽히지 않도록 처리해, 비시각 사용자가 경로 단계만 깔끔히 듣게 하라는 뜻입니다.

정리: 구분자는 스크린 리더가 읽지 않게 숨겨라. 단계 텍스트만 들리게 하라. 이게 CP-088입니다.

2. 왜 구분자를 청각에서 숨기나

구분자(>)는 시각 사용자에게만 필요한 정보입니다. 시각 사용자는 단계들이 한 줄에 나열돼 있어, 그 사이를 가르는 경계 표시가 있어야 단계를 구분하죠(CP-087). 하지만 스크린 리더 사용자에게는 단계 구분이 다른 방식 으로 이미 전달됩니다 — <ol>/<li> 마크업(CP-086)이 “목록, 항목 1, 항목 2, 항목 3” 처럼 각 단계를 개별 항목으로 읽어주니까요. 즉 비시각 사용자는 목록 구조 자체로 ’단계가 나뉘어 있음’을 압니다.

이 상황에서 구분자 ‘>’ 까지 읽으면 어떻게 될까요? 스크린 리더가 “항목 1, 홈, 링크, 꺽쇠, 항목 2, 정책, 링크, 꺽쇠…” 처럼 단계마다 “꺽쇠(greater-than sign)”를 끼워 읽습니다. 이건 중복이자 잡음이죠 — 단계 구분은 이미 목록 구조로 전달됐는데, 의미 없는 기호 발음이 매번 추가됩니다. 경로가 길수록 듣기 피로가 커지고, 정작 중요한 단계 이름에 집중하기 어려워집니다.

그래서 CP-088은 구분자를 청각 채널에서 제거하라고 합니다. 구현 방법은 보통 두 가지입니다:

CSS 의사요소로 구분자 생성 — 구분자를 HTML 텍스트가 아니라 CSS ::before/::after의 content로 그립니다. CSS로 삽입된 장식 콘텐츠는 대체로 접근성 트리에 안 잡혀 스크린 리더가 읽지 않죠. 시각적으로는 보이지만(CP-087 대비 적용), 청각적으론 숨겨집니다.

aria-hidden="true" — 구분자를 별도 요소(예: <span aria-hidden="true">›</span>)로 두고 aria-hidden="true"를 부여하면, 시각적으론 보이되 보조기술은 무시합니다.

핵심은 — 같은 구분자를 채널별로 다르게 다루는 것입니다. CP-087은 시각 채널에서 구분자를 또렷이(3:1 대비), CP-088은 청각 채널에서 구분자를 침묵시킵니다. 둘은 모순이 아니라 상호 보완 — 각 사용자에게 필요한 것만 주는, 접근성의 정석입니다. 이렇게 하면 시각 사용자는 또렷한 ’>’로 단계를 보고, 스크린 리더 사용자는 “홈, 정책, 보도자료, 현재 페이지” 만 깔끔히 듣죠.

이로써 브레드크럼 20개 규칙(CP-069~088)이 완성됩니다 — 경로 구조(첫=메인, 마지막=상위), 링크/비링크 시각 처리, 한 줄·개수·축약, 위치·간격·역할, 그리고 시맨틱 마크업(nav/ol/li)과 구분자의 이중 채널 처리까지.

3. 점검 / 개선

무엇을 점검하나

구분자 미탐지 — 스크린 리더가 구분자(>, / 등)를 읽지 않는가.

시각 가시성 유지 — 동시에 구분자가 시각적으로는 또렷이 보이는가(CP-087).

단계만 낭독 — 스크린 리더가 단계 텍스트만 깔끔히 읽는가.

개선 방향

/* 방법 1: CSS 의사요소 (텍스트 아님 → 미낭독) */ li:not(:first-child)::before { content: "›"; color: #6b7280; /* 3:1 이상 */ }

<!-- 방법 2: aria-hidden --> <span aria-hidden="true">›</span>

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

역할	책임
퍼블리셔/개발	구분자 CSS 의사요소화 또는 aria-hidden 처리
접근성 담당	스크린 리더 낭독 결과 검증(구분자 미낭독)

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

구분자를 HTML 텍스트로 박아둔 사이트에서 특히 점검이 필요합니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 스크린 리더가 구분자(>, / 등)를 읽지 않나요?

□ 동시에 구분자가 시각적으로는 또렷이 보이나요(CP-087)?

□ 스크린 리더가 단계 텍스트만 깔끔히 읽나요?

❓ FAQ

Q1. CP-087(보이게)과 CP-088(안 들리게)은 모순 아닌가요? 아닙니다. 구분자는 시각 사용자에게만 필요해, 눈엔 보이되 귀엔 안 들리게 하는 게 정답입니다. Q2. 어떻게 숨기나요? CSS ::before/::after로 구분자를 그리거나, aria-hidden="true"를 부여합니다. 둘 다 시각엔 보이고 보조기술은 무시합니다. Q3. 구분자를 아예 빼면 안 되나요? 시각 사용자에겐 단계 경계 표시가 필요합니다. 빼지 말고 ‘청각에서만’ 숨깁니다.

6. 마무리

CP-088의 메시지:

눈엔 보이되 귀엔 안 들리게 — 구분자는 스크린 리더에서 탐지되지 않게 한다.

구분자는 시각 사용자에게만 필요한 경계 표시입니다. 스크린 리더 사용자는 <ol>/<li> 구조로 단계 구분을 이미 듣기에, 구분자 발음은 잡음일 뿐이죠. CSS 의사요소나 aria-hidden으로 청각에서 숨기면, 시각은 또렷이(CP-087) 청각은 깔끔하게 — 각 사용자에게 필요한 것만 줍니다. 이로써 브레드크럼 20개 규칙(CP-069~088)을 마칩니다. 다음 편부터는 새 컴포넌트 그룹 사이드 메뉴로 넘어갑니다.

다음 편 예고 ▶ 「209. (CP-089) 사이드 메뉴 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 브레드크럼 구분자가 스크린 리더에 노출되지 않는지를 진단합니다.

📚 참고 출처

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