모든 맞춤 컨트롤이 키보드에 포커스를 맞출 수 있고 포커스 표시기를 표시하는지 수동으로 확인합니다. 요소에 포커스가 맞춰지는 순서는 DOM 순서를 따르는 것을 목표로 해야 합니다. 포커스를 받아야 하는 요소를 잘 모르겠다면 포커스 소개를 참고하세요.
수동 테스트 방법
맞춤 컨트롤이 포커스 가능하고 포커스 표시기를 표시하는지 테스트하려면 먼저 사이트를 탭으로 이동합니다.
TAB (또는 SHIFT +
TAB)를 사용하여 컨트롤 간에 이동하고 화살표 키와 ENTER 및 SPACE를 사용하여 값을 조작합니다(키보드 액세스 기본사항 참고).
페이지에 있는 모든 대화형 컨트롤에 액세스할 수 있나요? 각 대화형 컨트롤에 포커스 표시기가 있나요?
해결 방법
페이지의 모든 요소를 탭할 수 없는 경우 tabindex를 사용하여 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.
맞춤 컨트롤을 포커스 가능하게 만들려면 tabindex="0"을 사용하여 맞춤 컨트롤 요소를 자연스러운 탭 순서에 삽입합니다(tabindex로 포커스 제어 참고).
예를 들면 다음과 같습니다.
<div tabindex="0">Focus me with the TAB key</div>
맞춤 컨트롤 요소에 적절한 ARIA 역할을 추가해야 할 수도 있습니다. 맞춤 컨트롤에 ARIA 역할 부여를 참고하세요.
포커스 표시기가 표시되지 않으면 :focus를 사용하여 항상 포커스 표시기를 표시하는 것이 좋습니다.
마우스 또는 키보드를 사용하여 탭을 이동하든지 버튼의 포커스 표시기는 항상 동일하게 표시됩니다(스타일 포커스 참고).
중요한 이유
마우스를 사용할 수 없거나 사용하지 않기로 선택하는 사용자의 경우 키보드 탐색이 화면의 모든 항목에 도달하는 기본 수단입니다. 좋은 키보드 환경은 논리적인 탭 순서와 쉽게 구분할 수 있는 포커스 스타일이 필요합니다. 키보드 사용자가 포커스가 있는 항목을 볼 수 없다면 페이지와 상호작용할 수 없습니다.
접근성 검토 방법에서 자세히 알아보세요.