[HTML] WAI-ARIA란?

최근 Vue.js로 Auto Completion(혹은 Auto Suggestion)모듈을 만드는 과정에서 여러 라이브러리에서 WAI-ARIA 이라는 키워드가 계속 나와서 이를 정리해보았다.

WAI-ARIA란?

WAI-ARIA의 정의를 위키피디아에서 찾아보자.

WAI-ARIA는 Web Accessibility initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양입니다. 출처: 위키피디아

 

가장 중요한 키워드는 접근성(Accessibility, A11Y)이다. 과거 사이트를 조작하기 위해 사용하는 물리적 인터페이스는 키보드와 마우스 두개 뿐이였다. 그리고 대부분 미리 만들어진 HTML 요소에 JavaScript로 간단한 로직만 붙이는 정도이다. 그리고 시간이 지나서, 세상은 스마트폰으로 인한 모바일 시대로 들어서면서 스크린 터치라는 새로운 입력 방식을 사용하는 사용자가 많아지고, 다양성에 대한 사회적 인식의 변화로 전맹 시각장애인들의 사이트 접근성에 대한 요구가 증가하게 된다. 그리고 사용자의 요구에 따라 사이트에서 사용하는 UI들은 이제 HTML의 한계를 넘어서게된다. 그러한 요구에 따라 WAI-ARIA가 등장하게 되었다.

WAI-ARIA는 어떻게 사용하는가?

쉽게 인터렉티브한 컴포넌트를 만들 수 있는 React나 Vue.js를 사용한 라이브러리에서 문제가 생길 수 있다. 아무런 Semantic 의미를 가지지 않는 <div> 같은 요소를 이용하여 체크박스를 만들었다고 가정해보자.

<div class="checkbox"/>

모든 JavaScript로 인한 인터렉티브가 적용된 사이트를 이용할 때 사용자들은 별 문제가 없다. 그러나 전맹 시각장애인이나, 검색 포털인 구글이나 네이버의 크롤러들이 사이트에 들어왔을 때는 이야기가 다르다. <input type="checkbox">이라는 의미의 요소를 찾아야하는데 <div>요소 밖에 못 찾게 되고, 여기서 WAI-ARIA가 사용된다.

<div
    class="checkbox"
    role="checkbox"
/>

이렇게 attribute를 넣는 것 처럼 role, aria-label등의 키워드에 알맞은 값을 넣어주면, 해당 요소를 분석하여 크롬등의 브라우져가 의미에 맞게 읽게 된다. 위에 예시에서 보면 알겠지만, 의미 없는 <div>요소로 HTML을 짜는 것보다 의미에 맞는 요소를 사용하여 즉, Semantic하게 HTML을 작성한다면 대부분의 접근성 문제는 해결된다. 하지만, 자동완성 모듈 같은 복잡한 UI는 HTML 요소로 정의되지 않았기 때문에, 이런 복잡한 UI에는 적합한 WAI-ARIA를 이용해야한다.