📌 WAI-ARIA란?
Web Accessibility Initiative - Accessible Rich Internet Applications
HTML 태그에 필요한 정보를 제공해주는 보조기술로, 웹 접근성 향상을 돕는 방법 중 하나이다.
역할(Role), 속성(Property), 상태(State) 정보를 추가하여 스크린리더 등에서 페이지 접근성을 높이고 사용자에게 보다 나은 UX를 제공한다.
WAI는 W3C에서 웹 접근성을 담당하는 기관, ARIA는 RIA 환경의 웹 접근성에 대한 표준 기술 규격을 뜻한다.
RIA: 정적인 HTML, 단순한 자바스크립트 환경의 웹이 아닌 동적인 자바스크립트와 Ajax와 같은 기술을 사용한 환경에서 수준 높은 UX를 제공하는 웹 애플리케이션
📌 WAI-ARIA 종류
역할(Role)
요소의 역할에 대한 정보를 제공해준다.
role="tab": 탭 역할임을 사용자에게 전달.role="tablist": 탭메뉴의 리스트임을 사용자에게 전달.role="tabpanel": 탭패널임을 사용자에게 잔달.
속성(Property)
요소가 속성에 대한 정보를 제공한다.
aria- 라는 접두어를 갖는다.
aria-required: 폼 요소 중 필수 요소인 것을 알려줌.aria-label: 이미지에 대한 정보를 전달aria-live: 업데이트된 정보의 상황을 전달.
상태(State)
탭, 아코디언, 폼 요소, 토글 버튼 등 요소의 변화된 상태에 대한 정보를 제공한다.
마찬가지로 aria- 라는 접두어를 가진다.
aria-selected: 메뉴의 선택된 여부를 알려줌.aria-expanded: 콘텐츠의 확장이나 축소된 상태를 알려줌.
📌 WAI-ARIA 사용 시 주의사항
1. ARIA를 사용하기 전에 태그의 역할과 의미에 맞게 사용한다.
WAI-ARIA는 HTML을 보조하는 개념이고 HTML5에서 시맨틱 태그가 등장했기 때문에 되도록 WIA-ARIA보다 의미를 가진 HTML(시맨틱 태그)을 선호해아한다.
EX)
<!-- X -->
<div role="button">다음 슬라이드</div>
<!-- O -->
<button>다음 슬라이드</button>예를 들어 다음 슬라이드로 넘어가는 버튼을 위처럼 <div> 태그를 사용하여 작성했을 때 role="button" 을 작성한다고 해서 실제 키보드 포커싱이 일반 버튼처럼 역할을 주는 것은 아니다. (키보드로 해당 div에 접근이 안된다.)
2. 태그의 기본 의미를 중복해서 선언할 필요는 없다.
HTML의 각 태그에는 기본적으로 갖고 있는 역할과 의미가 있기 때문에 태그의 뜻과 중복되는 의미를 정의할 필요는 없다.
EX)
<!-- X -->
<input type="checkbox" role="checkbox">
<button role="button">다음슬라이드</button>
<!-- O -->
<input type="checkbox">
<button>다음슬라이드</button> 3. 키보드를 사용해 접근할 수 있도록 한다.
만약 <button>, <input> 요소들처럼 키보드 지원이 되는 요소를 <div>로 작업해야한다면 동일하게 키보드로 접근이 가능하게 작업한다.
EX)
<!-- 키보드 접근 불가 -->
<div role="button">다음슬라이드</div>
<!-- 키보드 접근 가능 -->
<div role="button" tabindex="0">다음슬라이드</div>4. 올바르지 못한 ARIA를 사용할 바엔 ARIA를 사용하지 않는 편이 좋다.
스크린리더를 사용하여 페이지에 접근하는 경우는 ARIA의 정보에 의지하게 되는데 바르지 못한 정보를 제공하게 되는 경우 스크린리더 사용자의 페이지 접근에 혼란을 주게되므로 정확한 사용이 중요하다.
