WAI-ARIA의 사용법을 이야기 하기 전에 웹 접근성과 WAI-ARIA의 정의에 대해 먼저 간단하게 이야기 하고 시작해보자.
웹 접근성
웹 접근성(Web Accessbility)은 누구나 웹 사이트에 접근하고 이용할 수 있도록 하는 방식을 말한다. 여기서 누구나는 장애의 유무에 상관없이 정말 말 그대로 웹 페이지를 사용하는 모든 사람을 가리킨다.
WAI-ARIA
그렇다면 웹 접근성과 WAI-ARIA는 무슨 연관이 있는걸까 ?
WAI-ARIA는 Web Accessibility Initiative – Accessible Rich Internet Applications 의 약어로 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션에 더 쉽게 접근할 수 있도록 W3C에서 출판한 기술로 HTML에 보충하여 보조기술이 알 수 없는 상호작용 및 필요한 정보를 제공한다.
한마디로 WAI-ARIA는 웹 접근성을 보조해주는 기술이라는 것 !
⚠️ 주의점
그럼 WAI-ARIA는 웹 접근성을 보조해주는 기술이니까 접근성이 필요하다면 무분별하게 사용해도 되는걸까 ?
정답은 안된다 입니다 🥲
어디까지나 보조기술 이므로 보조기술이 메인이 되서는 안된다. 구현하려는 기능을 가진 요소가 존재한다면 기본적으로 최대한 의미 있는 태그를 사용하여 문서를 작성하는 것이 맞다.
아래 예시를 보자.
// 첫번째 예시
<a href="#" role="button">예시1</a>
// 두번째 예시
<button type="button">예시2</button>두 예시 모두 보조기기는 button으로 간주하겠지만 예시1은 링크 기능을 제공하므로 사용자에게 혼란을 줄 수 있다. 또한 button 태그의 경우 spacebar 와 enter 키 2가지를 다 이용할 수 있지만 a태그는 오로지 enter키만으로 사용할 수 있으므로 이 또한 사용자에게 혼란을 주게 된다.
그러므로 최대한 의미에 맞게 HTML을 작성하는 것이 가장 좋은 방법이라는 것 !
또한 WAI-AIRA 역시 웹 기술이므로 지원 범위를 확인 후 사용하도록 하자.
참고 링크
https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA
https://github.com/lezhin/accessibility/blob/master/aria/README.md
