웹 접근성(a11y) 실전 가이드 — ARIA와 시맨틱 HTML

시맨틱 HTML이 우선

ARIA보다 시맨틱 HTML 태그를 먼저 사용하세요. 대부분의 접근성은 올바른 태그 선택으로 해결됩니다.

<!-- 나쁜 예 -->
<div role="button" tabindex="0" onclick="...">클릭</div>

<!-- 좋은 예 -->
<button onclick="...">클릭</button>

필수 ARIA 패턴

<!-- 라이브 영역 -->
<div aria-live="polite">{알림 메시지}</div>

<!-- 모달 -->
<dialog aria-labelledby="title" aria-modal="true">
  <h2 id="title">제목</h2>
</dialog>

axe-core, Lighthouse로 자동 검사를 CI에 포함하세요.