현재 페이지엔 정확히 page

KRDS CP-101 — 현재 탐색 중인 화면에 대한 링크인 경우 aria-current=“page” 속성을 추가하여 제공하고 있다.

0. 들어가며 — ‘true’가 아니라 ’page’

이번 221편은 앞 편(CP-100)의 구체화입니다. 현재 화면 링크에는 aria-current="page"를 부여하라는 규칙 이죠.

CP-100이 ’현재 인디케이터를 aria-current로 보조기술에 전달하라’는 원칙이었다면, CP-101은 그 값을 무엇으로 줄지를 못 박습니다 — 사이드 메뉴의 현재 화면 링크에는 정확히 page 값을 씁니다. 같은 aria-current라도 값에 따라 스크린 리더 낭독이 달라지므로, 맥락에 맞는 값이 중요하죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — aria-current=“page”

CP-101 (컴포넌트 > 사이드 메뉴) “현재 탐색 중인 화면에 대한 링크인 경우 aria-current="page" 속성을 추가하여 제공하고 있다.”

사이드 메뉴에서 현재 보고 있는 화면(페이지)에 해당하는 링크에는 aria-current 속성의 값을 page 로 지정해, 보조기술이 ’현재 페이지’임을 정확히 낭독하게 하라는 뜻입니다.

정리: 현재 화면 링크엔 aria-current="page"를 줘라. 이게 CP-101입니다.

2. 왜 ‘page’ 값이어야 하나

aria-current는 단순 on/off가 아니라, ’무엇으로서 현재인지’를 값으로 표현하는 속성입니다(CP-100에서 정리). 값마다 스크린 리더가 다르게 낭독하고, 사용자는 그 차이로 맥락을 파악하죠:

값	의미	쓰임
page	현재 페이지	메뉴(사이드/메인)의 현재 화면 링크
step	현재 단계	다단계 폼·위저드의 현재 스텝
location	현재 위치	경로·지도·프로세스 흐름상 현재 지점
date	현재 날짜	달력의 오늘/선택일
time	현재 시각	시간 선택의 현재 시각
true	일반적 현재	위에 해당 없는 일반 현재 표시

사이드 메뉴는 ’여러 화면(페이지) 중 지금 어느 페이지에 있는가’를 표시하는 도구입니다. 따라서 현재 항목이 가리키는 것은 ‘현재 페이지’ 이고, 정확한 값은 page 죠. 이렇게 하면 스크린 리더가 그 링크에서 “현재 페이지, ○○” 처럼 명확히 낭독해, 사용자는 ’이게 지금 내가 있는 페이지구나’를 정확히 압니다.

만약 값을 막연히 true로만 주면 — 스크린 리더는 “현재, ○○” 정도로 읽어 ’무엇으로서 현재인지’가 덜 구체적 입니다. 틀린 건 아니지만, 페이지 맥락에서는 page가 더 정확하고 권장되죠. 반대로 사이드 메뉴인데 step이나 date를 쓰면 의미가 안 맞아 사용자를 헷갈리게 합니다. 맥락에 맞는 값을 쓰는 것이 핵심입니다.

구현 팁 — 현재 페이지를 판별해 해당 링크에만 aria-current="page"를 붙이고, 나머지 항목엔 이 속성을 아예 넣지 않습니다(빈 값이나 false를 일일이 넣을 필요 없음 — 속성 부재가 곧 ‘현재 아님’). 그리고 CP-100에서 봤듯 CSS a[aria-current="page"] 선택자로 시각 강조를 함께 걸면, 속성 하나로 시각·보조기술 표시가 동기화 됩니다. 페이지 이동(SPA 라우팅 포함) 시 현재 항목이 바뀌면 aria-current도 따라 갱신돼야 하죠.

이로써 CP-091(시각 강조) → CP-100(aria-current 전달 원칙) → CP-101(값은 page) 세 규칙이 ’현재 위치 표시’의 완성 묶음을 이룹니다 — 시각·보조기술 양쪽에, 정확한 의미로, 현재 페이지를 알리는 것입니다.

3. 점검 / 개선

무엇을 점검하나

page 값 — 현재 화면 링크에 aria-current="page"가 정확히 부여됐는가.

단일 현재 — 현재 항목 하나에만 적용되고 나머지엔 없는가.

갱신 — 페이지 이동 시 현재 항목이 바뀌면 속성도 갱신되는가.

개선 방향

<li><a href="/notice" aria-current="page">공지사항</a></li> <!-- 현재 --> <li><a href="/faq">자주 묻는 질문</a></li> <!-- 속성 없음 -->

CSS a[aria-current="page"]로 시각 강조 동기화(CP-091/100).

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

역할	책임
퍼블리셔/개발	현재 링크 판별·aria-current="page" 부여·갱신
접근성 담당	“현재 페이지” 낭독 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 현재 화면 링크에 aria-current="page" 가 있나요?

□ 현재 항목 하나에만 적용됐나요(나머지엔 없음)?

□ 페이지 이동 시 현재 항목 속성이 갱신되나요?

❓ FAQ

Q1. aria-current="true"로 하면 안 되나요? 틀리진 않지만, 페이지 맥락에선 page가 더 정확합니다. 스크린 리더가 “현재 페이지”로 명확히 낭독합니다. Q2. 나머지 항목엔 aria-current="false"를 넣어야 하나요? 그럴 필요 없습니다. 속성을 아예 넣지 않으면 ’현재 아님’으로 처리됩니다. Q3. SPA에서 라우팅으로 페이지가 바뀌면요? 현재 항목 변경에 맞춰 aria-current도 갱신해야 합니다.

6. 마무리

CP-101의 메시지:

현재 페이지엔 정확히 page — 사이드 메뉴 현재 링크에 aria-current="page".

aria-current는 값으로 ’무엇으로서 현재인지’를 표현합니다. 사이드 메뉴는 페이지 단위 탐색이라 현재 화면 링크엔 page가 정확하죠. 현재 항목 하나에만 부여하고, 이동 시 갱신하며, CSS로 시각 강조와 묶습니다. CP-091 ·100·101이 ’현재 위치 표시’를 완성합니다. 다음 편은 키보드 탐색입니다.

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

ViewCheck는 사이드 메뉴 현재 링크에 aria-current="page"가 정확히 부여됐는지를 진단합니다.

📚 참고 출처

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