화면이 브라우저에서 똑같이 보인다고 HTML 구조까지 같은 것은 아니다. div만으로 만든 화면은 CSS를 붙이기에는 편하지만, 보조 기술과 다음 작업자가 이 영역이 메뉴인지 본문인지 추측해야 한다.
태그 이름이 화면의 역할을 설명한다
일반적인 문서 화면은 다음처럼 나눌 수 있다.
<header>
<nav aria-label="주 메뉴">...</nav>
</header>
<main>
<article>
<h1>글 제목</h1>
<p>본문</p>
</article>
</main>
<footer>...</footer>header, nav, main, article, footer는 화면의 역할을 전달한다. 스크린 리더 사용자는 랜드마크를 기준으로 주요 영역을 이동할 수 있고, 코드 리뷰에서도 main이 여러 개인지처럼 구조 오류를 찾기 쉬워진다.
위 예제에서 메뉴 항목이 실제 이동이라면 <nav> 안에 <a href="/posts">글 목록</a>를, 글 안에서 동작을 실행한다면 <button type="button">공유</button>을 넣어 보자. 키보드 Tab으로 둘 다 찾아갈 수 있고, Enter로 링크를 열거나 버튼을 실행할 수 있어야 한다. 버튼은 Space 키로도 실행된다. 보조 기술의 랜드마크 목록에서 nav와 main이 구분되는지도 확인하면, 모양만 같은 div로 만든 화면과 차이를 알 수 있다.
제목 순서는 스타일이 아니라 문서 구조다
h1부터 h2, h3으로 내려가는 제목 계층은 목차의 뼈대다. 글자 크기를 바꾸려고 제목 단계를 건너뛰거나, 평범한 문장을 굵게 보이게 하려고 h2를 쓰면 보조 기술의 문서 탐색이 흐트러진다. 크기는 CSS로, 의미는 HTML 태그로 정하는 편이 안전하다.
시맨틱 태그가 모든 접근성을 대신하지는 않는다
버튼처럼 동작하는 요소에는 실제 <button>을 써야 키보드 동작과 상태가 자연스럽게 따라온다. 링크 이동은 <a href>가 맡는다. div에 클릭 이벤트를 붙이는 방식은 포커스, Enter·Space 키, 비활성 상태를 모두 직접 구현해야 해 빠뜨리기 쉽다.
이미지에는 내용에 맞는 alt도 필요하다. 장식 이미지라면 빈 alt=""로 읽기 대상에서 제외하고, 정보를 전달한다면 이미지가 말하는 핵심을 짧게 적는다. 파일명은 대체 텍스트가 아니다.
폼도 태그 이름만 바꿔서는 충분하지 않다. 입력칸에 보이는 문구가 있어도 해당 입력의 이름이 보조 기술에 전달되는지 확인해야 한다.
<label for="search">글 검색</label>
<input id="search" name="q" type="search">레이블의 글자를 눌렀을 때 입력칸에 초점이 이동하는지 확인해 보자. for와 id가 다르면 두 요소의 연결이 끊긴다. 제목·랜드마크·폼 이름은 서로 다른 역할이므로 시맨틱 태그 몇 개만 넣고 접근성 검사를 끝냈다고 생각하지 않는 편이 좋다.
핵심 요약
시맨틱 HTML은 화면의 역할을 브라우저·보조 기술·동료에게 함께 전달한다. 랜드마크와 제목 계층을 먼저 잡고, 클릭 동작에는 링크와 버튼을 각각 사용하자. CSS로 보이는 모양과 HTML이 설명하는 의미를 분리하면 유지보수와 접근성이 함께 좋아진다.
