시맨틱 구조와 접근성 연결
시맨틱 태그는 화면 배치용 이름이 아니라 문서 영역과 기능을 브라우저, 검색 엔진, 보조 기술에 전달하는 단서다.
| 연결 지점 | 시맨틱 구조 | 접근성 효과 | 검토 질문 |
|---|---|---|---|
| Page map | header, nav, main, footer | 큰 영역으로 빠르게 이동 | main이 한 번만 있는가 |
| Content role | article, section, aside | 정보의 독립성과 보조성 구분 | 제목이 함께 있는가 |
| Text alternative | img alt, figure caption | 시각 정보의 의미 전달 | 이미지가 장식인지 정보인지 정했는가 |
| Focus order | DOM 순서와 조작 요소 | 키보드 이동이 예측 가능 | 시각 순서와 DOM 순서가 맞는가 |
| ARIA | 부족한 설명만 보완 | 상태와 이름을 명확히 전달 | 네이티브 의미를 덮어쓰지 않는가 |
접근성은 마지막에 붙이는 장식이 아니라 HTML을 의미대로 쓰는 순간부터 생기는 구조적 품질이다.