HTML — 태그 하나가 기능을 대신한다 · 의미와 접근성 · 실습
검사를 통과하는 페이지
목표
접근성 검사를 실제로 통과하는 페이지를 씁니다. 브라우저는 없지만,
마크업의 구조는 브라우저 없이도 참·거짓이 갈립니다.
만들 것
/root/work/html/index.html 하나입니다. CSS 도 자바스크립트도 필요
없습니다 — 이 실습이 보는 것은 어떤 태그를 골랐는가 입니다.
검사기
앞의 일곱 단계와 같은 규칙을 보는 검사기가 들어 있습니다.
언제든 직접 돌려 보세요.
cd /root/work/htmlpython3 /opt/lab/checks/html-lab/audit.py index.html지적마다 어느 줄의 무엇이 왜 문제인지를 알려 줍니다.
단계
1. 뼈대 · lang · viewport
2. 랜드마크 (main 은 하나)
3. h1 하나 · 단계 안 건너뛰기
4. 이미지 3개 · 장식은 alt=""
5. 폼 3칸 · 라벨 연결 · type/autocomplete
6. 링크 2개 (목적을 말하는 글자) · 동작은 button
7. 표 (caption/thead/scope)
8. 스스로 검사 → 08-audit.txt
9. 정리 → 09-notes.md
참고
이미지 파일이 실제로 없어도 됩니다. 마크업만 봅니다.
자동 검사는 문제의 30~40% 만 잡습니다. 나머지는 **마우스를 치우고
Tab 만으로 끝까지 해 보면** 대부분 드러납니다.
단계 9개
- 뼈대와 lang
- 랜드마크로 지도를 그린다
- 제목은 목차다
- alt 를 제대로 고른다
- 라벨 없는 칸은 이름이 없다
- 링크는 이동, 버튼은 동작
- 표에는 머리칸이 있다
- 스스로 검사한다
- 무엇이 공짜였는지