ARIA 속성 가이드
Accessible Rich Internet Applications — 시맨틱 HTML만으로 표현할 수 없는 UI 상태·역할·관계를 보조 기술에 전달하는 표준.
ARIA 사용 3원칙
HTML 우선
시맨틱 HTML로 표현 가능하면 ARIA를 쓰지 않는다. <button>이 role="button"보다 낫다.
네이티브 의미 변경 금지
<h1 role="button">처럼 기본 의미를 덮어쓰지 않는다.
인터랙티브 요소는 키보드 지원 필수
role을 추가했다면 그에 맞는 키보드 동작(Enter, Space, Arrow 등)도 반드시 구현한다.
역할 (role)
Landmark roles
banner페이지 상단 헤더 영역. <header>와 동일.
navigation내비게이션 링크 그룹. <nav>와 동일.
main페이지의 주요 콘텐츠. <main>과 동일.
complementary보조 콘텐츠 (사이드바 등). <aside>와 동일.
contentinfo페이지 하단 푸터. <footer>와 동일.
region특정 이름이 붙은 섹션. aria-label과 함께 사용.
Widget roles
dialog모달 대화상자. aria-modal="true" + 포커스 트랩 필수.
tablist / tab / tabpanel탭 UI 구성. 3개 role이 세트.
combobox검색 + 드롭다운 조합. aria-expanded, aria-controls 필요.
listbox / option선택 목록. <select> 커스텀 구현 시 사용.
alert즉시 읽어야 할 메시지. 자동으로 aria-live="assertive" 동작.
status비긴급 상태 메시지. aria-live="polite" 동작.
상태 및 속성 (aria-*)
States
aria-expanded요소가 펼쳐진 상태인지 표시. 아코디언, 드롭다운에 사용.
aria-checked체크 상태 표시. true / false / mixed 값.
aria-disabled비활성 상태 표시. disabled와 달리 포커스는 유지.
aria-selected선택된 상태 표시. 탭, 리스트박스 옵션에 사용.
aria-pressed토글 버튼의 눌린 상태 표시.
aria-hidden보조 기술에서 완전히 숨김. 장식용 요소에 사용.
Relations
aria-label요소에 직접 접근 가능한 이름 제공. 텍스트가 없는 버튼 등에 사용.
aria-labelledby다른 요소의 ID를 참조하여 이름 제공. 텍스트가 화면에 이미 있을 때 우선.
aria-describedby추가 설명 텍스트 연결. 입력 필드 오류 메시지, 힌트 텍스트에 사용.
aria-controls이 요소가 제어하는 대상 ID 참조. 탭→패널, 버튼→드롭다운.
aria-ownsDOM 구조상 부모-자식 관계가 아닌 논리적 소유 관계 표현.
라이브 영역 (aria-live)
aria-live="polite"현재 읽는 내용이 끝난 후 변경 내용을 읽어준다. 검색 결과 카운트, 성공 메시지 등.
aria-live="assertive"즉시 끊고 변경 내용을 읽어준다. 오류 메시지 등 긴급한 알림에만 사용.
aria-atomic="true"영역 내 변경 시 전체 내용을 다시 읽는다. 부분 업데이트보다 전체 맥락이 필요할 때.
aria-relevant어떤 변경(additions/removals/text)을 알릴지 지정. 기본값은 additions text.