포커스 순서 시각화 도구이란?
아무 HTML이나 붙여넣으면 키보드 탭 순서를 한눈에 파악할 수 있습니다. 각 포커스 가능한 요소에 번호 마커가 표시되어 내비게이션 문제를 즉시 발견할 수 있습니다. 접근성 감사자와 개발자의 WCAG 준수 확인용으로 설계되었습니다.
시각화 도구는 링크, 버튼, 입력 필드, 텍스트 영역, select 메뉴, details/summary 펼침 위젯, contenteditable 영역, tabindex가 명시된 요소를 모두 감지합니다. 각 포커스 가능 요소에 번호 배지가 붙고, 위치가 DOM 순서(자연)에서 왔는지 tabindex 값으로 덮어쓴 것(사용자 지정)인지 표시됩니다. 또한 페이지를 100점 만점으로 채점하고, 접근 가능한 이름이 없는 컨트롤(아이콘만 있는 버튼 문제)을 표시하며, Tab으로 전혀 도달할 수 없는 상호작용 요소가 몇 개인지 보여줍니다. 결과는 일반 텍스트 보고서 또는 감사 기록과 버그 추적용 구조화 CSV로 내보낼 수 있습니다.
사용 방법
- HTML 코드를 에디터에 붙여넣거나 HTML 파일을 업로드하여 탭 순서를 확인하세요.
- 각 포커스 가능한 요소(링크, 버튼, 입력 필드)에 번호 마커가 표시되어 탭 순서를 보여줍니다.
- 접근성 점수와 문제 패널을 확인하고, 순서가 어긋나거나 이름이 없거나 키보드로 도달할 수 없는 요소를 고친 다음, 결과를 텍스트 보고서나 CSV로 내보내세요.
사용 시기
- WCAG 2.1 AA 인증 제출 전 사전 점검 용도.
- 레이아웃이나 컴포넌트 리팩토링 이후 탭 순서 회귀 추적.
- 모달이나 오프캔버스 메뉴가 포커스를 제대로 가두는지 검증.
결과
접근성 컨설턴트가 고객의 회원가입 폼 HTML을 붙여넣습니다. 양수 tabindex가 순서를 바꿔 놓아서 '제출' 버튼이 '이용약관' 체크박스보다 먼저 포커스를 받는 것을 시각화 도구가 잡아냅니다. 이것은 WCAG 2.4.3 위반입니다.
자주 묻는 질문
- 양수 tabindex 사용은 항상 잘못된 건가요?
- 거의 항상 그렇습니다. 양수 tabindex(1, 2, 3…)는 요소를 DOM 순서에서 빼내 사용자가 페이지를 예측 불가능하게 건너뛰게 만듭니다. 비대화형 요소를 포커스 가능하게 하려면 tabindex="0"을, 프로그래밍 포커스는 유지하면서 탭 순서에서 제외하려면 tabindex="-1"을 쓰세요.
- 목록에서 '자연'과 '사용자 지정'은 무슨 뜻인가요?
- 자연은 요소의 탭 위치가 HTML 소스 내 위치에서 자연스럽게 결정됐다는 뜻입니다. 사용자 지정은 양수 tabindex가 다른 자리로 강제 이동시켰음을 의미합니다. 사용자 지정 위치는 WCAG 2.4.3 실패의 가장 흔한 원인이라 별도 표시됩니다.
- 숨겨진 요소가 포커스 순서에 나타나나요?
- display:none이나 visibility:hidden으로 실제 숨겨졌다면 브라우저가 건너뛰고, 시각화 도구도 마찬가지입니다. 다만 aria-hidden만으로는 포커스 가능성이 사라지지 않으며, 이게 흔한 버그입니다. 목록에 표시되며 사각형 데이터로 보이는지 확인할 수 있습니다.
- 모달의 포커스 트랩 누락을 잡아낼 수 있나요?
- 순서를 보여줄 뿐 포커스가 모달을 빠져나가는지는 알려주지 않습니다. 모달이 열린 상태의 HTML을 붙여 첫 번째와 마지막 포커스 가능 요소가 대화상자 안에 있는지 확인하세요. 순서가 body 콘텐츠로 튀면 트랩이 빠진 겁니다.
- 포커스 가능할 거라 예상한 요소가 목록에 없는 이유는?
- 비활성화된 input, href 없는 anchor, tabindex 없는 div는 브라우저 자체가 포커스하지 못해 제외됩니다. div를 도달 가능하게 하려면 tabindex="0"을 추가하고, anchor에는 href를 넣고, input의 disabled 속성을 제거하세요.