맞춤 대화형 컨트롤은 포커스 가능해야 합니다.
JavaScript를 사용하여 <div>을 멋진 드롭다운으로 전환하면 탭 순서에 자동으로 삽입되지 않습니다.
모든 맞춤 컨트롤이 키보드에 포커스를 맞출 수 있는지 수동으로 확인해야 합니다.
키보드 액세스 기본사항도 참고하세요.
수동 테스트 방법
맞춤 컨트롤이 포커스 가능한지 테스트하려면 TAB 키를 눌러 사이트를 탐색합니다.
페이지에 있는 모든 대화형 컨트롤에 액세스할 수 있나요?
아니면 tabindex를 사용하여 이러한 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.
tabindex로 포커스 제어도 참고하세요.
해결 방법
맞춤 컨트롤을 포커스 가능하게 만들려면 tabindex="0"를 사용하여 자연스러운 탭 순서에 맞춤 컨트롤 요소를 삽입합니다.
예를 들면 다음과 같습니다.
<div tabindex="0">Focus me with the TAB key</div>
중요한 이유
마우스를 사용할 수 없거나 사용하지 않기로 선택하는 사용자의 경우 키보드 탐색이 화면의 모든 항목에 도달하는 기본 수단입니다. 좋은 키보드 환경은 논리적인 탭 순서와 쉽게 구분할 수 있는 포커스 스타일이 필요합니다. 키보드 사용자가 포커스가 있는 항목을 볼 수 없다면 페이지와 상호작용할 수 없습니다.
접근성 검토 방법에서 자세히 알아보세요.