WAI-ARIA

WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격으로,
웹 접근성 향상시키는 방법 중의 하나.

• WAI (Web Accessibility Initiative)
  : 웹 표준 정하는 W3C에서 웹 접근성을 담당하는 기관
  
  
• ARIA (Accessible Rich Internet Applications)
  : 장애가 있는 사람들의 웹 접근성 갖추기 위한 기술
  • RIA (Rich Internet Applications)
    : 프로그램을 설치하지 않아도 웹 브라우저로 사용 가능한 편리성 + 프로그램 직접 설치한 것처럼 빠른 반응 UI를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

필요성

시맨틱 요소만으로도 웹 접근성을 향상시킬 수 있다. 하지만 시맨틱 요소만으로 의미가 불충분할때 WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 된다. 따라서 밑의 상황에서 효과적이다.

1. 시맨틱 요소만으로 의미가 불출분할 때
   HTML 요소에 추가적인 의미를 부여한다.

• 시맨틱 요소만으로 의미가 충분하다면, WAI-ARIA가 필요없다
  WAI-ARIA 남용하면 안되고, 보조적인 역할로만 사용해야 한다.
  시맨틱한 HTML을 작성하는 것이 최우선이다.

2. SPA처럼 AJAX를 사용하는 상황
   새로고침 없이 내용이 바뀌는 상황에서도 변경 부분의 정보를 전달해 동적인 콘텐츠에서도 웹 접근성 향상 가능

사용법

HTML 태그 속성을 추가해 의미를 부여.

• 역할(role) : HTML 요소의 역할을 정의하는 속성
• 상태(state) : 요소의 현재 상태를 나타내는 속성
• 속성(property) : 요소의 특징을 정의하는 속성(attribute)

1. 역할(role)

• role
  태그와 역할이 맞지 않을때 역할 명시하는 속성 사용

  <div role="button">div이지만 button으로 사용되는 요소</div>
  // ex) tab 컴포넌트
  <div role="tabList">
  <li role="tab">Tab1</li>
  <li role="tab">Tab2</li>
  <li role="tab">Tab3</li>
  </div>
  
  <div role="tabpanel">Tab menu ONE</div>
  <div role="tabpanel">Tab menu TWO</div>
  <div role="tabpanel">Tab menu THREE</div>

2. 상태(State)

• aria-selected
  여러 요소 중 선택 상태인 요소를 표시하는 속성

<div role="tabList">
  <li role="tab" aria-selected="true">Tab1</li> // 선택됨
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</div>

<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>

• aria-expanded : 아코디언 UI가 펼쳐진 상태인지를 표시
• aria-hidden: 요소가 숨김 상태인지를 표시
  
  
  

3. 속성(Property)

• aria-label
  요소의 정보 얻을 수 없는 경우(이미지로 만든 버튼), 요소에 라벨붙여주는 기능

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

• aria-live
  실시간 갱신 영역인지 표시
  alert, modal, dialog 요소거나 ajax로 실시간 갱신하는 영역에 표시
  • 속성값
    polite
    : 스크린 리더가 현재 내용을 모두 읽고나서 갱신 내용을 사용자에게 전달
    assertive
    : 스크린 리더가 현재 읽던 내용을 중단하고 갱신 내용을 바로 사용자에게 전달

Using ARIA: Roles, states, and properties - MDN
ARIA in HTML - W3C