- WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
- ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
- RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.
WAI-ARIA는 WAI와 ARIA 를 합친 단어로, WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격이다.
WAI-ARIA의 필요성
HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 그래서 WAI-ARIA를 보조적으로 사용하면 웹 접근성을 향상시킬 수 있다.
- 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 사용한다. → 시맨틱 요소만으로 의미를 충분히 부여할 수 있을 때는 사용하지 않는다. 남용금지
- SPA처럼 AJAX를 사용하는 상황, 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.
WAI-ARIA 사용법
WAI-ARIA는 HTML 태그 내부에 속성을 추가하여 의미를 부여해줄 수 있는데, 이 속성은 크게 세 가지로 나눌 수 있다.
- 역할(role) : HTML 요소의 역할을 정의하는 속성
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> - HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성
<div role="button">div이지만 button으로 사용되는 요소</div> - 시맨틱 요소 본연의 의미를 임의로 바꾸면 안 된다.
- 상태(state) : 요소의 현재 상태를 나타내는 속성
aria-selected: 선택 가능한 요소 중에서 선택 상태인 요소를 표시할 수 있는 속성- HTML 요소의 구조만으로 화면을 파악할 수 있는 사용자들을 위한 속성
- 사용 예시
<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>
- 속성(property) : 요소의 특징을 정의하는 속성
aria-label: 요소에 의미를 부여해줄 수 있는 속성- 요소에 대한 정보를 전혀 얻을 수 없는 경우에 사용한다.
- 사용 예시
<button aria-label="닫기"/> <img src="X.png" /> </button> <button aria-label="검색"/> <img src="돋보기.png" /> </button>
aria-live: 요소가 실시간으로 내용을 갱신하는 영역인지 표시하는 속성- 동적인 요소를 알아채기 힘든 사용자를 위해 이 속성을 사용하여 실시간으로 갱신되는 내용을 알려줄 수 있다.
polite,assertive,off(default)라는 속성값을 가지고 있다.
