[UFA]WAI-ARIA

WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA (Accessible Rich Internet Applications) : 웹 접근성을 갖추기 위한 기술

RIA (Rich Internet Applications) : 웹 브라우저를 통해 사용할 수 있는 편리성과 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션

WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격

---

WAI-ARIA 필요성

• HTML 요소에 추가적으로 의미를 부여
• 동적인 콘텐츠에서도 웹 접근성을 향상

---

WAI-ARIA 사용법

• 역할(role) - 역할을 정의하는 속성
• 상태(state) - 상태를 나타내는 속성
• 속성(property) - 특징을 정의하는 속성(attribute)

---

1. 역할(Role)

   요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시

   <div role="button">Role</div>
   

2. 상태(State)

   <div role="tabs">
     <li role="tab" aria-selected="true">Tab1</li>
     <li role="tab" aria-selected="false">Tab2</li>
   </div>
   

   • aria-selected - 선택된 상태
   • aria-expanded - 아코디언 UI가 펼쳐진 상태
   • aria-hidden - 숨김 상태

3. 속성(Property)

   요소에 대한 정보를 전혀 얻을 수 없는 경우

   • aria-label - 요소에 라벨을 붙여주는 기능

   <button aria-label="닫기"><img src="닫기.png" /></button>
   

   • aria-live - 실시간으로 내용을 갱신하는 영역인지 표시
   • alert, modal, dialog의 역할이거나 AJAX로 실시간으로 내용을 갱신하는 영역
   • polite - 현재 읽고있는 내용을 모두 읽고 갱신된 내용을 전달
   • assertive - 내용을 중단하고 갱신된 내용을 바로 전달
   • off(default)

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

https://www.w3.org/TR/html-aria/