현재 페이지 위치

Home> 나눔> 웹접근성 가이드> PC/모바일 웹 접근성 체크리스트

PC/모바일 웹 접근성 체크리스트

체크리스트 보기

7.2.1 반복되는 콘텐츠(메뉴 등)가 있을 경우 이를 건너뛸 수 있는 링크를 제공하며, 키보드로도 접근이 가능한가?

장애 유형

장애 유형
전맹, 저시력, 운동
오류 설명
  • 시각 및 운동 장애 환경에서 순차적으로 웹 콘텐츠를 탐색할 때, 메뉴처럼 페이지마다 반복되는 콘텐츠는 거쳐야 하는 것은 매우 번거로움.
  • HTML 문서내에 <body> 요소 바로 아래에 건너뛰기 링크를 제공해야하며, 최소한 키보드로 접근 시 육안으로 보여야 함.
  • 너무 많은 수의 건너뛰기 링크는 오히려 불편함을 초래하니, 건너뛰기 링크는 3개 이하로 제공하는 것이 가장 바람직함.

오류 유형

대메뉴 등 반복되는 영역이 있음에도 건너뛰기 링크를 제공하지 않은 경우

오류 예시
반복되는 메뉴가 있음에도 건너뛰기 링크를 제공하지 않았음.
참고 이미지
건너뛰기 링크가 없는 예
해결 방법
반복되는 메뉴가 있는 경우에는 건너뛰기 링크를 제공해야 함.

건너뛰기 링크는 제공하고 있으나 동작이 안되는 경우

오류 예시
건너뛰기 링크가 동작하지 않음.
참고 이미지
건너뛰기 링크가 동작하지 않은 예
해결 방법
건너뛰기 링크가 동작해야 함.

건너뛰기 링크는 육안으로 보이게 하는 것을 권장하며 최소한 키보드로 접근시에는 보여져야 함.

오류 예시
건너뛰기 링크를 제공하고 있으나 CSS로 숨겨두어 보이지 않음.
참고 이미지
건너뛰기 링크가 육안으로 보이지 않는 예
해결 방법
건너뛰기 링크는 육안으로 보이게 하는 것을 권장하며 최소한 키보드로 접근시에는 보여져야 함.

모바일 환경에서 대메뉴 등 반복되는 영역이 있음에도 건너뛰기 링크를 제공하지 않은 경우

오류 예시
반복되는 메뉴가 있음에도 건너뛰기 링크를 제공하지 않았음.
참고 이미지
해결 방법
반복되는 메뉴가 있는 경우에는 건너뛰기 링크를 제공해야 함.
참고 이미지

주의 사항

건너뛰기 링크를 4개 이상 제공한 경우, 오류는 아니나 3개 이하를 권장함.

오류 아님 예
건너뛰기 링크를 7개 제공하고 있음.
참고 이미지

건너뛰기 링크 대상 요소의 hasLayout 속성이 false이면 IE9 이하에서 키보드 포커스 이동이 되지 않음

오류 아님 예

<div id="content">요소의 hasLayout 속성이 false.

<a href="#content" class="skip">본문 바로가기</a>
<ul>
  <li><a href="#">메뉴1</a></li>
  <li><a href="#">메뉴2</a></li>
  <li><a href="#">메뉴3</a></li>
  <li><a href="#">메뉴4</a></li>
  <li><a href="#">메뉴5</a></li>
</ul>
<div id="content">
  본문
</div>
해결 방법

<div id="content">요소가 hasLayout을 가질 수 있도록 수정하는 것이 좋음.

Opera와 Webkit 계열의 브라우저에 건너뛰기 링크 대상 요소로 키보드 포커스 이동이 되지 않은 버그가 있음

관련 사이트
Bug 59737 - Focus and caret position should be updated when same-page links are followed - Webkit Bugzilla
해결 방법
키보드 포커스 이동을 보정해주는 스크립트삽입

키보드 포커스가 닿았을 때 보여지는 스킵내비게이션 예시

관련 사이트
http://www.bbc.co.uk/
참고 이미지
키보드 포커스가 닿으면 스킵내비게이션이 보여지고 있음.

iOS VoiceOver 에서 화면 변화가 있을 때 초점의 임의 추적

오류 예시
화면상에서 요소가 갑자기 변화하는 경우(페이지 영역 이동, 레이어 노출, 콘텐츠 자동갱신 등) VoiceOver 초점이 지정된 위치에 일정시간 잔존하면서 인근의 임의 요소로 초점 재설정함.
참고 이미지
스킵네비게이션을 통해 초점을 이동하였을 때, 영역 설정이나 화면의 배치에 따라 원하는 초점으로 이동이 이루어지지 않는 경우가 있음.
해결 방법
화면상에서 요소가 갑자기 변화해야 하는 경우, 잔존하는 초점이 엉뚱한 콘텐츠를 가리키지 않도록 버튼의 배치나 해시링크(#)목적지 지정할 때 주의를 요함.

평가 방법

평가 방법

평가 방법
  • 반복되는 콘텐츠가 하나도 없을 경우 해당 없음 처리
  • 건너뛰기 링크가 문서내에 연결이 되어 있는 지 평가 툴을 통해 확인 → 건너뛰기 링크가 육안으로 보이는 지 확인 → 직접 Tab으로 이동했을 때 건너뛰기 링크가 나타나는 지 확인 → 제대로 동작하는 지 확인

모바일 환경에서 평가 방법

평가 방법
  • 반복되는 콘텐츠가 하나도 없을 경우 해당 없음 처리
  • 건너뛰기 링크가 문서내에 연결이 되어 있는 지 VoiceOver, TalkBack 등을 사용해서 확인하고 건너뛰기 링크가 육안으로 보이는 지 확인 → 직접 가상포커스로 이동했을 때 건너뛰기 링크가 나타나는 지 확인 → 제대로 동작하는 지 확인

구현 예시

키보드로 접근 가능한 건너뛰기 링크

설명
키보드의 Tab키를 이용하여 웹 콘텐츠를 탐색할 때 접근 가능한 건너뛰기 링크로, 스크린리더에서도 접근 가능
HTML
<a href="#content" class="skip">본문 바로가기</a>
<ul>
  <li><a href="#">메뉴1</a></li>
  <li><a href="#">메뉴2</a></li>
  <li><a href="#">메뉴3</a></li>
  <li><a href="#">메뉴4</a></li>
  <li><a href="#">메뉴5</a></li>
</ul>
<div id="content">
  본문
</div>
CSS
.skip{display:block;overflow:hidden;height:1px;width:1px;margin:0 -1px -1px 0;font-size:0;line-height:0}

평상시에 노출되는 건너뛰기 링크

설명
키보드로 접근 가능한 건너뛰기 링크는 Tab키를 눌러야만 알 수 있기 때문에, 건너뛰기 링크가 평상시에도 노출되는 것이 접근성 향상에 좋음
HTML
<a href="#content" class="skip">본문 바로가기</a>
<ul>
  <li><a href="#">메뉴1</a></li>
  <li><a href="#">메뉴2</a></li>
  <li><a href="#">메뉴3</a></li>
  <li><a href="#">메뉴4</a></li>
  <li><a href="#">메뉴5</a></li>
</ul>
<div id="content">
  본문 <a href="#">본문 내 링크</a>
</div>
CSS
.skip{display:block;width:auto;margin:0;padding:10px;background:#232c32;font-weight:700;color:#fff;text-decoration:none}

평가 도구 전체 설치 방법