페이지의 시각적 순서가 DOM 순서를 따릅니다.
bookmark_borderbookmark
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
논리적인 탭 순서는 사용자에게 원활한 키보드 환경을 제공하는 데 중요합니다.
스크린 리더와 기타 보조 기술은 DOM 순서로 페이지를 탐색합니다.
정보의 흐름은 이해할 수 있어야 합니다.
수동 테스트 방법
애플리케이션의 탭 순서가 논리적인지 확인하려면 페이지를 탭하여 이동해 보세요.
일반적으로 포커스는 페이지 상단에서 하단까지 읽기 순서를 따라야 합니다. 대부분의 언어에서 읽기 순서는 왼쪽에서 오른쪽으로 움직입니다. 아랍어와 히브리어 등 일부에서는 읽기 순서가 오른쪽에서 왼쪽으로 움직입니다.
탭 순서를 평가할 때는 다음 두 가지 주요 사항을 기억해야 합니다.
- DOM의 요소가 논리적 순서로 정렬되어 있나요?
- 화면 밖 콘텐츠가 탐색 메뉴에서 올바르게 숨겨져 있나요?
탐색 시 불편을 주는 갑작스러운 이동이 있는지 확인합니다.
또한 화면 밖 점프도 확인하세요. 즉, 탭하면 보이지 않는 콘텐츠로 이동합니다.
키보드 액세스 기본사항에서 자세히 알아보세요.
해결 방법
포커스 순서가 잘못된 것 같으면 DOM의 요소를 재정렬하여 탭 순서가 더 자연스럽게 표시되도록 합니다.
CSS를 사용하여 요소의 위치를 시각적으로 재배치하지 마세요. 보조 기술 사용자는 무의미한 탐색을 경험하게 됩니다.
CSS를 사용하는 대신 요소를 DOM의 이전 위치로 이동합니다.
키보드 컨트롤로 화면 밖 콘텐츠에 계속 액세스할 수 있다면 tabindex="-1"
를 사용하여 삭제하는 것이 좋습니다.
tabindex로 포커스 제어에서 자세히 알아보세요.
리소스
페이지의 시각적 순서가 DOM 순서를 따름 감사의 소스 코드
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2019-05-02(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2019-05-02(UTC)"],[],[]]