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