고정된 참조 위치 정보

무엇을 요구하나요?

인쇄본·PDF처럼 쪽 번호 등 고정된 참조 위치가 있는 원본을 웹 콘텐츠로 제공할 때, 사용자가 원본과 같은 위치로 이동할 수 있는 정보를 제공해야 합니다. 예를 들어 수업에서 “교과서 42쪽을 펴세요”라고 할 때, 화면 낭독기로 웹 교재를 보는 학생도 42쪽 위치를 찾을 수 있어야 합니다.

KWCAG 2.2에서 새로 생긴 항목으로, 지침은 전자출판문서 형식의 웹 페이지를 대상으로 두 가지를 요구합니다.

• 쪽 번호 같은 참조 위치 정보(페이지 구분자)를 제공하고, 각 페이지로 이동하는 기능을 제공한다
• 글자 확대·축소로 서식이 바뀌거나 플랫폼이 달라져도 참조 위치 정보가 사라지지 않고 일관된 위치에 유지된다

고치는 법

1. 쪽이 바뀌는 위치에 표시 넣기

<p>…앞 쪽의 마지막 문장.</p>
<p>다음 쪽의 첫 문장…</p>

<p>…앞 쪽의 마지막 문장.</p>
<span id="page-42" role="doc-pagebreak" aria-label="42쪽"></span>
<p>다음 쪽의 첫 문장…</p>

role="doc-pagebreak"는 전자 출판용 접근성 역할(DPUB-ARIA)로, 보조기기가 쪽 경계를 알 수 있게 합니다. 눈에 보이게 쪽 번호를 표시해도 좋습니다.

2. 쪽 목록으로 바로 이동

<nav aria-label="쪽 목록">
  <ol>
    <li><a href="#page-41">41쪽</a></li>
    <li><a href="#page-42">42쪽</a></li>
  </ol>
</nav>

3. 쪽 번호로 이동하는 입력 칸

<form action="#" onsubmit="location.hash = 'page-' + this.p.value; return false;">
  <label for="goto-page">이동할 쪽</label>
  <input id="goto-page" name="p" type="number" min="1">
  <button type="submit">이동</button>
</form>

확인하는 방법

1. 원본에 쪽 번호가 있는 콘텐츠인지 먼저 확인하세요. 없다면 해당 없음입니다.
2. 원본의 특정 쪽(예: 42쪽)을 웹 화면과 화면 낭독기로 찾아갈 수 있는지 확인하세요.
3. 쪽 표시의 id가 겹치지 않는지 확인하세요. (8.1.1 마크업 오류 방지 참고)