안녕하세요. 하이브랩 웹표준개발1팀 방지은입니다.
접근성 개선 업무을 하면서 초점이 이동되는 요소에 대해 생각했습니다.
왜 키보드 초점이 이동돼야 하고, 초점을 시각적으로 구별해야 할까요?
한국형 웹 콘텐츠 접근성 지침 2.0에는 키보드에 관련된 검사 항목이 있습니다.
2.1.1(키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2.1.2(초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
웹 페이지에서 제공하는 모든 기능은 키보드만으로 사용할 수 있도록 제공해야 합니다.
마우스를 사용할 수 없는 환경 혹은,
장애가 있어 위치 지정 도구를 사용하지 못할 경우 키보드만으로 웹을 탐색할 수 있어야 하기때문입니다.
키보드 초점이 보이지 않으면 저시력자, 지체 장애인들뿐만 아니라
일반 사용자도 웹페이지에서 현재 위치를 알 수 없습니다.
그래서 초점이 이동됐을때, 해당 영역이 초점 받았음을 표시 해야 합니다.
그렇다면, 어떤 요소에 초점이 이동되고 초점 받았음을 표시할까요?
키보드 초점이 이동되는 요소는 무엇이 있을까?
a, area, button, input, textarea, object, select 이 요소들은 초점 이동이 가능하며,
초점 받았음을 표시합니다.
아래 예시들은 Tab키로 초점 이동을 확인 할 수 있습니다.
- a초점 이동
- area
- button
- input
- object
- select
- textarea
정말 초점이 이동되는 요소가 이것들 뿐일까요!?
폼 콘트롤 요소와 함께 사용하는 label*이라는 요소에 초점이 이동되지 않을까요?
테스트를 해봤습니다.
*레이블(label): 온라인 서식에서 사용되는 각 컨트롤(예: 텍스트 입력 상자, 라디오 선택 버튼, 체크 상자, 드롭다운 메뉴 등)의 역할을 설명해 주는 제목 텍스트를 레이블이라 한다.
label 초점 이동 테스트
Chrome, FireFox, Safari, Opera, IE8~IE10에서 label에 초점이 이동되지 않고 체크박스, 라디오 버튼에만 이동됩니다.
IE7에서 label
IE7에서는 체크박스, 라디오 버튼에 초첨이 이동되지 않고, label에 초점이 이동이 됩니다.
체크박스, 라디오 버튼이라서 아닐까? text입력창으로 IE7에서 반응을 살펴봤습니다.
text입력창에서는 label에 초점이 이동되지 않고 바로 text입력창으로 이동됩니다.
정리
Label에 초점이 이동된다고 말할 수 있을까요?
IE7 체크박스와 IE7 라디오 버튼에서
한정적으로 나타나는 현상이기 때문에 초점이 이동되는 요소가 아니라고 생각합니다.
object는 IE, Opera는 정상적으로 초점이동이 확인되었으나, Chrome, Safari는 초점 이동이 안 되고, FireFox는 object안에 플래시 파일이 로딩이 안 됩니다. 이와 관련해서는 더 연구를 해봐야 할 것 같습니다.