이름 없는 칸을 없앤다

목표

가입 폼을 하나 쓰고, 모든 칸에 접근 가능한 이름이 실제로 계산되는지를
확인합니다. 브라우저는 없지만 이름 계산은 마크업만으로 답이 하나입니다.

왜 중요한가

"label 을 썼는가" 는 눈으로 셀 수 있지만, 그것으로는 for 와 id 가
어긋난 칸을 못 잡습니다. 기계가 보는 것은 글자가 아니라 계산 결과이고,
그 계산에는 정해진 순서가 있습니다 — aria-labelledby → aria-label →
label → title → placeholder.

앞 단계가 값을 내면 뒤는 보지 않습니다. 그래서 aria-label 하나가 눈에
보이는 label 을 통째로 덮어쓰고, 화면에 적힌 글자와 음성이 갈라집니다.
말로 조작하는 사용자는 보이는 글자를 부르므로 그 순간 조작이 안 됩니다.

만들 것

/root/work/forms/signup.html 하나입니다. CSS 도 자바스크립트도 필요
없습니다 — 이 실습이 보는 것은 연결이 성립하는가 입니다.

계산기

cd /root/work/formspython3 /opt/lab/checks/html-form-lab/accname.py signup.html

칸마다 이름과 그 이름이 어디에서 나왔는지를 보여 줍니다. 끊긴
aria-labelledby 와 aria-describedby 도 함께 찍습니다.

단계

1. 문서 뼈대와 form · 제출 버튼
2. 칸 세 개 · 이름이 label 에서 나오게
3. 라디오 묶음 · fieldset 과 legend
4. 규칙 안내를 aria-describedby 로
5. 오류 상태 — aria-invalid 와 role="alert"
6. type 과 autocomplete
7. 필수 표시 — 눈으로도, 프로그램으로도
8. 계산기 결과를 08-names.txt 로
9. 정리 → 09-notes.md

참고

• 폼을 보내는 곳은 실제로 없어도 됩니다. 마크업만 봅니다.
• id 가 겹치면 연결이 전부 첫 번째 요소로만 갑니다. 채점기가 먼저 막습니다.
• 자동 검사는 문제의 일부만 잡습니다. 나머지는 **마우스를 치우고 Tab 만으로

폼을 끝까지 채워 보면** 대부분 드러납니다.

단계 9개

1. 폼 한 벌을 세운다
2. 이름이 어디에서 나오는가
3. 묶음에는 묶음의 이름이 있다
4. 규칙은 이름이 아니라 설명이다
5. 오류를 프로그램이 읽게 한다
6. 타자 수도 접근성이다
7. 필수는 눈으로도 보여야 한다
8. 계산기로 확인한다
9. 무엇이 연결이고 무엇이 글자인가