✅ WAI-ARIA란?
Web Accessibility Initiative – Accessible Rich Internet Applications
WAI는 W3C에서 웹 접근성을 담당하는 기관으로 ARIA는 RIA환경의 웹 접근성에 대한 표준 기술 규격을 의미
쉽게, 스크린리더와 같은 보조기술들에 웹 접근성을 향상 시켜주는 HTML에 추가할 수 있는 속성
✅ 등장 배경
● RIA(Rich Internet Application)의 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족
● 대부분의 웹 사이트들은 Ajax를 통해 실시간으로 콘텐츠들을 갱신하는데, 스크린리더를 사용하는 사용자들은 실시간으로 갱신되는 정보를 알 수 없음
● 페이지 콘텐츠 중 일부만 변경되었을 때, 스크린리더를 사용하는 사용자들은 동일한 내용을 계속 듣게되는 문제에 부딪힘
● 저시력자가 화면을 확대하였을 경우, 확대된 화면밖의 콘텐츠가 변경되어도 이를 인지하기 어려움
✅ 사용 목적
마우스, 키보드와 같은 입력 하드웨어를 사용하기 힘든 환경 또는 스크린 리더를 사용하는 사용자들에게 웹서비스에 대한 접근성 및 상호 운용성을 향상시키기 위해 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가할 수 있도록 지원하여 보다 나은 사용자 경험(UX)을 제공하기 위한 목적을 가짐
✅ 구조
📌 역할(Role) : UI에 특정 컴포넌트의 역할을 정의
<ul role="tabList"> <li> <a href="#" role="tab">탭</a> <li> </ul>aria 구조 중 역할을 명시해주면 단지 링크 태그로서의 의미만을 전달해주는것이 아닌, 버튼의 역할이 Tab이라고 명시해준다.
📌 속성(Property) : 해당 컴포넌트의 특징이나 상황을 정의
해당 컴포넌트에 속성명으로 aria-xx라는 접두사 사용<button class="btn_search" aria-label="검색">검색이라는 안내 텍스트 없이 버튼을 나타낼 때, 시각 정보를 이용할 수 없는 사용자는 어떤 버튼인지 알 수 없다. aria-label을 이용하여 버튼 요소에 검색이라는 설명을 추가하여 정보를 전달할 수 있다.
[다양한 속성]
● aria-required : form 요소의 입력 필수 속성
● aria-label : text없이 이미지로 표현될 때 정보 설명
● aria-live : 업데이트된 정보의 상황에 대한 설명
● aria-controls(속성에 제어대상) : 제어대상
📌 상태(State) : 해당 컴포넌트의 상태 정보를 정의
메뉴의 활성 여부를 보여주는 aria-expanded, aria-selected와 같이 현재 상태 또는 변화된 값을 알려준다.<ul class="btnList"> <li> <button aria-controls="accordion-region" aria-expanded="true">btn</button> </li> </ul>아코디언 메뉴의 활성 상태 값인 aria-expanded를 명시하면 스크린 리더기가 상태정보(확장 또는 축소)를 읽어줄 수 있다.
[다양한 상태]
● aria-checked(true,false,undefined) : 선택 상태
● aria-hidden(true,false,undefined) : 숨김 상태
● aria-disabled(true,false) : 사용 불가능/가능 상태
● aria-pressed(true,false,대상) : 눌림 상태
더 많은 ARIA의 역할, 속성, 상태는 (MDN-ARIA) 참고
✅ 주의사항
● HTML5에서 추가된 의미 있는 태그를 먼저 사용하고 의미를 부가적으로 설명해주고자 할 때 WAI-ARIA의 role을 추가해주기
● 의미를 가진 HTML 요소를 함부로 바꾸지 말기
● 키보드를 사용하여 접근할 수 있게 하기
● 사용자의 브라우저와 보조기기가 WAI-ARIA를 지원하는지 확인하기(Can I Use)
