키보드 포커스 순서 분석기

키보드 포커스 순서 분석기 사용 가이드

마우스를 쓰지 않는 사용자는 Tab 키로 링크와 버튼을 차례로 이동합니다. 순서가 뒤죽박죽이거나 클릭으로만 열리는 메뉴가 있으면 페이지를 쓸 수 없습니다. 이 분석기는 붙여 넣은 HTML에서 키보드로 이동할 수 있는 요소를 찾아 브라우저와 같은 규칙으로 Tab 순서를 계산합니다.

링크·버튼·입력칸·iframe·summary·tabindex를 가진 요소를 대상으로, 비활성(disabled)·tabindex="-1"·숨긴 요소는 빼고, tabindex가 양수인 요소를 먼저, 나머지는 문서 순서대로 늘어놓습니다. 각 요소의 이름도 함께 보여 줘 포커스가 갔을 때 무엇이라고 읽힐지 확인할 수 있습니다.

양수 tabindex(문서 순서를 깨뜨림), 이름 없이 포커스되는 요소, aria-hidden 안에 있어 포커스는 가지만 읽히지 않는 요소, tabindex="0"만 있고 역할이 없는 div를 표시합니다. onclick이나 role="button"이 있지만 키보드로 갈 수 없는 요소는 WCAG 2.1.1 위반으로 ✕ 표시합니다.

사용 방법

1. 1'검사할 HTML' 칸에 페이지나 컴포넌트 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 Tab 순서 표와 문제 목록이 나옵니다.
3. 3양수 tabindex는 0이나 제거로 바꾸고, 클릭만 되는 요소는 <button>으로 바꿉니다.
4. 4고친 HTML을 다시 넣어 순서가 화면 흐름과 맞는지 확인합니다.

<a href="/">홈</a><button tabindex="2">두 번째</button><input tabindex="1" aria-label="검색">
<button disabled>비활성</button><div onclick="openMenu()">메뉴 열기</div>

키보드로 이동하는 요소 3개 · 양수 tabindex 2개

✕ 1번 input: tabindex="1" — 양수 tabindex는 문서 순서를 무시하고 먼저 포커스됩니다. 0이나 제거를 권합니다
✕ div "메뉴 열기": 클릭은 되지만 키보드로 갈 수 없습니다(tabindex="0"과 Enter·Space 처리 필요, 2.1.1)

Tab 순서	요소	tabindex	이름
1	input	1	검색
2	button	2	두 번째
3	a	-	홈

이럴 때 쓰면 좋아요

• 모달·드롭다운 같은 컴포넌트의 키보드 접근을 점검할 때
• tabindex를 남용한 오래된 페이지를 정리할 때
• 클릭 이벤트만 있는 div 버튼을 찾을 때
• 웹 접근성 키보드 항목을 자가 진단할 때

문제가 생겼을 때

활용 팁

• tabindex는 0(순서에 포함)과 -1(스크립트로만 포커스) 두 값만 쓰는 것이 원칙입니다.
• 페이지 맨 앞의 본문 바로가기 링크는 건너뛰기 링크 검사기로 확인하세요.
• CSS로 숨긴 요소는 소스만으로 알 수 없으니 실제 화면에서 Tab을 눌러 한 번 더 확인하세요.

자주 묻는 질문