6.4.4 고정된 참조 위치 정보

요구 사항

페이지 구분이 있는 전자출판문서(전자책, 전자 교과서 등) 형식의 웹 페이지는 다음을 제공해야 합니다.

• 참조 위치 정보: 페이지 번호 같은 페이지 구분자(pagebreak locators)를 제공합니다.
• 페이지 이동 기능: 각 페이지로 이동할 수 있는 기능을 제공합니다.
• 일관된 유지: 확대·축소로 서식이 바뀌거나 플랫폼이 바뀌어도 참조 위치 정보가 사라지지 않고 일관된 위치에 유지되어야 합니다.

전자출판문서 형식이 아닌 일반 웹 페이지에는 해당하지 않습니다. WCAG 2.2에는 직접 대응하는 성공 기준이 없는 항목입니다.

KWCAG 2.2에서 새로 추가된 검사 항목입니다.

왜 필요한가요

수업에서 “42쪽을 펴세요”처럼 페이지로 위치를 지칭할 때, 글자를 확대해 쓰는 저시력·전맹·인지장애 사용자도 확대하지 않는 사용자와 같은 페이지를 찾아갈 수 있어야 합니다.

도움받는 사용자

• 저시력 사용자(화면·글자 확대)
• 시각장애인(화면낭독기 사용자)
• 인지장애가 있는 사용자
• 교육 현장의 학생·교사

적용 방법

원본 인쇄본의 페이지 구분 위치에 페이지 구분자를 넣고, 페이지 목록으로 이동할 수 있는 탐색 수단을 제공합니다. EPUB 3의 페이지 목록(page-list)과 같은 방식을 웹에서도 사용할 수 있습니다. ARIA 1.2에는 doc-pagebreak, doc-pagelist 같은 DPUB-ARIA 역할이 정의되어 있습니다.

<nav aria-label="페이지 목록" role="doc-pagelist">
  <ol>
    <li><a href="#page-41">41쪽</a></li>
    <li><a href="#page-42">42쪽</a></li>
  </ol>
</nav>
…
<p>… 앞 문단의 끝.</p>
<span id="page-42" role="doc-pagebreak" aria-label="42쪽"></span>
<p>다음 문단의 시작 …</p>

<form role="search" aria-label="페이지 이동">
  <label for="goto">이동할 쪽</label>
  <input id="goto" type="number" min="1" max="320" inputmode="numeric">
  <button type="submit">이동</button>
</form>

사례

<span role="doc-pagebreak" id="p15" aria-label="15쪽"></span>

<div class="viewer-page">현재 3 / 12 화면</div>

자주 하는 실수

• 전자책 뷰어가 화면 단위 번호만 제공하고 원본 쪽 번호를 제공하지 않습니다.
• 특정 쪽으로 이동하는 기능이 없습니다.
• 글자를 확대하면 쪽 번호 표시가 사라집니다.

검사 방법

• 전자출판문서 형식의 페이지인지 먼저 확인합니다(아니면 해당 없음).
• 페이지 구분자(쪽 번호)가 제공되고 화면낭독기로도 인식되는지 확인합니다.
• 특정 쪽으로 이동하는 기능이 있는지 확인합니다.
• 확대·축소, 다른 기기·브라우저에서도 같은 쪽 번호가 같은 위치에 유지되는지 확인합니다.