WAI-ARIA

WAI-ARIA

Web Accessibility Initiative - Accessible Rich Internet Applications의 약자로, WAI는 W3C에서 웹 접근성을 담당하는 조직이며 ARIA는 리치 인터넷 어플리케이션을 위한 W3C의 접근성 명세이다. 

필요성

리치 인터넷 어플리케이션(RIA)는 웹 어플리케이션의 장점은 유지하면서 기존 웹 브라우저 기반 인터페이스의 단점인 늦은 응답 속도, 데스크톱 어플리케이션에 비해 떨어지는 조작성 등을 개선하기 위한 기술의 통칭이다. 이러한 리치 인터넷 어플리케이션이 많아지면서 HTML을 사용하여 동적인 웹 어플리케이션의 접근성을 보장하지 못하는 경우가 생겨나게 되었다. 

이 때문에 스크린리더를 사용하는 시각장애인들이 이러한 환경에서 웹 컨텐츠를 이용하는데 있어서 어려움을 겪게 되는 것이다. 예를 들어, 페이지를 새로고침하지 않고 ajax 방식으로 컨텐츠를 갱신했을 때, 시각장애인이 갱신된 컨텐츠를 즉시 전달받지 못하거나 잘못된 비밀번호를 입력했을 때 등장하는 툴팁의 안내를 바로 전달받지 못하는 경우가 있다. 이러한 이유로 W3C에서 웹 컨텐츠 및 웹 어플리케이션의 접근성과 상호 운용성을 개선하기 위해서 WAI-ARIA란 명세를 발표하게 된다. 

지원 범위

브라우저

(출처:https://caniuse.com/#feat=wai-aria)

보조 기기

(출처:https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ)

사용하기

WAI-ARIA는 스크린리더 및 보조기기 등에서 마크업에 Role, Property, State 정보를 추가할 수 있도록 지원한다. 이렇게 추가된 정보는 웹 브라우저에 의해 자동으로 해석되어 각각의 운영체제의 접근성 API로 변환되도록 설계되었다. 이때 스크린리더 및 보조기기는 운영체제(OS)에서 제공하는 접근성 API를 통해 데스크탑 애플리케이션 과 동일한 방법으로 자바스크립트 컨트롤을 인식하고 상호 작용을 하게 된다. 

• Role(역할) - UI에 포함된 특정 컴포넌트의 역할을 정의
• Property(속성) - 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 'aria-*'라는 접두사를 사용
• State(상태) - 해당 컴포넌트의 상태 정보를 정의

Role

Role은 특정 요소에 기능을 정의하는 것을 말한다. 

예를 들면, button 요소로 버튼을 만들지 못하는 경우(cursor:pointer를 사용하지 못하는 IE8일 경우)에 a 요소를 사용하는 경우가 있다고 한다. 그러나 버튼은 스크린리더에서 '링크'로 읽어주게 되어서 사용자 입장에서 혼란이 생길 수 있다. 이 때 a 요소에 role = "button"을 지정하면 스크린리더가 링크가 아닌 '버튼'으로 읽어주어서 사용자가 정확한 용도를 알 수 있다. 

Role은 크게 6가지 카테고리로 구분할 수 있다. 

• Widget Roles
• Landmark Roles
• Document structure Roles
• Abstract Roles
• Live Region Roles
• Window Roles

Abstract Roles

요소가 어떤 성격의 영역인지를 정의하지만, 상속 구조를 잡기 위한 상위 개념의 role 속성 값으로 요소에 직접 사용할 수 없다.