맞춤 대화형 컨트롤은 포커스를 받을 수 있어야 합니다. 예를 들어 JavaScript를 사용하여 <div>을 멋진 드롭다운으로 변환하는 경우 드롭다운이 올바른 탭 순서에 자동으로 삽입되지 않습니다.
모든 맞춤 컨트롤이 키보드 포커스를 받을 수 있는지 수동으로 확인해야 합니다.
가능하면 상호작용을 허용하는 시맨틱 HTML 요소를 사용하세요.
테스트 방법
맞춤 컨트롤에 포커스 가능 여부를 테스트하려면 TAB 키를 눌러 사이트를 탐색합니다.
페이지에서 모든 양방향 컨트롤에 액세스할 수 있나요?
그렇지 않은 경우 tabindex를 사용하여 이러한 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.
tabindex로 포커스 제어도 참고하세요.
해결 방법
커스텀 컨트롤에 포커스를 설정하려면 tabindex="0"를 사용하여 커스텀 컨트롤 요소를 자연 탭 순서에 삽입합니다.
예를 들면 다음과 같습니다.
<div tabindex="0">Focus me with the TAB key</div>
중요한 이유
마우스를 사용할 수 없거나 사용하지 않는 사용자의 경우 키보드 탐색이 화면의 모든 항목에 도달하는 기본 수단입니다. 좋은 키보드 환경은 논리적인 탭 순서와 눈에 띄는 포커스 스타일을 기반으로 합니다. 키보드 사용자가 포커스가 있는 항목을 볼 수 없다면 페이지와 상호작용할 방법이 없습니다.
접근성 테스트를 처음 접하는 경우 수동 접근성 테스트 및 보조 기술 테스트에 관해 알아보는 것이 좋습니다.