포커스 순서 시각화 도구
모든 웹페이지에서 키보드 탭 순서를 시각화
탭 순서란?
탭 순서는 키보드 사용자가 Tab 키를 눌러 버튼, 링크, 양식 필드 사이를 이동할 때 따르는 순서입니다. 명확하고 예측 가능한 순서는 스크린 리더 사용자와 마우스 없이 탐색하는 모든 사람에게 필수적입니다. 아래에 HTML을 붙여넣으면 포커스가 정확히 어디로 이동할지 보여주는 번호 마커가 표시됩니다.
HTML 붙여넣기
미리보기
포커스 순서 시각화 도구이란?
아무 HTML이나 붙여넣으면 키보드 탭 순서를 한눈에 파악할 수 있습니다. 각 포커스 가능한 요소에 번호 마커가 표시되어 내비게이션 문제를 즉시 발견할 수 있습니다. 접근성 감사자와 개발자의 WCAG 준수 확인용으로 설계되었습니다.
사용 방법
- HTML 코드를 에디터에 붙여넣거나 HTML 파일을 업로드하여 탭 순서를 확인하세요.
- 각 포커스 가능한 요소(링크, 버튼, 입력 필드)에 번호 마커가 표시되어 탭 순서를 보여줍니다.
- 포커스 순서 목록을 검토하고, 순서가 잘못되거나 누락된 요소를 확인한 다음, 분석 결과를 보고서로 내보내세요.
결과
접근성 컨설턴트가 고객의 회원가입 폼 HTML을 붙여넣습니다. 시각화 도구가 잘못된 tabindex 값으로 인해 '제출' 버튼이 '이용약관' 체크박스보다 먼저 포커스를 받는 것을 보여주어, WCAG 2.4.3 위반을 지적합니다.