키보드 포커스 가능 대화형 컨트롤

모든 맞춤 컨트롤이 키보드 포커스를 받을 수 있고 포커스 표시기를 표시하는지 수동으로 확인합니다. 요소에 포커스가 설정되는 순서는 DOM 순서를 따르는 것을 목표로 해야 합니다. 포커스를 받아야 하는 요소에 관해 잘 모르겠다면 web.dev의 접근성 알아보기 과정에서 포커스 모듈을 참고하세요.

수동으로 테스트하는 방법

맞춤 컨트롤에 포커스를 설정할 수 있고 포커스 표시기가 표시되는지 테스트하려면 먼저 사이트를 탭하여 이동합니다. TAB(또는 SHIFT + TAB)를 사용하여 컨트롤 간에 이동하고 화살표 키와 ENTER, SPACE를 사용하여 값을 조작합니다(키보드 액세스 기본사항 참고).

페이지의 모든 양방향 컨트롤에 액세스할 수 있나요? 각 양방향 컨트롤에 포커스 표시기가 있나요?

해결 방법

페이지의 모든 요소를 탭하여 이동할 수 없는 경우 tabindex를 사용하여 이러한 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.

맞춤 컨트롤에 포커스를 설정하려면 tabindex="0"를 사용하여 맞춤 컨트롤 요소를 자연 탭 순서에 삽입합니다(tabindex로 포커스 제어 참고). 예를 들면 다음과 같습니다.

<div tabindex="0">Focus me with the TAB key</div>

맞춤 컨트롤 요소에 적절한 ARIA 역할을 추가해야 할 수도 있습니다. 커스텀 컨트롤에 ARIA 역할이 있음을 참고하세요.

포커스 표시기가 표시되지 않으면 :focus를 사용하여 항상 포커스 표시기를 표시하는 것이 좋습니다. 마우스를 사용하든 키보드를 사용하든 탭하여 이동해도 버튼의 포커스 표시기는 항상 동일하게 표시됩니다(포커스 스타일 참고).

중요한 이유

마우스를 사용할 수 없거나 사용하지 않는 사용자의 경우 키보드 탐색이 화면의 모든 항목에 도달하는 기본 수단입니다. 우수한 키보드 환경은 논리적인 탭 순서와 구별 가능한 포커스 스타일에 따라 달라집니다. 키보드 사용자가 포커스가 있는 항목을 보거나 알 수 없는 경우 페이지와 상호작용할 방법이 없습니다.

접근성 검토 방법에서 자세히 알아보세요.

리소스