ARIA란 무엇인가

ARIA의 정의

WAI-ARIA(Web Accessibility Initiative – Accessible Rich Internet Applications, 줄여서 ARIA)는 W3C가 만든 명세로, 웹 페이지의 요소가 무엇인지(역할), 지금 어떤 상황인지(상태), 어떤 성질을 가졌는지(속성)를 보조기술(화면낭독기, 점자정보단말기, 음성 인식 프로그램 등)에 알려 주는 HTML 속성 모음입니다.

ARIA는 크게 두 가지로 이루어집니다.

• 역할(role) — role="tablist", role="dialog"처럼 요소의 종류를 정합니다. 요소마다 하나만 지정하며, 보통 바뀌지 않습니다.
• 상태와 속성(states and properties) — aria-로 시작하는 속성입니다. aria-expanded처럼 사용자 조작에 따라 자주 바뀌는 값은 상태, aria-labelledby처럼 거의 고정된 값은 속성이라고 부릅니다.

<button type="button" aria-expanded="false" aria-controls="faq-1">
  배송은 얼마나 걸리나요?
</button>
<div id="faq-1" hidden>주문 후 2~3일 안에 도착합니다.</div>

위 코드에서 버튼의 역할(버튼)과 이름(“배송은 얼마나 걸리나요?”)은 HTML이 이미 알려 줍니다. ARIA는 HTML에 없는 정보, 즉 “이 버튼이 제어하는 영역이 지금 접혀 있다”는 사실만 보탭니다. 자세한 구분은 역할·상태·속성 문서를 참고하세요.

왜 필요한가요

HTML에는 <button>, <input type="checkbox">, <nav>처럼 의미가 정해진 요소가 많습니다. 이런 요소는 브라우저가 알아서 보조기술에 “버튼”, “체크박스”, “탐색 랜드마크”라고 알려 줍니다.

그러나 현대 웹 애플리케이션에는 HTML에 대응 요소가 없는 UI가 많습니다.

• 탭(tablist, tab, tabpanel) — HTML에는 탭 요소가 없습니다.
• 트리 메뉴(tree), 콤보박스 자동완성(combobox), 그리드(grid)
• 동적으로 바뀌는 상태 — “펼쳐짐”(aria-expanded), “선택됨”(aria-selected), “현재 페이지”(aria-current)
• 화면 갱신 알림 — 장바구니 담기 완료, 검색 결과 건수처럼 포커스와 상관없이 알려야 하는 메시지(aria-live, status)

이런 정보를 보조기술에 전달할 방법이 없으면, 눈으로 보는 사용자는 알 수 있는 내용을 화면낭독기 사용자는 알 수 없습니다. ARIA는 이 빈틈을 메우기 위해 만들어졌습니다.

<div class="tab is-active">공지</div>
<div class="tab">자료실</div>

<div role="tablist" aria-label="게시판">
  <button role="tab" aria-selected="true" aria-controls="p1" id="t1">공지</button>
  <button role="tab" aria-selected="false" aria-controls="p2" id="t2" tabindex="-1">자료실</button>
</div>

ARIA가 하는 일

ARIA는 브라우저가 만드는 접근성 트리의 정보를 추가하거나 바꿉니다. 구체적으로는 다음과 같은 일을 합니다.

ARIA가 하지 않는 일

ARIA를 처음 배울 때 가장 많이 오해하는 부분입니다. ARIA 속성은 접근성 트리에만 영향을 줄 뿐, 화면의 모양이나 요소의 동작은 전혀 바꾸지 않습니다.

• 모양을 바꾸지 않습니다. aria-hidden="true"를 붙여도 화면에서는 그대로 보입니다. aria-expanded="true"로 바꿔도 패널은 저절로 열리지 않습니다.
• 동작을 만들지 않습니다. role="button"을 붙인 <div>는 Tab 키로 포커스가 가지 않고, Enter·Space 키로 눌리지도 않습니다. 키보드 처리는 개발자가 직접 넣어야 합니다.
• 포커스를 관리하지 않습니다. role="dialog"나 aria-modal="true"를 붙여도 포커스는 대화상자로 이동하지 않습니다. 포커스 이동과 복귀는 스크립트로 처리합니다.
• 상태를 스스로 갱신하지 않습니다. 사용자가 체크박스를 눌렀다면 aria-checked 값도 스크립트로 바꿔야 합니다.

<div role="button" class="btn">저장</div>

<button type="button" class="btn">저장</button>

역사와 버전

ARIA는 2000년대 중반 Ajax 기반 웹 애플리케이션이 늘어나면서, 스크립트로 만든 위젯을 보조기술이 이해하지 못하는 문제를 풀기 위해 시작되었습니다.

관련 명세

ARIA는 단독 명세가 아니라 여러 명세가 함께 동작하는 묶음입니다. 실무에서 자주 참고하는 명세는 다음과 같습니다.

“AAM”은 Accessibility API Mappings의 줄임말입니다. 작성자는 주로 WAI-ARIA, APG, ARIA in HTML을 보고, 브라우저가 특정 요소를 어떻게 노출하는지 궁금할 때 AAM 명세를 확인합니다.

ARIA와 WCAG의 관계

WCAG(웹 콘텐츠 접근성 지침)는 “무엇을 달성해야 하는가”를 정한 기준이고, ARIA는 그 기준을 달성하는 기술 수단 중 하나입니다. 예를 들어 WCAG 4.1.2 이름, 역할, 값은 모든 UI 구성 요소의 이름과 역할을 프로그램이 알 수 있어야 한다고 요구합니다. 네이티브 HTML로 충족할 수 있다면 ARIA는 필요 없고, 직접 만든 위젯이라면 ARIA로 충족합니다.

국내 기준인 KWCAG도 같은 원칙을 따르며, “웹 애플리케이션 접근성 준수” 항목에서 같은 내용을 요구합니다.