WAI-ARIA 란 ?
웹 접근성을 향상시킬 수 있는 방법 중 하나로, WAI에서 발표한 RIA 환경에서의 웹 점근성 기술 규격을 의미한다.
WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C 에서 웹 접근성을 담당하는 기관
ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
WAI-ARIA 의 필요성
WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 따라서 보조적으로 사용하면, 웹 접근성을 향상시킬 수 있다.
- 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와준다.
- ‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의미이다. WAI-ARIA는 보조적인 역할로만 사용해야 한다. WAI-ARIA를 남용해선 안 되며, 시맨틱한 HTML을 작성하는 것이 최우선이다.
- SPA 처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있다.
WAI-ARIA 사용법
WAI-ARIA는 HTML 태그 내부에 속성을 추가함으로써 의미를 부여해줄 수 있다. WAI-ARIA의 속성에는 크게 세 가지 분류가 있다.
- 역할(role) : HTML 요소의 역할을 정의하는 속성
- 상태(state) : 요소의 현재 상태를 나타내는 속성
- 속성(property) : 요소의 특징을 정의하는 속성
1. 역할 (Role)
HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)이다. 예를 들어, 버튼으로 사용되는 요소를 만들었는데 <div> 요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 다음과 같이 표시해줄 수 있다.
<div role="button">div이지만 button으로 사용되는 요소</div>주의할 점은, HTML 요소로 충분히 파악할 수 있는 내용을 WAI-ARIA 로 또 설명 할 필요는 없다.
<button role="button">button인 요소</button>2. 상태 (State)
Tab 컴포넌트를 가정하고, 현재 어떤 Tab이 선택되었는지 aria-selected 속성을 적용하여 알 수 있다.
<div role="tabList">
<li role="tab" aria-selected="true">Tab1</li>
<li role="tab" aria-selected="false">Tab2</li>
<li role="tab" aria-selected="false">Tab3</li>
</div>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>이 외에도 아코디언 UI가 펼처진 상태인지 표시해주는 aria-expanded, 요소가 숨김 상태인지를 표시하는 aria-hidden 등의 속성이 있다.
3. 속성 (Property)
텍스트 콘텐츠 없이 이미지로만 만들어진 버튼의 경우 요소에 대한 정보를 전혀 얻을 수 없다.
이러한 경우 aria-label 속성을 적용하면 요소에 의미를 부여해줄 수 있다.
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>aria-live 속성은 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시한다. 브라우징 도중에 내용을 띄우는 alert, modal, dialog 와 같은 역할을 하는 요소이거나, AJAX 기술을 사용하여 실시간으로 내용을 갱신하는 영역에 사용하는 속성이다.
