지금 여기 있어요, 소리로도

KRDS CP-066 — 활성화된 메뉴 정보가 스크린 리더로 전달될 수 있도록 하고 있다.

0. 들어가며 — 현재 위치를 소리로도

이번 186편은 활성화된 메뉴 정보를 스크린리더로 전달하는 규칙입니다.

CP-056에서 활성/선택 상태를 시각적으로 표시했죠. 하지만 시각 표시만으로는 스크린리더 사용자가 현재 위치를 알 수 없습니다. CP-066은 활성 메뉴(현재 위치)를 스크린리더에도 전달하라고 규정하죠. 시각·청각 모두에게 현재 위치를 알려야 합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 스크린리더로 전달

CP-066 (컴포넌트 > 메인 메뉴) “활성화된 메뉴 정보가 스크린 리더로 전달될 수 있도록 하고 있다.”

현재 활성화된(현재 위치) 메뉴 정보를 스크린리더가 읽어 전달할 수 있게 하라는 뜻입니다.

정리: 활성화된 메뉴 정보가 스크린리더로 전달되게 하라. 이게 CP-066입니다.

2. 왜 스크린리더 전달이 필요한가

CP-056(활성/선택 상태 표시)은 주로 시각적 표시였습니다 — 현재 메뉴를 진한 색·굵게·하단 바 등으로 강조하는 것이죠. 그런데 이 시각 강조는 스크린리더 사용자에게 전달되지 않습니다. 스크린리더는 색·굵기 같은 시각 스타일을 읽지 않으니까요. 색이 진해도 스크린리더는 그냥 “정책정보, 링크”라고만 읽어, 그게 현재 위치인지 모르죠.

그래서 활성 메뉴를 스크린리더가 인식할 수 있는 방식으로도 표시해야 합니다. 핵심 방법이 aria-current 속성입니다 — 현재 페이지에 해당하는 메뉴 링크에 aria-current="page"를 부여하면, 스크린리더가 “정책정보, 현재 페이지, 링크”처럼 읽어 사용자가 ’내가 지금 여기 있구나’를 알죠.

이 차이는 결정적입니다 — aria-current 없이 시각 강조만 있으면, 시각장애 사용자는 메뉴를 탐색하다가 ‘어느 게 현재 페이지인지’ 전혀 알 수 없습니다. 모든 메뉴가 똑같이 “○○, 링크”로 읽히니까요. 길을 잃기 쉽죠. aria-current="page"가 있으면 — 스크린리더 사용자도 시각 사용자처럼 ’현재 위치’를 인지하고 방향 감각을 유지합니다.

이는 CP-056(시각 표시)과 CP-066(스크린리더 전달)이 한 쌍을 이루는 구조입니다 — 현재 위치를 시각으로도 (056), 스크린리더로도(066) 전달해야 모든 사용자가 자기 위치를 알죠. ’정보는 모든 감각 채널로 전달되어야 한다’는 접근성 원리입니다(DS-120 동등성).

구현은 — 현재 페이지에 해당하는 메뉴 링크에 aria-current="page"(현재 페이지인 경우), 또는 활성 상태인 다른 경우 적절한 aria-current 값이나 상태 속성을 부여하는 것입니다. 드롭다운이 펼쳐진 상태라면 aria-expanded로 펼침 상태도 전달하죠(CP-062). 메뉴의 모든 상태(현재 위치·펼침·선택)가 스크린리더에 전달 되어야 완전합니다. KWCAG 접근성 항목과 직결됩니다.

3. 점검 / 개선

무엇을 점검하나

aria-current — 현재 페이지 메뉴에 aria-current="page"가 있는가.

스크린리더 읽음 — 스크린리더가 현재 메뉴를 ’현재 페이지’로 읽는가.

시각+청각 — 현재 위치가 시각(056)·스크린리더(066) 모두에 전달되는가.

Before / After

<!-- ❌ 시각 강조만 (스크린리더 전달 안 됨) --> <a href="/policy" class="active">정책정보</a> <!-- ✅ 시각 + 스크린리더 전달 --> <a href="/policy" class="active" aria-current="page">정책정보</a>

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

역할	책임
퍼블리셔/개발	활성 메뉴에 aria-current 등 상태 속성 구현
접근성 담당	스크린리더 현재 위치 전달 검수

기관 유형	CP-066 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 페이지 메뉴에 aria-current="page"가 있나요?

□ 스크린리더가 현재 메뉴를 ’현재 페이지’로 읽나요?

□ 현재 위치가 시각·스크린리더 모두에 전달되나요?

❓ FAQ

Q1. 시각 강조만 하면 안 되나요? 스크린리더는 색·굵기를 못 읽습니다. aria-current로 스크린리더에도 현재 위치를 전달해야 합니다. Q2. CP-056과 중복 아닌가요? 짝입니다 — 056은 시각 표시, 066은 스크린리더 전달입니다. 둘 다 있어야 모두가 현재 위치를 압니다. Q3. KRDS를 채택하면 자동인가요? 표준 메뉴는 aria-current 등으로 활성 상태를 전달합니다.

6. 마무리

CP-066의 메시지:

지금 여기 있어요, 소리로도 — 활성 메뉴를 aria-current로 스크린리더에도 전달한다.

시각적 활성 강조(056)는 스크린리더에 전달되지 않으므로, aria-current="page"로 현재 위치를 스크린리더에도 알려야 합니다. 그래야 시각장애 사용자도 방향 감각을 유지하죠. 시각·청각 모두에 현재 위치를 전달하는 한 쌍의 규칙입니다.

다음 편은 메뉴의 키보드 탐색을 다룹니다. CP-067 — “메뉴 링크는 키보드로 탐색할 수 있게 구현한다.”

다음 편 예고 ▶ 「187. (CP-067) 메뉴 링크는 키보드로 탐색할 수 있도록 구현되어 있다.」

ViewCheck는 활성 메뉴 정보가 스크린리더로 전달되는지(aria-current)를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 메인 메뉴(Main menu) 가이드 — https://www.krds.go.kr/html/site/component/component_06.html

WAI-ARIA aria-current

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

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