Completion 0%

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

6.3.1 포커스를 시각적으로 구별할 수 있는가?

장애 유형

장애 유형
운동
오류 설명
  • 마우스를 사용못하는 장애 환경에서 키보드만 이용해 웹을 탐색할 때에 포커스 표시가 보이지 않으면 어디를 탐색하고 있는 지 알 수 없음.
  • 그러므로 키보드를 이용해 탐색 시 특정 영역이 포커스를 받았을 때, 그 지점을 시각적으로 인지할 수 있어야 함.
  • 브라우저마다 약간의 차이는 있으나, 텍스트 인풋 박스에 커서가 깜박거리거나 링크 영역에 포커스가 받았을 때 점선 모양이 표시되는 것이 해당됨.
  • this.blur()나 outline:none 스타일을 지정하여 브라우저에서 기본적으로 제공되는 포커스 표시를 없애지 않도록 함.
  • this.blur()를 사용하면 포커스가 페이지 첫부분으로 날아가기 때문에 키보드 사용자는 웹페이지 탐색을 할 수 없게 됨.
  • 포커스를 받았음을 인지할 수 있는 다른 방법을 제공한다면 outline:none을 사용하여도 무방함.

오류 유형

onfocus=this.blur(); 를 사용한 경우

오류 예시
메뉴에 onfocus=this.blur(); 처리를 함
참고 이미지
blur 처리 예
해결 방법
onfocus=this.blur();처리를 제거해야 함.

클릭 시 blur 처리를 한 경우

오류 예시
클릭 시 포커스를 blur 처리를 함.
참고 이미지
blur 처리 예
해결 방법
클릭 시 포커스를 blur처리를 하면 이후 포커스가 없어져서 다시 페이지 처음부터 시작하게 되므로 blur처리를 제거해야 함.

CSS에서 outline:none을 사용한 경우

오류 예시

CSS에서 outline:none을 사용하여 포커스 시의 외곽선을 제거하였으나, 포커스 시 포커스 되었음을 알 수 있는 대체 수단을 제공하지 않은 경우

참고 이미지
outline:none 예
해결 방법

outline:none을 제거하거나 포커스 시 포커스 되었음을 알 수 있는 대체 수단을 제공해야 함.

링크의 모든 자식 요소에 position:absolute를 지정하는 등 링크가 자체 크기를 갖지 못하는 경우

오류 예시

a 요소의 자식 요소인 img 요소에 position:absolute가 선언되어 a 요소가 자체 크기를 갖지 못하게 됨. 그 결과 키보드 포커스 시 외곽선이 표시되지 못함.

<style>
img{position:absolute;top:100px;left:100px}
</style>
<a href="http://naver.com"><img src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif" alt="네이버"></a>

a 요소의 자식 요소인 img 요소에 position:absolute가 선언된 예제 페이지

해결 방법

img 요소 대신 a 요소에 position: absolute를 지정

<style>
a{position:absolute;top:100px;left:100px}
</style>
<a href="http://naver.com"><img src="http://static.naver.net/www/u/2010/0611/nmms_215646753.gif" alt="네이버"></a>

보이지 않는 요소에 포커스가 이동하는 경우

오류 예시
더보기 버튼 클릭 시 보이는 레이어가 보이지 않는 상태에서도 레이어 내의 링크에 키보드 포커스가 이동함. 이 때 포커스 된 링크가 시각적으로 표시되지 않음.
참고 이미지
해결 방법
레이어가 보이지 않는 상태에서는 키보드 포커스가 이동하지 않도록 수정

모바일 환경에서 가상포커스의 테두리가 나타나지 않는 경우

오류 예시
해당 영역에 가상포커스 테두리가 나타나지 않음
참고 이미지
해결 방법
모든 콘텐츠에 가상포커스 테두리가 나타나도록 해야 함
참고 이미지

바른 예시

키보드로 이동 시 포커스 아웃라인 확인 가능

참고 이미지

주의 사항

  • this.blur나 outline:none을 사용하지 않았는데도 리얼 IE8에서 포커스 아웃라인이 보이지 않을 경우에도 오류임

평가 방법

페이지에서 Tab으로 이동시 링크의 아웃라인이 나타나는 지 확인

평가 도구
N-WAX
평가 방법
"6.3.1 키보드 포커스" 항목에 검출되는 항목이 있다면 해당 항목에 포커스 후 아웃라인이 나타나는지 확인
N-WAX가 모든 키보드 포커스 오류를 검출하지는 못하기 때문에 키보드 Tab키를 눌러가며 페이지 내의 모든 포커스 가능 요소에 아웃라인이 나타나는지 확인해야 함

모바일 환경에서 가상포커스 확인

평가 방법
VoiceOver, TalkBack의 화면 상단의 항목부터 모두 읽기 기능을 활용하여 모든 콘텐츠에 가상포커스가 적용되는지 확인

평가 도구 전체 설치 방법