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