ARIA, 2008년 W3C, 동적 콘텐츠를 스크린리더에 알리기

한 줄로

Accessible Rich Internet Applications입니다. 자바스크립트로 동적으로 바뀌는 웹을 스크린리더가 이해할 수 있게 만든 표준입니다.

어디서 왔나

2000년대 초, 웹은 정적 문서에서 동적 애플리케이션으로 변했습니다. Ajax(2005년 명명)가 등장하면서 페이지 새로고침 없이 콘텐츠가 바뀌었습니다. Gmail, Google Maps, Facebook이 대표 사례입니다.

문제는 스크린리더가 이 변화를 못 따라갔다는 점입니다. 정적 HTML만 읽도록 만들어졌으니까요. 모달이 열렸는데 스크린리더 사용자는 모릅니다. 알림이 떴는데 들리지 않습니다. 탭이 활성화됐는데 표시 안 됩니다.

W3C가 2008년 WAI-ARIA 1.0을 발표했습니다 (정식 권고는 2014). 이건 HTML에 새 속성들을 추가해 의미를 명시적으로 전달하는 시스템입니다.

핵심 속성

• role: 요소의 역할. <div role="button">은 div이지만 버튼처럼 동작함을 알립니다.
• aria-label: 요소의 이름 (시각적 라벨이 없을 때).
• aria-labelledby: 다른 요소를 라벨로 참조.
• aria-describedby: 추가 설명을 참조.
• aria-live: 동적으로 바뀌는 영역 (polite / assertive).
• aria-expanded: 펼침/접힘 상태.
• aria-hidden: 스크린리더에서 숨김.

예시

<button
  aria-label="메뉴 열기"
  aria-expanded="false"
  aria-controls="main-menu">
  ☰
</button>

이 코드는 햄버거 아이콘만 보이는 버튼인데, 스크린리더 사용자에게는 "메뉴 열기, 버튼, 닫혀 있음"으로 읽힙니다.

ARIA의 첫 규칙

W3C가 명시한 "No ARIA is better than bad ARIA" (잘못된 ARIA보다 ARIA 없는 게 낫다)입니다. 그리고 "네이티브 HTML 요소를 쓸 수 있으면 그것을 써라"입니다. <button>이 <div role="button">보다 항상 낫습니다.

ARIA는 네이티브 요소로 풀 수 없는 패턴(탭, 모달, 캐러셀, 콤보박스)에만 써야 합니다.

바이브 메이커가 챙길 한 가지

본인 UI에서 이미지 버튼(아이콘만 있는 버튼)에 aria-label을 안 붙이는 게 가장 흔한 접근성 실수입니다. 햄버거 메뉴, X 닫기 버튼, 화살표, 모두 aria-label 필요합니다.

관련

WCAG · a11y · Screen reader