WAI-ARIA

WAI-ARIA는 WAI와 ARIA를 합친 단어이다.

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

📺 필요성

• 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.

  • WAI-ARIA는 보조적인 역할로만 사용해야 하며, 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다.

• SPA처럼 AJAX를 사용하는 상황(즉, 새로고침 없이 페이지의 내용이 바뀌는 상황)에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.

📺 사용법

HTML 태그 내부에 다음 3가지 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다.

• 역할(role) : HTML 요소의 역할을 정의하는 속성
  • role
• 상태(state) : 요소의 현재 상태를 나타내는 속성
  • aria-selected, aria-expanded, aria-hidden
• 속성(property) : 요소의 특징을 정의하는 속성(attribute)
  • aria-label, aria-live

📌 role = "역할"

HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 수 있다.

<div role="button">div이지만 button으로 사용되는 요소</div>

<!-- WAI-ARIA의 잘못된 사용 예시 ①: 시멘틱 요소만으로 파악할 수 있을 때 중복할 필요X-->
<button role="button">button인 요소</button>

<!-- 잘못된 사용 예시 ②: 시맨틱 요소 본연의 의미를 임의로 바꾸면 X-->
<h1 role="button">h1인 요소</h1>

<!--WAI-ARIA의 role 속성의 좋은 예시: 탭 컴포넌트 설명-->
<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>

📌 aria-selected / aria-expanded / aria-hidden ="상태"

aria-selected

여러 개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할 수 있는 속성이다.

<!-- 3개의 탭 중에서 첫 번째 탭이 선택된 상태-->
<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

요소가 숨김 상태인지를 표시할 수 있는 속성이다.

📌 aria-label / aria-live = "속성"

aria-label

텍스트 콘텐츠 없이 이미지로만 만들어진 버튼과 같이, 요소에 대한 정보를 전혀 얻을 수 없는 경우 요소에 라벨을 붙여 의미를 부여해줄 수 있다.

<!--이미지로 된 버튼에 aria-label로 의미 부여 -->
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

aria-live = polite / assertive / off(default)

해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시한다. 즉, 브라우징 도중에 내용을 띄우는 alert, modal, dialog 와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성이다.
시각 장애인들은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 갱신되는 내용을 알려주면 큰 도움이 된다.

• 속성값
  aria-live = polite 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달합니다.
  aria-live = assertive 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달합니다.

참고 자료
코드스테이츠 유어클래스
MDN - Using ARIA: Roles, states, and properties
W3C - ARIA in HTML