논리적인 탭 순서를 구현하는 것은 사용자에게 원활한 키보드 탐색 환경을 제공하는 데 중요한 부분입니다. 스크린 리더 및 기타 보조 기술은 DOM 순서로 페이지를 탐색합니다. 정보의 흐름은 적절해야 합니다.
수동 테스트 방법
애플리케이션의 탭 순서가 논리적인지 확인하려면 페이지를 탭으로 이동해 보세요. 일반적으로 포커스는 읽기 순서에 따라 왼쪽에서 오른쪽, 페이지 상단에서 하단으로 이동해야 합니다.
탭 순서를 평가할 때 다음과 같은 두 가지 사항을 염두에 두어야 합니다.
- DOM의 요소가 논리적 순서로 정렬되어 있나요?
- 화면 밖 콘텐츠가 탐색에서 제대로 숨겨졌나요?
탐색에서 부자연스럽게 보이는 점프를 확인합니다. 또한 탭을 누르면 표시되지 않아야 하는 콘텐츠로 이동하는 화면 밖으로 이동하는 경우도 있습니다.
키보드 액세스 기본사항에서 자세히 알아보세요.
해결 방법
포커스 순서가 잘못되었다면 DOM의 요소를 재정렬하여 탭 순서를 더 자연스럽게 만들어야 합니다.
CSS를 사용하여 요소를 시각적으로 재배치한 경우 보조 기술 사용자는 말이 되지 않는 탐색 환경을 경험하게 됩니다. CSS를 사용하는 대신 요소를 DOM의 이전 위치로 이동합니다.
키보드 컨트롤에서 여전히 화면 밖 콘텐츠에 액세스할 수 있다면 tabindex="-1"를 사용하여 삭제하는 것이 좋습니다.
tabindex로 포커스 제어에서 자세히 알아보세요.