사용 목적

웹 접근성을 갖추기 위한 기술. 스크린 리더기가 웹 콘텐츠를 더 잘 읽을 수 있도록 도와준다. 도와주는 역할이므로 다른 HTML attribute와 같이 element의 기능이나 행동은 제어하지 않는다.

WRI-ARIA Roles, States, Properties

WRI-ARIA Roles

HTML 요소와 역할이 맞지 않을 때 role을 직접 정의한다. 혹은 역할에 맞는 HTML 요소가 존재하지 않을 때 명시적으로 알려주기 위해 사용한다.

기본적으로 semantic elements들은 role을 가진다. 예를 들어 <input type='radio'>의 경우에 radio가 role이다. 반면에 <div>나 <span>과 같은 non sematic element에는 role이 제공되지 않는다. 이 경우에 role=''이 사용된다고 보면 된다.

<!-- 버튼으로 사용 -->
<div role='button'> 버튼</div>

<!-- 탭으로 사용 -->
<button role='tab'>탭1</button>

WAI-ARIA States & Properties

접근성 트리에서 element의 상태와 속성을 변경할 수 있게 끔 도와준다. 앞에서도 언급했지만 일반적인 HTML attribute와 다르게 element의 실제 기능이나 동작엔 영향을 미치지 않는다.

특정 role과 함께 사용되거나 대부분의 element에서 공통적으로 사용되는 것이 있다.

<!-- role='tab'은 aria-controls와 aria-selected와 함께 사용된다. -->
<button role="tab" aria-selected="true" aria-controls="tabpanel-1" id="tab-id">
  Tab label
</button>
<div role="tabpanel" id="tabpanel-1"> Tab Panel </div>

사용시 주의할 점

되도록이면 native HTML 혹은 semantic attribute를 사용하자.

WAI-ARIA는 HTML에 추가적인 의미를 부여하는 것이기 때문에 시멘틱 요소만으로 의미가 충분하지 않을 경우에만 사용하는 것을 권장한다.

<!-- 잘못된 예시 -->
<button role="button">button인 요소</button>

<!-- list, listitem 보다는 ol, ul, li를 사용하자 -->
<!-- 지양 -->
<div role="list">
  <div role="listitem">List item 1</div>
  <div role="listitem">List item 2</div>
  <div role="listitem">List item 3</div>
</div>
<!-- 권장 -->
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

semantic 본연의 의미를 변경해서는 안된다.

<!-- 잘못된 예시 -->
<h1 role="tab">h1인 요소</h1>
<!-- 올바른 예시 -->
<div role='tab'><h1>탭</h1></div>