Accessibility 본문

2.1.2 초점 이동

키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

필요성

초점이 시각적으로 보이지 않으면, 키보드 사용자는 컨텐츠를 파악할 수 없으므로 컨텐츠를 운용할 수 없다.

대상

모두

적용기술

  • 초점을 막지 않아야 함
    특정 영역(컨트롤, 사용자 입력 등)이 위치 지정 도구(마우스)나 키보드 조작을 통해 초점(선택/클릭)을 받았을 때, 해당 영역을 시각적으로 인지할 수 있도록 초점을 막지 말아야 함
  • 논리적인 순서
    사용자가 키보드를 이용하여 초점을 이동할 때, 해당 초점이 논리적인 순서에 따라 진행해야 함
    (일반적으로, 좌측 상단에서 우측 하단 방향으로)
  • 인터렉션 개체들의 초점을 강제로 제거하지 않음
  • tabindex 사용하지 않는 것을 권장

검사방법 및 QA 지표 산정방법

  • 자동 검사 방법 : 접근성 검사 도구를 통한 검사 방법
  • 수동 검사 방법 : 직접 수동으로 확인하는 검사 방법
  • 발견수(건) : 해당 콘텐츠 발견 수
  • 준수수(건) : 준수한 콘텐츠 수
  • 오류수(건) : 오류 콘텐츠(요소 또는 영역) 수
자동검사방법

onfocus="this.blur()" 속성 유무 체크

오류수(건)

onfocus="this.blur()" 속성이 있는 요소 수

수동검사방법
  • 키보드 Tab으로의 이동이 논리적인지 체크
  • 초점을 받은 요소(링크, 컨트롤, 입력서식)가 시각적으로 구분이 되는지 체크
오류수(건)
  • Tab 키 이동시 초점이 시각적으로 구분이 안되는 객체
  • Tab 키와 Shift + Tab 키의 초점이동이 순환적이고 반복적으로 안되는 경우
  • 화면의 변화(전체화면, alert 등의 레이어)에 이전의 초점이 이동하지 않은 경우
평가점수

100 - (수동 오류수 * 5)점

사례

오류사례

오류사항

"더보기" 실행 후 키보드 Tab 키에 의한 초점이동이 "검색쇼" 로 이동하여야 하나, "게임" 으로 초점이 이동한 논리적이지 못한 잘못된 사례.

초점 이동 오류사례이미지
개선방법

"더보기" 에서 "검색쇼" 로 초점이동이 되도록 해야 함.

우수사례

"Daum 소개" 실행 후 키보드 Tab 키에 의한 초점이동이 "미션과 비전" 으로 이동한 논리적인 우수사례.

초점 이동 우수사례이미지