A Page That Passes the Audit

한국어 원문으로 표시합니다.

목표

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

만들 것

/root/work/html/index.html 하나입니다. CSS 도 자바스크립트도 필요 없습니다 — 이 실습이 보는 것은 어떤 태그를 골랐는가 입니다.

검사기

앞의 일곱 단계와 같은 규칙을 보는 검사기가 들어 있습니다. 언제든 직접 돌려 보세요.

cd /root/work/html
python3 /opt/lab/checks/html-lab/audit.py index.html

지적마다 어느 줄의 무엇이 왜 문제인지를 알려 줍니다.

단계

뼈대 · lang · viewport
랜드마크 (main 은 하나)
h1 하나 · 단계 안 건너뛰기
이미지 3개 · 장식은 alt=""
폼 3칸 · 라벨 연결 · type/autocomplete
링크 2개 (목적을 말하는 글자) · 동작은 button
표 (caption/thead/scope)
스스로 검사 → 08-audit.txt
정리 → 09-notes.md

참고

이미지 파일이 실제로 없어도 됩니다. 마크업만 봅니다.

자동 검사는 문제의 30~40% 만 잡습니다. 나머지는 마우스를 치우고 Tab 만으로 끝까지 해 보면 대부분 드러납니다.

뼈대와 lang

/root/work/html/index.html 을 만드세요. <!doctype html>, <html lang="ko">, <title>, <meta charset>, <meta name="viewport"> 가 있어야 합니다.

mkdir -p /root/work/html. lang 이 없으면 스크린리더가 한국어를 영어 발음 규칙으로 읽습니다 — 한 글자 고쳐서 얻는 것 중 효과가 가장 큽니다. viewport 가 없으면 모바일에서 데스크톱 폭으로 렌더링됩니다.

랜드마크로 지도를 그린다

header · nav · main · footer 를 넣으세요. main 은 페이지에 하나뿐이어야 합니다.

<div class="main"> 은 기계에게 아무것도 알려 주지 않습니다. 스크린리더 사용자는 랜드마크 사이를 건너뛰며 읽고, main 이 있어야 '본문으로 건너뛰기'가 동작합니다.

제목은 목차다

h1 을 하나만 두고, 그 아래 h2 를 두 개 이상 쓰세요. 단계를 건너뛰면 안 됩니다(h2 다음에 h4 금지).

제목은 글자 크기가 아니라 문서의 목차입니다. 크기를 바꾸고 싶으면 CSS 로 바꾸세요 — h3 이 예뻐서 쓰는 것이 가장 흔한 접근성 문제입니다.

alt 를 제대로 고른다

이미지를 세 개 넣으세요 — 내용을 전달하는 것 두 개(의미 있는 alt), 순수 장식 하나(alt=""). 모든 img 에 alt 속성이 있어야 합니다.

속성을 아예 빼는 것과 alt="" 는 다릅니다. 빼면 스크린리더가 파일명(IMG_20240103.jpg)을 읽고, 비워 두면 조용히 건너뜁니다. 장식 이미지에는 반드시 빈 alt 를 명시하세요. 파일이 실제로 없어도 됩니다 — 마크업만 봅니다.

라벨 없는 칸은 이름이 없다

입력 칸 세 개짜리 폼을 만드세요. 각각 label(for/id 연결)이 있어야 하고, 이메일 칸은 type="email" 과 autocomplete 를 가져야 합니다. 제출은 button 으로 합니다.

placeholder 는 라벨이 아닙니다 — 입력하면 사라져서 무엇을 쓰는 칸이었는지 알 수 없게 됩니다. 라벨을 연결하면 글자를 눌러도 칸에 포커스가 갑니다(모바일에서 큰 차이). type 을 제대로 주면 모바일 키보드가 바뀝니다.

링크는 이동, 버튼은 동작

실제 주소로 가는 링크를 두 개 넣으세요. 링크 글자는 그 자체로 목적을 말해야 합니다 — '여기', '더 보기', '클릭' 은 안 됩니다. 그리고 동작하는 자리에는 a href="#" 대신 button 을 쓰세요.

스크린리더 사용자는 링크만 뽑아 목록으로 봅니다. '여기'가 스무 개 있는 목록은 쓸모가 없습니다. div onclick 도 쓰지 마세요 — Tab 으로 갈 수 없고 Enter 로 눌리지 않습니다.

표에는 머리칸이 있다

caption, thead, th scope 를 갖춘 표를 하나 넣으세요. 열 머리에는 scope="col", 행 머리에는 scope="row" 입니다.

scope 가 있어야 스크린리더가 '1월, 매출, 1200' 처럼 읽습니다. 없으면 숫자만 줄줄 읽힙니다. 레이아웃 용도로 표를 쓰면 안 됩니다 — 그건 CSS Grid 가 할 일입니다.

스스로 검사한다

/opt/lab/checks/html-lab/audit.py 를 직접 돌려 결과를 08-audit.txt 로 남기세요. 지적이 0건이어야 합니다.

python3 /opt/lab/checks/html-lab/audit.py index.html | tee 08-audit.txt. 이 검사기가 보는 규칙은 앞의 일곱 단계와 같습니다. 자동 검사가 문제의 30~40% 만 잡는다는 것도 함께 기억하세요 — 나머지는 키보드만으로 5분 써 보면 드러납니다.

무엇이 공짜였는지

09-notes.md 에 세 줄 이상. div 로 만든 버튼이 잃는 것 두 가지, alt="" 와 alt 속성 누락의 차이, 그리고 자동 검사가 못 잡는 것을 어떻게 확인하는지.

본문에 키보드, alt, 랜드마크 가 들어가야 합니다. 핵심은 하나입니다 — 접근성은 나중에 얹는 기능이 아니라 태그를 고르는 순간 대부분 결정된다.