WCAG 2.2 · 3. 이해의 용이성 · 3.2 예측 가능성
3.2.3 일관된 탐색
Consistent Navigation
여러 페이지에서 반복되는 내비게이션은 페이지마다 같은 상대적 순서로 나타나야 합니다.
수준 AAWCAG 2.0
한눈에 보기
- 성공 기준
- 3.2.3 일관된 탐색
- 수준
- 수준 AA
- 원칙
- 3. 이해의 용이성
- 지침
- 3.2 예측 가능성
- 도입
- WCAG 2.0
요구 사항
웹 페이지 묶음(같은 사이트 안의 관련 페이지들)에서 여러 페이지에 반복되는 탐색 수단(주 메뉴, 검색, 건너뛰기 링크 등)은 사용자가 직접 바꾸지 않는 한 매번 같은 상대적 순서로 나와야 합니다.
"상대적 순서"이므로 페이지에 따라 항목이 추가되거나 빠지는 것은 괜찮습니다. 남아 있는 항목들 사이의 순서가 유지되면 됩니다. 반응형 레이아웃에서 화면 크기에 따라 메뉴가 햄버거 버튼 안으로 들어가는 것도, 같은 화면 크기끼리 순서가 일관되면 허용됩니다.
왜 필요한가요
화면낭독기 사용자와 저시력 사용자는 위치와 순서를 기억해 반복 탐색합니다. 페이지마다 메뉴 순서가 바뀌면 매번 처음부터 찾아야 하고, 인지장애가 있는 사용자는 같은 사이트인지 혼란을 느낍니다.
도움받는 사용자
- 시각장애인(화면낭독기 사용자)
- 저시력(화면 확대) 사용자
- 인지장애 사용자
적용 방법
헤더·주 메뉴·푸터를 공통 템플릿(컴포넌트)으로 만들어 모든 페이지에서 같은 마크업 순서로 출력합니다. 현재 페이지 표시는 순서를 바꾸지 말고 aria-current로 나타냅니다.
<nav aria-label="주 메뉴">
<ul>
<li><a href="/about/">소개</a></li>
<li><a href="/service/" aria-current="page">서비스</a></li>
<li><a href="/notice/">알림</a></li>
</ul>
</nav>자주 하는 실수
- 페이지마다 주 메뉴 항목의 순서가 다릅니다.
- 현재 페이지 메뉴를 맨 앞으로 옮기는 방식으로 순서를 바꿉니다.
- 일부 페이지에서만 검색창이 메뉴 앞뒤로 위치를 바꿉니다.
검사 방법
- 사이트의 여러 페이지에서 반복되는 탐색 영역을 찾습니다.
- 시각적 순서와 소스(포커스) 순서가 페이지 사이에 일관되는지 비교합니다.