LabHub

HTML — 태그 하나가 기능을 대신한다 · 의미와 접근성 · 실습

검사를 통과하는 페이지

LabHub 에서 이어서 보기

목표

접근성 검사를 실제로 통과하는 페이지를 씁니다. 브라우저는 없지만,
마크업의 구조는 브라우저 없이도 참·거짓이 갈립니다.

만들 것

/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개

  1. 뼈대와 lang
  2. 랜드마크로 지도를 그린다
  3. 제목은 목차다
  4. alt 를 제대로 고른다
  5. 라벨 없는 칸은 이름이 없다
  6. 링크는 이동, 버튼은 동작
  7. 표에는 머리칸이 있다
  8. 스스로 검사한다
  9. 무엇이 공짜였는지