현재 표시를 귀에도 들리게

KRDS CP-100 — 인디케이터가 시각적으로만 구분되는 것이 아니라 스크린 리더로도 전달될 수 있도록 WAI-ARIA aria-current 속성을 제공하고 있다.

0. 들어가며 — 강조만으론 절반의 사용자에게만 전달된다

이번 220편은 현재 위치 인디케이터를 시각뿐 아니라 스크린 리더에도 aria-current로 전달하라는 규칙입니다.

CP-091에서 현재 화면 항목을 ‘시각적으로’ 강조했습니다. 그런데 색·굵기·강조선 같은 시각 인디케이터는 스크린 리더 사용자에게 전달되지 않죠. 그들에게도 ’지금 이게 현재 화면’임을 알리려면 — WAI-ARIA의 aria-current 속성이 필요합니다. CP-100은 시각 강조에 ARIA를 더해 모든 사용자에게 현재 위치를 전합니다. 이번 편을 풀어 냅니다.

1. 규칙 원문 — aria-current로 인디케이터 전달

CP-100 (컴포넌트 > 사이드 메뉴) “인디케이터가 시각적으로만 구분되는 것이 아니라 스크린 리더로도 전달될 수 있도록 WAI-ARIA aria-current 속성을 제공하고 있다.”

현재 위치를 나타내는 인디케이터(강조)가 시각에만 머물지 않도록, 현재 항목에 aria-current 속성을 부여해 보조기술도 ’현재’임을 인지하게 하라는 뜻입니다.

정리: 현재 항목 강조를 aria-current로도 표시해 스크린 리더에 전달하라. 이게 CP-100입니다.

2. 왜 aria-current가 필요한가

웹 접근성의 핵심 원칙 하나는 — ‘색·형태로만 전달하는 정보는 절반의 사용자에게만 전달된다’ 입니다. 사이드 메뉴에서 현재 화면을 진한 색이나 굵은 글씨로 강조(CP-091)하면, 시각 사용자는 한눈에 ’아, 여기가 현재’를 압니다. 하지만 스크린 리더 사용자는 그 색·굵기를 못 보죠. 강조된 항목과 강조 안 된 항목이 코드상 똑같이 <a>로만 돼 있으면 — 스크린 리더는 둘을 구별 없이 똑같이 읽어, 비시각 사용자는 어느 게 현재인지 전혀 모릅니다.

이 격차를 메우는 것이 WAI-ARIA의 aria-current 속성입니다. 현재 항목에 aria-current 값을 부여하면, 스크린 리더가 그 항목을 읽을 때 “현재 페이지” 또는 “현재 항목” 같은 정보를 함께 낭독하죠. 시각 사용자가 강조로 얻는 ’현재’라는 정보를, 비시각 사용자는 이 속성의 낭독으로 동등하게 얻습니다.

aria-current는 단순 true/false가 아니라 ’무엇으로서 현재인지’를 값으로 표현합니다:

aria-current="page" — 현재 페이지(가장 흔함, 사이드/메인 메뉴의 현재 화면 링크)

aria-current="step" — 다단계 프로세스의 현재 단계

aria-current="location" — 경로상의 현재 위치

aria-current="true" — 그 외 일반적 현재 표시

사이드 메뉴에서 현재 보고 있는 화면 링크에는 보통 page 값이 맞습니다 — 이건 바로 다음 편 CP-101에서 구체적으로 다루죠(CP-100이 ’aria-current를 줘라’는 원칙, CP-101이 ’값은 page로’라는 구체).

주의 — aria-current는 시각 강조를 대체하는 게 아니라 보완합니다. 즉 CP-091(시각 강조)와 CP-100(ARIA 전달)을 둘 다 갖춰야 합니다. 시각만 있으면 비시각 사용자가, ARIA만 있으면 시각 사용자가 각각 놓치죠. 실무적으로는 CSS에서 [aria-current="page"] 선택자로 시각 강조 스타일을 거는 방식이 권장됩니다 — 속성 하나로 시각 강조와 보조기술 전달을 동시에 묶는 것이죠. 그러면 ‘강조됐는데 aria-current가 없는’ 또는 그 반대의 불일치 가 구조적으로 예방됩니다.

정리하면 — 현재 위치는 색·형태(시각)와 aria-current(보조기술) 두 채널 모두로 전달해야 모든 사용자가 ’지금 내가 여기 있다’를 압니다.

3. 점검 / 개선

무엇을 점검하나

aria-current 부여 — 현재 항목에 aria-current가 있는가.

시각+ARIA 동반 — 시각 강조(CP-091)와 aria-current가 함께 적용됐는가.

낭독 확인 — 스크린 리더가 현재 항목에서 “현재 페이지”를 읽는가.

개선 방향

현재 항목에 aria-current="page"(CP-101) 부여.

CSS [aria-current="page"] 선택자로 시각 강조를 묶어 불일치 예방.

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

역할	책임
퍼블리셔/개발	현재 항목 aria-current 부여, CSS 연동
접근성 담당	스크린 리더 현재 낭독 검증

기관 유형	CP-100 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (사이드 메뉴 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 항목에 aria-current 속성이 있나요?

□ 시각 강조(CP-091)와 ARIA가 함께 적용됐나요?

□ 스크린 리더가 현재 항목에서 “현재 페이지”를 읽나요?

❓ FAQ

Q1. 시각 강조가 있으면 aria-current는 생략해도 되나요? 안 됩니다. 시각 강조는 스크린 리더에 전달되지 않습니다. ARIA가 별도로 필요합니다. Q2. aria-current 값은 뭘 쓰나요? 사이드 메뉴의 현재 화면 링크는 보통 page입니다(CP-101). Q3. CSS와 어떻게 묶나요? [aria-current="page"] 선택자로 시각 강조를 걸면 속성 하나로 시각·ARIA가 동기화됩니다.

6. 마무리

CP-100의 메시지:

현재 표시를 귀에도 들리게 — 인디케이터를 aria-current로 보조기술에 전달하라.

색·형태로만 전달하는 현재 표시는 시각 사용자에게만 닿습니다. aria-current를 부여하면 스크린 리더가 “현재 페이지”를 낭독해, 비시각 사용자도 위치를 알죠. 시각 강조(CP-091)와 ARIA를 둘 다 갖춰야 하며, CSS 속성 선택자로 묶으면 불일치를 예방합니다. 다음 편은 그 값의 구체 — aria-current="page"입니다.

다음 편 예고 ▶ 「221. (CP-101) 현재 탐색 중인 화면에 대한 링크인 경우 aria-current=“page” 속성을 추가 하여 제공하고 있다.」

ViewCheck는 사이드 메뉴 현재 인디케이터가 aria-current로 보조기술에 전달되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 사이드 메뉴(Side navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_08.html

MDN — aria-current — https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current

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

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