[S3U5]WAI-ARIA

WAI-ARIA

WAI-ARIA이란

• WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
• ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
  • RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있으면서 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

=> 즉, WAI-ARIA이란 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격이다.

WAI-ARIA의 필요성

WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 따라서 보조적으로 사용하면, 웹 접근성을 향상시킬 수 있다.

WAI-ARIA 사용법

WAI-ARIA는 HTML 태그 내부에 속성을 추가함으로써 의미를 부여해준다.

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

역할(role)

• HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있다.
  <div role="button">div이지만 button으로 사용되는 요소</div> div이지만 버튼역할 명시
• HTML요소로 역할을 파악할 수 있다면 굳이 또 명시해줄 필요는 없다.
  <button role="button">button인 요소</button> 이렇게 작성하면 안됨
• 시멘틱 요소의 본연의 의미를 바꾸면 안된다.
  <h1 role="button">h1인 요소</h1> h1은 시멘틱 요소이므로 본래 목적에 맞게 사용해야함
  

만약 탭을 html로 작성한다면 각 요소가 탭에서 어떤 역할을 하는지 표시하기

<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>

상태(state)

• aria-selected: 예를 들어 탭에서 어떤 요소가 선택되었는지 true false로 표시
• aria-checked: 예를 들어 체크박스가 선택되었는지 true false로 표시
• aria-expanded: 예를 들어 아코디언이 펼쳐진 상태인지 true false로 표시
• aria-hidden: 예를 들어 별 기능없는 장식용 이미지나 아이콘 true false로 표시(true 표시해도 실제로는 보임)

속성(property)

• aria-label: 구조만으로 역할 파악이 어려울 때 요소에 라벨을 붙여주는 의미를 부여해준다.
  <button aria-label="닫기"/> <img src="X.png" /> </button> 닫기 역할을 하는 x모양 이미지 요소인 경우
• aria-live: 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표지
  • polite: 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달. 예를 들어 버튼을 누르면 수량이 증가하는 경우 갱신된 수량 다시 알려 줘야함
  • assertive: 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달. 예를 들어 경고창이 나타난 경우 즉시 내용을 전달해야함

WAI-ARIA의 다양한 속성의 종류

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