21장 semantic HTML과 접근성을 디자인 재료로 쓴다

접근성은 완성된 화면에 붙이는 검사표가 아니다. 구조를 제대로 고르는 순간 시각 디자인도 단단해진다. Onda의 상단은 header, 주요 이동은 이름이 있는 nav, 본문은 main, 각 수업은 article, 예약창은 dialog다. 제목 단계가 문서의 개요를 만들고, button은 행동을, a는 이동을 맡는다. 클릭이 된다는 이유로 div에 역할을 흉내 내지 않는다.

먼저 mouse를 치우고 다음 여정을 끝까지 진행한다.

1. Tab을 눌러 “본문으로 건너뛰기”를 보이게 한다.
2. 수업 section까지 이동하고 “자리 확인”을 연다.
3. dialog 안에서 날짜를 바꾸고 이름을 입력한다.
4. 닫은 뒤 focus가 열었던 button으로 돌아오는지 확인한다.
5. Shift+Tab, Escape, 200% zoom에서도 같은 task를 수행한다.

Onda는 native <dialog>를 사용한다. native element가 모든 문제를 자동 해결하지는 않지만 modal focus, top layer, Escape 동작의 더 나은 출발점이다. 열기 button마다 선택한 수업 이름을 dialog 제목 아래에 반영하고, 결과 문장은 aria-live="polite"인 output에 넣는다. 입력 오류가 생기면 message만 표시하지 않고 잘못된 field로 focus를 옮긴다.

<label class="name">
  예약자 이름
  <input required name="name" autocomplete="name">
</label>
<output id="booking-result" aria-live="polite"></output>

alt text는 image prompt의 축약본이 아니다. 같은 사진도 상품 page에서는 그릇의 형태를, 작업실 소개에서는 만드는 과정을 설명한다. 장식 image는 빈 alt, 정보 image는 현재 맥락에서 잃게 되는 정보를 쓴다. 사진에 없는 감정이나 SEO keyword를 덧붙이지 않는다.

WCAG 2.2 AA를 최소선으로 삼되 숫자 통과를 사용자 경험과 혼동하지 않는다. Onda 검수표에는 다음이 포함된다.

• text·control·focus의 식별 가능한 contrast
• 320 CSS px 너비와 200% zoom에서 양방향 scroll 없음
• keyboard focus 순서와 가시성
• label, error, status의 programmatic association
• touch target과 target 사이 간격
• motion을 줄이려는 사용자의 설정 존중
• heading·landmark·link text만 읽어도 이해되는 구조

AI에는 “접근성을 개선해” 대신 task와 판정을 준다.

예약 dialog를 keyboard만으로 완료하라. focus 순서를 표로 기록하고,
열기 전·열린 뒤·validation 실패 뒤·닫힌 뒤의 focus element를 제시하라.
semantic element를 CSS 때문에 바꾸지 말고 WCAG 2.2 AA 실패는
criterion, 위치, 재현 step, 수정안으로 보고하라.

자동 검사는 빠른 guardrail이지만 이름이 자연스러운지, 읽는 순서가 맞는지, 오류 뒤 회복할 수 있는지는 사람이 task로 확인한다.