탭 순서를 손으로 고친다

목표

키보드만으로 끝까지 쓸 수 있는 화면을 씁니다. 브라우저는 없지만 **Tab 을
눌렀을 때 어디로 가는가**는 마크업만으로 계산됩니다.

왜 중요한가

키보드 접근성은 기능이 아니라 순서입니다. 무엇이 초점을 받고, 어떤 차례로
돌고, 지금 어디 있는지 보이는가. 그리고 이 셋은 마우스로 확인하면 **절대
드러나지 않습니다** — QA 도 마우스로 하기 때문에 그대로 배포됩니다.

특히 양수 tabindex 는 그 요소 하나를 옮기는 것이 아니라 페이지를 두
무리로 쪼갭니다. 양수가 붙은 것들이 먼저 전부 돌고 나머지가 그다음입니다.
tabindex="1" 하나면 그 요소가 페이지의 첫 칸이 됩니다.

만들 것

/root/work/kbd/app.html 하나입니다. 초점 표시 규칙은 문서 안의
<style> 에 씁니다.

계산기

cd /root/work/kbdpython3 /opt/lab/checks/html-kbd-lab/focus.py app.html

Tab 순서를 번호로 찍고, 양수 tabindex · aria-hidden 안의 초점 요소 ·
흉내 위젯 · 끊긴 aria-* 참조를 지적합니다.

단계

1. 건너뛰기 링크를 첫 칸에 · main 에 tabindex="-1"
2. 탭 순서 = 문서 순서 (양수 tabindex 금지)
3. 흉내 위젯을 네이티브 요소로
4. 장식은 aria-hidden, 접은 영역은 hidden
5. 펼침 단추 — aria-expanded 와 aria-controls
6. 대화 상자 — role="dialog" · 이름 · 닫힌 동안 탭 순서에서 제외
7. 초점 표시 — :focus-visible
8. 계산기 결과를 08-focus.txt 로
9. 정리 → 09-notes.md

참고

• 자바스크립트는 쓰지 않습니다. 이 실습이 보는 것은 구조입니다.
• aria-hidden="true" 는 초점을 막지 않습니다. 초점은 가는데 아무것도

읽히지 않는 상태가 가장 나쁩니다.

• 실제 화면에서는 마우스를 치우고 Tab 만으로 5분 써 보는 것이 자동 도구

열 개보다 많이 잡습니다.

단계 9개

1. 건너뛰기 링크를 첫 칸에
2. 탭 순서를 문서 순서와 맞춘다
3. 흉내 위젯을 없앤다
4. 감춘 것이 정말 감춰졌는가
5. 펼침 단추의 상태를 알린다
6. 대화 상자에 이름을 준다
7. 초점이 보이게 한다
8. 탭 순서를 남긴다
9. 무엇이 순서를 깨뜨리는가