WAI-ARIA
WAI(Web Accessibility Initiative)
웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
ARIA(Accessible Rich Internet Applications)
장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 해주는 즉, 웹 접근성을 갖추기 위한 기술
RIA(Rich Internet Applications)
따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것 처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.
WAI-ARIA의 필요성
HTML요소에 의미를 부여한 시멘틱 요소를 사용하는 것만으로도 웹 접근성을 향상할 수 있지만, WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해준다. 아래와 같은 상황에서 WAI-ARIA를 사용하면 웹 접근성을 효과적으로 향상할 수 있다.
1. 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색할 수 있게 도와준다. 시멘틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야하며, 언제까지나 보조적인 역할로만 사용하여야 한다. WAI-ARIA를 남용해선 안되며, 시멘틱한 HTMLD을 작성하는 것이 최우선이다.
2. SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에 대한 정보를 전달해 줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상할 수 있다.
WAI-ARIA 사용법
WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해 줄 수 있다. WAI-ARIA의 속성에는 크게 세 가지 분류가 있다.
1. 역할(Role)
HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시하기 위해 사용할 수 있는 속성(attribute)이다.
예를 들어, 버튼으로 사용되는 요소를 만들 때 <div>요소를 사용했다면, 이 요소가 버튼 역할을 하고 있음을 표시해 줄 수 있다.
<div role="button"> div이지만 button역할입니다.</div>HTML요소로 충분히 파악할 수 있는 내용을 WAI-ARIA로 또 설명해 줄 필요는 없으며, 시멘틱 요소의 본연의 의미를 임의로 바꾸면 안된다.
// WAI-ARIA의 잘못된 사용 예시
<button role="button">button인 요소</button>
<h1 role="button">h1인 요소</h1>
탭 컴포넌트를 생각해보자. 화면을 보면 각 탭을 눌렀을 떄 화면이 바뀌는 탭 컴포넌트라는 것을 쉽게 알 수 있지만, HTML요소의 구조만으로는 화면을 파악하기 힘들다.
// 컴포넌트 구조를 간소화한 모습
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div>Tab menu ONE</div>
<div>Tab menu TWO</div>
<div>Tab menu THREE</div>
이럴 때, WAI-ARIA를 사용하여 이 구조가 탭의 역할을 하고 있음을 다음과 같이 표시해 줄 수 있다.
<ul role="tabList">
<li role="tab">Tab1</li>
<li role="tab">Tab2</li>
<li role="tab">Tab3</li>
</ul>
<div role="tabpanel">Tab menu ONE</div>
<div role="tabpanel">Tab menu TWO</div>
<div role="tabpanel">Tab menu THREE</div>
2. 상태(State)
탭 컴포넌트에서 현재 어떤 탭이 선택되어 있는지는 위의 코드만으로는 알 수 없다. 이럴 때 사용하는 속성이 바로 여러 개의 선택 가능한 요소 중에서 선택 상태인 요소를 표시할 수 있는 aria-selected이다.
<ul 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>
</ul>
<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 기술을 사용하여 실시간으로 내용을 변경하는 영역에 사용하는 속성이다. 시각 장애인들은 화면의 동적인 요소를 알아채기 어렵기 때문에, 이 속성을 사용해서 실시간으로 변경되는 내용을 알려주면 큰 도움이 된다.
속성 값으로는 polite, assertive, off(default)가 있다.
- polite : 스크린 리더가 현재 읽고 있는 내용을 모두 읽고 나서 변경된 내용을 사용자에게 전달한다.
- assertive : 스크린 리더가 현재 읽고 있는 내용을 중단하고 변경된 내용을 바로 사용자에게 전달한다.
댓글