Accessibility 본문

5.1 초점 이동

모든 객체에는 초점(focus)이 적용되고, 초점은 순차적으로 이동되어야 한다.

필요성

초점이 적용되지 않으면 Mobile 접근성 도구에서 제공하는 화면 낭독 기능을 활용하는 사용자는 정보를 얻거나 기능을 인지하거나 실행할 수 없는 문제가 발생한다. 또한 순차적으로 이동되지 않을 경우에는 시각장애인, 지적장애인 등이 해당 콘텐츠의 기능과 정보의 이해에 어려움이 발생할 수 있다.

대상

모두

적용기술

  • 초점을 막지 않아야 함

    특정 영역(컨트롤, 사용자 입력 등)이 입력도구 조작(선택, 터치)을 통해 초점을 받았을 때, 해당 영역을 시각적으로 인지할 수 있는 초점을 막지 말아야 함

  • 논리적인 순서

    사용자가 손가락 또는 보조도구를 이용하여 초점을 이동할 때, 해당 초점이 논리적인 순서에 따라 진행해야 함

    본 "초점 이동" 검사항목 진행시, "콘텐츠의 선형화" 검사항목 확인 가능함으로 함께 진행함

    (일반적으로, 좌측 상단에서 우측 하단 방향으로)

  • 대화형 콘텐츠의 초점을 강제로 제거하지 않음

    대화형 콘텐츠 : <a>, <audio> (controls 속성이 있으면), <button>, <details>, <embed>, <iframe>, <img> (usemap 속성이 있으면), <input> (type 속성이 hidden 상태가 아니면), <keygen>, <label>, <menu> (type 속성이 toolbar 상태면), <object>, (usemap 속성이 있으면), <select>, <textarea>, <video> (controls 속성이 있으면)

  • tabindex 사용하지 않는 것을 권장

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

iOS

VoiceOver 사용법 중 두 손가락으로 위로 쓸어 넘기기(화면 상단의 내용부터 읽어줌) 기능을 활용하여 모든 객체에 초점이 적용되는지 체크

VoiceOver 사용법 중 살짝 누르기(항목을 말해줌) 탐색을 통해 초점 영역 체크

Android

TalkBack 사용법 중 한 손가락으로 화면 오른쪽 또는 왼쪽으로 쓸어 넘기기(오른쪽 또는 왼쪽 아이템을 읽어줌) 기능을 활용하여 모든 객체에 초점이 적용되는지 체크

Android ICS(Ice Cream Sandwich, Android OS v4.0) 버전에서는 초점을 순차적으로 이동하여 탐색하는 방법을 제공하고 있지 않음.

iOS, Android

초점이 논리적인 순서로 이동되는지 체크

터치하여 탐색을 통해 초점 영역에 문제가 없는지 체크

오류수(건)
  • 초점이 제공되지 않은 객체 수
  • 초점이 논리적인 순서로 제공 되지 않은 경우 수
  • 초점의 영역이 화면과 다른 경우 수

사례

오류사례

모바일 특가 다음 아래 메뉴들로 초점이동이 되어야 하나, 초점도 맞지 않고 모든 상품을 읽은 후 초점이 이동한 논리적이지 못한 잘못된 사례.

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

"모바일 특가" 에서 "여성" 으로 초점이동이 되도록 해야 함.

오류사례

'인기뉴스' 다음 '분류열기' 로 초점이동이 되어야 하나, '헤드라인뉴스' 로 초점이 이동한 논리적이지 못한 잘못된 사례.

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

"인기뉴스" 에서 "분류열기" 로 초점이동이 되도록 해야 함.

우수사례

VoiceOver, TalkBalk에서 "Daum 소개" 를 읽은 후 초점이동이 "미션과 비전" 으로 이동한 논리적인 우수사례.

초점 이동 우수사례이미지