[웹 표준 & 접근성] WAI-ARIA

WAI-ARIA

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

WAI-ARIA 필요성

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

• 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면, HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와준다. 시멘틱 요소가 있는 상황에서는 WAI-ARIA를 사용하지 않아야 한다. 시멘틱한 HTML요소를 작성하는것이 최우선이다.
• SPA처럼 AJAX를 사용하는 상황, 새로고침이 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있다.

WAI-ARIA 사용법

WAI-ARIA는 HTML 태그 내부에 속성을 추가로 의미를 부여해 줄 수 있다.

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

1. 역할(role)

HTML의 요소 중료와 역할이 서로 맞지 않을 때 어떤 역할을 하는지 명시해 줄 때 사용하는 속성이다.

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

HTML 요소로 충분히 파악할 수 있는 내용은 작성 해주지 않는다.

// WAI-ARIA의 잘못된 사용 예시
<button role="button">button인 요소</button>

시멘틱 요소 본연의 의미를 임의로 바꾸지 않는다.

// WAI-ARIA의 잘못된 사용 예시
<h1 role="button">h1인 요소</h1

태그들만 봤을때 태그가 어떤기능을 하는지 파악하기 힘듦으로 WAI-ARIA으로 설명을 해준다.

<ul role="tabList">
  <li role="tab">Tab1</li>
  <li role="tab">Tab2</li>
  <li role="tab">Tab3</li>
</ul>

<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

위의 테이블 예시에서 어떤 탭이 선택되었는지에 선택 상태에 관련해 작성 해줄수 있는 속성이다.

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

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

3개의 탭 중 첫번째 탭이 선택된 상태임을 알 수 있다.

3. 속성(Property)

aria-label

이미지만 들어있는 버튼의 경우 HTML 요소의 구조만으로 어떤 역할을 하는 버튼인지 파악하기 힘든 경우가 있다. 이런 상황에 사용하는 속성이다.

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

• aria-label속성을 넣어줌으로써 각 버튼들이 어떤기능을 하고있는지 바로 알 수 있다.

aria-live

브라우징 도중 내용을 띄우는 alert, modal, dialog등과 같은 역할을 하는 요소나, AJAX 기술을 사용하여 실시간으로 내용을 변경하는 영역에 사용하는 속성이다.

• polite : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고나서 변경된 내용을 사용자에게 전달한다.
• assertive : 스크린 리더가 현재 읽고 있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달한다.