논리적인 탭 순서는 사용자에게 원활한 키보드 환경을 제공하는 데 중요합니다. 스크린 리더와 기타 보조 기술은 DOM 순서로 페이지를 탐색합니다. 정보의 흐름은 이해할 수 있어야 합니다.
수동 테스트 방법
애플리케이션의 탭 순서가 논리적인지 확인하려면 페이지를 탭하여 이동해 보세요. 일반적으로 포커스는 페이지 상단에서 하단까지 읽기 순서를 따라야 합니다. 대부분의 언어에서 읽기 순서는 왼쪽에서 오른쪽으로 움직입니다. 아랍어와 히브리어 등 일부에서는 읽기 순서가 오른쪽에서 왼쪽으로 움직입니다.
탭 순서를 평가할 때는 다음 두 가지 주요 사항을 기억해야 합니다.
- DOM의 요소가 논리적 순서로 정렬되어 있나요?
- 화면 밖 콘텐츠가 탐색 메뉴에서 올바르게 숨겨져 있나요?
탐색 시 불편을 주는 갑작스러운 이동이 있는지 확인합니다. 또한 화면 밖 점프도 확인하세요. 즉, 탭하면 보이지 않는 콘텐츠로 이동합니다.
키보드 액세스 기본사항에서 자세히 알아보세요.
해결 방법
포커스 순서가 잘못된 것 같으면 DOM의 요소를 재정렬하여 탭 순서가 더 자연스럽게 표시되도록 합니다.
CSS를 사용하여 요소의 위치를 시각적으로 재배치하지 마세요. 보조 기술 사용자는 무의미한 탐색을 경험하게 됩니다. CSS를 사용하는 대신 요소를 DOM의 이전 위치로 이동합니다.
키보드 컨트롤로 화면 밖 콘텐츠에 계속 액세스할 수 있다면 tabindex="-1"를 사용하여 삭제하는 것이 좋습니다.
tabindex로 포커스 제어에서 자세히 알아보세요.