역할·상태·속성

세 가지 구성 요소

<button type="button" aria-haspopup="menu" aria-controls="user-menu" aria-expanded="false">
  내 계정
</button>
<ul id="user-menu" role="menu" hidden>
  <li role="menuitem">로그아웃</li>
</ul>

• menu, menuitem — 역할: 메뉴와 메뉴 항목입니다.
• aria-haspopup — 속성: 메뉴를 여는 버튼이라는 성질입니다.
• aria-controls — 속성: 제어 대상과의 관계입니다.
• aria-expanded — 상태: 지금 메뉴가 닫혀 있음을 알립니다. 메뉴를 열면 true로 바뀝니다.

역할 지정의 기본 규칙

• 역할은 하나만 유효합니다. role="switch checkbox"처럼 공백으로 여러 개를 쓰면 브라우저는 앞에서부터 처음으로 인식하는 역할 하나를 씁니다(대체 역할). 일반적으로는 하나만 씁니다.
• 추상 역할은 쓸 수 없습니다. widget, landmark, input 같은 추상 역할은 분류용이며, 작성자가 지정하면 안 됩니다.
• 역할을 바꾸지 않습니다. 상황에 따라 role 값을 바꾸는 대신 다른 요소로 교체합니다.
• 일부 역할은 필수 속성이 있습니다. 예: checkbox는 aria-checked, heading은 aria-level, slider는 aria-valuenow.
• 일부 역할은 필수 상위·하위 역할이 있습니다. 예: tab은 tablist 안에, option은 listbox 안에 있어야 합니다.

<div role="tablist">
  <div role="presentation">
    <div role="tab" aria-selected="true">공지</div>
  </div>
  <a role="tab" href="#p2">자료실</a>
  <span>|</span>
</div>

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

역할 분류 체계

WAI-ARIA 1.2는 역할을 상속 관계를 가진 분류(taxonomy)로 정리합니다. 작성자가 쓸 수 있는 구체 역할은 다음 여섯 분류로 나뉘며, 이를 묶는 상위 개념으로 추상 역할이 있습니다.

separator는 포커스를 받을 수 있을 때(분할 막대처럼 값을 조절할 때)는 위젯, 그렇지 않을 때는 문서 구조 역할로 동작합니다. directory 역할은 ARIA 1.2에서 사용 중단되었으며 list를 대신 씁니다.

상태와 속성의 분류

WAI-ARIA 1.2는 상태와 속성을 쓰임새에 따라 네 가지로 나눕니다. 이 사이트의 속성 레퍼런스는 이를 조금 더 세분해 정리했습니다.

전역 속성

전역 속성(global states and properties)은 역할과 관계없이 모든 HTML 요소에 쓸 수 있는 ARIA 속성입니다. 단, generic, presentation처럼 이름을 가질 수 없는 역할에서는 aria-label과 aria-labelledby를 쓰면 안 되는 등 예외가 있습니다.

WAI-ARIA 1.3 초안에는 aria-description, aria-braillelabel, aria-brailleroledescription가 전역 속성으로 추가되어 있습니다.

값의 형식

ARIA 속성 값은 모두 문자열이지만, 명세는 값의 형식을 정해 둡니다.

<button aria-pressed="yes">굵게</button>
<div role="checkbox" aria-checked>동의</div>

<button aria-pressed="true">굵게</button>
<div role="checkbox" aria-checked="false" tabindex="0">동의</div>