Completion 0%

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

6.2.1 포커스가 논리적인 순서로 이동하는가?

장애 유형

장애 유형
전맹, 저시력, 운동
오류 설명
  • 전맹, 저시력의 경우 스크린리더나 점자정보단말기, 모바일의 VoiceOver, TalkBack 등을 활용하여 화면을 읽음.
  • 시각장애인의 경우 주로 키보드, 모바일의 가상포커스를 사용하며 운동장애의 경우에도 세밀한 조작이 필요한 마우스, 터치 입력 수단보다는 키보드나 가상포커스를 제어할 수 있는 보조기기를 주로 사용함.
  • 포커스 이동만으로 웹을 탐색할 때 모든 요소에 논리적인 순서(위→ 아래, 왼쪽 → 오른쪽, 메뉴 → 내용 등)로 접근 가능해야 하며, 포커스가 같은 영역에서 맴돌거나 더 이상의 이동이 어려운 경우가 발생하지 않도록 해야 함.
  • 아이프레임이나 플래시처럼 기본 맥락과 다른 형태의 콘텐츠가 삽입되더라도 무리 없이 포커스 이동만으로 탐색 가능해야 함
  • 논리적인 순서란?
    위→ 아래, 왼쪽 → 오른쪽, 메뉴 → 콘텐츠, 탭1 → 탭1내용 → 탭2 → 탭2내용, 메뉴1 → 메뉴1-1/메뉴 1-2 → 메뉴2 → 메뉴 2-1 순서로 이동하는 것을 의미함

오류 유형

Tab키와 Shift+Tab키로 이동시 이동순서가 논리적이지 않으며 일관성이 없는 경우

오류 예시
Tab키로 이동시 아이디 -> 로그인 -> 비밀번호 순으로 이동됨.
참고 이미지
없음
해결 방법
Tab키로 이동시 아이디 -> 비밀번호 -> 로그인 순으로 이동되어야 함.

키보드 포커스가 맴돌거나 더이상 이동할 수 없는 경우

오류 예시
키보드 포커스가 좌측 상단 로고에만 머물고 다른 곳으로 이동할 수 없음
참고 이미지
키보드 포커스가 맴도는 예
해결 방법
페이지내에 모든 요소에 키보드로 접근할 수 있어야 함.

플래시내에 오브젝트에 키보드로 접근시 접근 순서가 논리적이지 않은 경우

오류 예시
메뉴에 키보드로 접근시 '법인고객결제' -> '포인트안내' 순서로 이동하고 있음.
참고 이미지
플래시내에 메뉴 이동이 논리적이지 않은 예
해결 방법
'법인고객결제' -> '개인고객결제관리'-> '제휴신용카드' 순서로 이동해야 함.

레이어가 나타난 상태에서의 포커스 순서가 논리적이지 않은 경우

오류 예시
레이어가 나타난 상태에서의 포커스 순서가 '꼬마꼬마님 → 로그아웃 → 바로가기 → 내 미투데이 → 내 블로그' 순으로 구성되어 논리적이지 않음
참고 이미지


논리적이지 않은 포커스 순서




논리적으로 수정된 포커스 순서

해결 방법
포커스 순서가 '꼬마꼬마님 → 내 미투데이 → 내 블로그 → 로그아웃 → 바로가기' 순으로 구성되도록 수정되어야 함

모바일 환경에서 가상포커스의 순서가 논리적이 아닌 경우

오류 예시
모바일에서 팝업 된 레이어에 가상포커스가 바로 접근되는 것이 아니라 레이어 뒤에 머물게 되고, 레이어 뒷편을 먼저 탐색하게 됨
참고 이미지
해결 방법
가상포커스가 팝업 된 레이어에 바로 접근되어 사용자가 팝업 된 레이어를 바로 제어할 수 있도록 해야 함

주의 사항

마우스 오버 시 탭 메뉴가 선택되는 경우

탭 메뉴 마우스 오버 시 탭 컨텐츠가 변경 되는 경우 키보드 포커스 순서는 탭 메뉴와 탭 컨텐츠를 하나의 묶음으로 보고 탭1 -> 내용1 -> 탭2 -> 내용2 ... 와 같은 순으로 포커스가 이동해야 한다.

참고 예시

평가 방법

평가 방법

평가 방법
  • Tab키로 이동 시 콘텐츠의 모든 요소가 논리적으로 구성되어 있는지 확인.
  • Tab키로 이동 시 모든 요소를 탐색할 수 있는 지 확인.
  • Tab키로 이동 시 키보드 포커스가 페이지 내에서 맴돌며 빠져나오지 못하는 경우가 있는 지 확인.
  • 플래시내에 탐색이 가능한 요소가 키보드로 접근이 가능한지, 논리적으로 구성되어 있는 지 확인.

모바일 환경에서 평가 방법

평가 방법
  • VoiceOver, TalkBack의 가상포커스로 이동 시 콘텐츠의 모든 요소가 논리적으로 구성되어 있는지 확인.
  • VoiceOver, TalkBack의 화면 상단의 항목부터 모두 읽기 기능을 활용하여 가상포커스가 논리적인 순서로 적용되는지 확인
  • 가상포커스로 이동 시 모든 요소를 탐색할 수 있는 지 확인.
  • 가상포커스로 이동 시 포커스가 페이지 내에서 맴돌며 빠져나오지 못하는 경우가 있는 지 확인.
  • 플래시내에 탐색이 가능한 요소가 가상포커스로 접근이 가능한지, 논리적으로 구성되어 있는 지 확인.

평가 도구 전체 설치 방법