일시적 또는 영구적인 운동 장애가 있는 사용자부터 키보드 단축키를 사용하여 더 효율적이고 생산적으로 작업하는 사용자에 이르기까지 다양한 사용자가 키보드를 사용하여 애플리케이션을 탐색합니다. 논리적 탭 순서는 원활한 키보드 탐색 환경을 제공하는 데 중요한 부분입니다.
수동으로 테스트하는 방법
애플리케이션의 탭 순서가 논리적인지 확인하려면 페이지를 탭하여 이동해 보세요. 요소에 포커스가 설정되는 순서는 DOM 순서를 따르는 것을 목표로 해야 합니다. 일반적으로 포커스는 왼쪽에서 오른쪽으로, 페이지 상단에서 하단으로 이동하는 읽기 순서를 따라야 합니다.
키보드 액세스 기본사항에서 자세히 알아보세요.
페이지의 모든 양방향 컨트롤에 액세스할 수 있나요?
그렇지 않은 경우 tabindex를 사용하여 이러한 컨트롤의 포커스 가능성을 개선해야 할 수 있습니다.
일반적으로 사용자가 상호작용하거나 입력을 제공할 수 있는 컨트롤은 포커스를 받을 수 있어야 하며 포커스 표시기를 표시해야 합니다.
키보드 사용자가 포커스가 있는 항목을 볼 수 없다면 페이지와 상호작용할 방법이 없습니다.
해결 방법
포커스 순서가 잘못된 것 같으면 DOM에서 요소를 재정렬하여 탭 순서를 더 자연스럽게 만들어야 합니다.
페이지의 모든 양방향 컨트롤에 도달할 수 없는 경우 가장 먼저 취할 수 있는 해결 방법은 맞춤 컨트롤을 표준화된 HTML 대안으로 대체하는 것입니다.
예를 들어 버튼처럼 작동하는 <div>를 <button>로 바꿉니다.
내장된 HTML 요소를 사용하면 사이트의 접근성을 크게 개선하고 워크로드를 크게 줄일 수 있습니다.
표준화된 HTML 등가 항목이 없는 맞춤 양방향 구성요소를 빌드하는 경우 tabindex 속성을 사용하여 키보드로 액세스할 수 있도록 합니다.
예를 들면 다음과 같습니다.
<div tabindex="0">Focus me with the TAB key</div>
tabindex로 포커스 제어에서 자세히 알아보세요.