들어가기 전에
웹 페이지에 공통적으로 들어있는 부분을 반복 영역이라고 하는데요, 스크린리더 사용자는 페이지가 로드 되거나 갱신될 때마다 반복 영역을 다시 듣게 됩니다.
키보드 사용자도 탭을 여러 번 반복해서 접근해야 하는 불편을 방지하기 위해 반복되는 영역을 건너뛸 수 있는 기능을 제공해야 합니다.
반복 영역 건너뛰기를 어떻게 제공해야 하는지 살펴보도록 하겠습니다.
핵심키워드
- 반복 영역 건너뛰기
- 스킵 내비게이션
학습하기
14) 반복 영역 건너뛰기
반복 영역 건너뛰기 제공 방법
- 마크업상 최 상단에 위치
- 건너뛰기 링크가 페이지 내에 존재
- 키보드 접근 시 화면에 노출
- "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 부적절
<body>
<div id="skip_nav">
<a href="#content">본문 바로 가기</a>
<a href="#menu">주 메뉴 바로 가기</a>
…
<div id="content">
…
<div id="menu">
…
</body>정리하자면 반복 영역 건너뛰기는 마크업상 최 상단에 위치해야 하고 건너뛰기 링크가 페이지 내에 존재해야 합니다.
즉, 본문 바로 가기를 선택하면 이 content를 id로 가진 영역이 페이지 내에 있어야 한다는 것입니다.
키보드 접근이 가능하고 접근 시 화면에 보이도록 구현해야 하며, 키보드 접근이 불가능하면 8번 키보드 접근 보장에도 영향을 미칩니다.
반복 영역 건너뛰기 링크에 "하단 메뉴로 바로 가기"와 같이 위치 정보를 제공하면 하단이 어디인지 인식하기 힘들기 때문에 부적절합니다. 이는 4번 명확한 지시 사항 제공에도 영향을 미칩니다.
comment
웹 페이지에서 반복되는 부분이 있는 경우 스크린 리더 사용자는 다음 화면으로 넘어갈 때마다 원치 않아도 해당 부분을 반복하여 듣게 된다.
따라서 건너뛰기 콘텐츠를 제공해야 한다.
반복 영역 건너뛰기는
1. 마크업상 최 상단에 위치해야 하며
2. 건너뛰기 링크가 페이지 내에 존재해야 하고
3. 키보드 접근 시 화면에 노출되어야 한다.
추가적으로, "하단 메뉴로 바로 가기"와 같은 위치 정보 제공은 명확한 지시 사항을 제공하지 않는 것으로 간주되어 부적절한다.