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

게시일: 2019년 5월 2일

모든 맞춤 컨트롤에 키보드 포커스가 가능하고 포커스 표시기가 표시되는지 수동으로 확인합니다. 요소에 포커스가 지정되는 순서는 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를 사용하여 항상 포커스 표시기를 표시하는 것이 좋습니다. 마우스나 키보드를 사용하여 탭으로 이동하는지 여부와 관계없이 버튼의 포커스 표시기는 항상 동일하게 표시됩니다(스타일 포커스도 참고).

중요한 이유

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

접근성 학습에서 접근성에 대해 자세히 알아보세요.

리소스