탭 포커스 점검
HTML을 붙여넣으면 예상 Tab 이동 순서를 화면 위에 번호로 보여줍니다. KWCAG 6.1.1 키보드 사용 보장, 6.1.2 초점 이동과 표시를 점검합니다.
이 기능은 키보드가 있는 PC에서 쓰도록 만들었습니다. 모바일에서는 번호 표시만 참고하세요.
예상 Tab 순서
아래 번호는 코드로 계산한 예상 순서이며, 실제 이동 기록이 아닙니다. 미리보기 안을 한 번 클릭한 뒤 Tab·Shift+Tab을 직접 눌러 확인하세요. JavaScript로 붙인 클릭 이벤트(addEventListener, React onClick)나 이동 중 화면이 바뀌는 경우는 놓칠 수 있습니다.
번호 표시는 미리보기 안에서 Esc로도 끌 수 있습니다. 파란 번호는 정상 순서, 빨간 번호는 양수 tabindex입니다.
확인할 문제
이 도구가 검사하는 것
- tabindex, 숨김, 비활성, inert, 닫힌 details, 라디오 묶음을 반영한 예상 Tab 순서
- 양수 tabindex 위반
- onclick·role="button"이 있지만 Tab으로 갈 수 없는 요소 확인 필요
- 초점을 받아도 모양이 바뀌지 않는 요소 확인 필요
이 도구가 못 하는 것
- 실제 Tab 이동 기록 (직접 눌러 확인하세요)
- JavaScript로 열리는 메뉴·모달의 초점 가두기와 복귀
- 키보드 함정, Shadow DOM, 오른쪽→왼쪽 레이아웃
- 고정 헤더 등에 초점이 가려지는 문제 국제 권장
자주 묻는 질문
표시되는 번호가 실제 Tab 이동 순서인가요?
아닙니다. 코드로 계산한 "예상" 순서입니다. tabindex, 숨김(display:none, visibility:hidden), 비활성(disabled), inert, 라디오 묶음을 반영하지만 JavaScript로 바뀌는 화면이나 Shadow DOM은 반영하지 못합니다. 미리보기 안을 클릭한 뒤 Tab·Shift+Tab을 직접 눌러 확인하세요.
tabindex는 어떻게 써야 하나요?
tabindex="0"은 원래 초점을 받지 않는 요소를 Tab 순서에 넣고, tabindex="-1"은 Tab 순서에서 빼되 스크립트로 초점을 줄 수 있게 합니다. tabindex="1" 이상(양수)은 화면 흐름과 다른 순서를 만들기 때문에 쓰지 않는 것이 좋습니다.
포커스 표시가 없다고 나오는데 실제로는 보입니다.
:focus-visible처럼 실제 키보드로 이동할 때만 나타나는 스타일은 프로그램으로 확인하면 틀릴 수 있습니다. 그래서 이 항목은 "확인 필요"로만 표시합니다. 직접 Tab을 눌러 확인하세요.