2023년 10월 17일
웹 접근성이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다. 시각, 운동성, 청각, 발작, 인지 등을 고려해야한다. 웹 접근성에 도움을 주는 기능으로는 스크린 리더, 화면 확대 도구, 음성 인식, 키보드 오버레이 등이 있다.
WAI-ARIA(Web Accessibility Initiative's Accessible Rich Internet Applications)는 W3C에서 정의한 기술로 웹 접근성을 향상을 의해 브라우저의 스크린 리더와 같은 보조 기술이 정보를 인식하고 사용자에게 무슨 일이 일어나고 있는지 알려주는 데 사용할 수 있는 추가 시맨틱 정보를 추가해주기 위한 기술이다. 대표적인 기술로는 role, aria-label 속성 등이 있다. 이러한 속성 등을 활용하여 스크린 리더가 해당 태그의 역할과 상태 등을 읽어낼 수 있다.
role은 태그의 역할을 알려주는 속성(attribute)이다. role에 들어가는 값은 우리 마음대로 정하는 게 아닌 정해진 값을 사용해야 한다. tab, banner 등이 있고 MDN(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques)에서 확인해볼 수 있다. 또한 시맨틱 태그에는 왠만하면 해당 속성을 사용하지 않는 것이 좋다. 만약 사용하게 되면 스크린 리더는 시맨틱 태그를 무시하고 role을 읽게 된다.
aria-label은 role의 banner나 tab처럼 값이 정해져 있는 게 아닌, 브라우저가 스크린 리더 사용자에게 전달해야 할 내용을 상황에 따라 적어야 한다. 예를 들면 “상세 페이지로 이동” 등이 될 수 있다. 또한 role과 함께 사용하여 스크린 리더가 사용자에게 role을 통해 해당 태그의 역할을 전달하고 aria-label을 통해 상태를 전달할 수 있다.
<div>
<a href="#" aria-label="펼치기" role="button"><i class="ico ico-arrow"></i></a>
</div>
하지만 aria-label과 같이 써도 되는 태그가 있고 아닌 태그가 있다. 시멘틱 태그이거나, role 속성 값이 상호작용(interactive)을 하는 값일 때 aria-label을 붙일 수 있다 :