WAI-ARIA
WAI-ARIA
WAI-ARIA는 Web Accessibility Initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양
WAI-ARIA의 목적
- 스크린리더 및 보조기기 등을 사용하는 장애인이 좀 더 Web Application을 편리하게 사용할 수 있도록 만들어졌다.
- 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선시킬 수 있도록 되어있다.
- 이러한 정보들은 Web Browser에 의해 자동으로 해석되어 각각의 운영체제의 접근성 API로 변환되어서 스크린리더와 같은 보조기기들이 이를 통해 데스크탑 애플리케이션과 동일한 방법으로 JavaScript Control을 인식하고 상호작용을 할 수 있게 된다.
- 이러한 방식은 스크린리더기 등의 보조기기를 사용하는 사용자들이 Web Application을 사용할 때, 데스크탑 애플리케이션의 동작과 유사하게 인식하여 작동하기 때문에 좀 더 향상된 UX를 제공하게 된다.
ARIA Roles & States and Properties
점근성과 상호 운용성을 향상시키기 위한 WAI-ARIA는 역할, 속성, 상태 등의 3가지 기능을 제공한다.
- 역할(Role) - 유저 인터페이스(User Interface, 이하 UI)에 포함된 특정 컴포넌트의 역할을 정의
- 속성(Property) – 해당 컴포넌트의 특징이나 상황을 정의하며 속성명으로 “aria-*”라는 접두사를 사용
- 상태(State) - 해당 컴포넌트의 상태 정보를 정의
Role
역할은 특정 요소에 기능을 정의하는 것을 말한다. 페이지의 검색 영역인지 내비게이션 요소인지 특정 섹션의 제목인지 등의 명확한 기능을 부여할 수 있다.
예를 들어, 웹 애플리케이션에서 버튼 컴포넌트를 제작할 때 <a> 요소를 사용하는 경우 마우스 사용 이외에 키보드 사용 시 초점을 받을 수 있기 때문에 다양한 용도로 활용되고 있다.
그러나 버튼 컴포넌트 구현을 위해 <a> 요소를 사용할 경우 스크린 리더에서는 해당 버튼을 링크라고 읽어주게 된다. 이럴 경우 스크린리더 사용자는 버튼이 아닌 링크의 용도로 이해하기 때문에 혼란이 생기게 된다.
이때 <a href=“/” onclick=“playApp()” role=“button”>재생</a>와 같이 지정하면 스크린 리더 사용자는 링크가 아닌 버튼으로 읽어주게 되어 컴포넌트의 정확한 용도를 이해하고 사용할 수 있게 된다.
또한 기본 버튼의 키보드 인터랙션으로 사용하기 위해 스페이스바로도 동작을 추가하면 버튼의 역할이 완성된다.
Role의 4가지 카테고리
- Document Structure Role (문서구조 역할)
- Abstract Role (추상 역할)
- Landmark Role (랜드마크 역할)
- Widget Role (위젯 역할)
Property
속성은 요소가 기본적으로 갖고 있는 특징이나 상황을 의미한다.
폼의 입력 상자가 읽기 전용(Read Only) 인지 또는 필수 항목(Require)인지, 사용자 입력에 대해 자동 완성(Auto Complete)기능을 지원할 지 또는 드래그(Drag)가 가능한지, 팝업(has Popup)이 뜨는지, 업데이트된(Live) 정보가 있는지 등의 상황을 사용자가 인지할 수 있도록 할 수 있다.
속성의 사용 예로 입력 폼을 생각해보면, 회원 가입 시 사용자 아이디와 비밀번호를 입력 받아야 하며 해당 입력 값은 필수 항목일 경우 입력 상자에 aria-required="true"를 지정하면 스크린리더등의 보조기기에서 해당 항목이 필수 항목임을 알 수 있도록 제공할 수 있다.
<div class="“id-area”">
<label for="“user-email”">아이디</label>
<input type="“email”" id="“user-email”" aria-required="“true”" />
</div>
State
상태는 요소의 현재 상태를 의미하며 상황의 변화에 따른 값을 가진다.
메뉴가 펼쳐진 상태(expanded)인지, 적절하지 못한(invalid) 값이 입력되었는지 콘텐츠가 숨김(hidden) 상태인지 등을 나타낼 수 있다.
예를 들어, 애플리케이션에서 제공하는 메뉴가 하위 메뉴를 포함하고 있을 경우 현재 하위 메뉴가 접힌 상태인지 펼쳐진 상태인지 스크린리더 사용자에게 정보를 제공해야 할 경우가 있다. 이때 aria-expanded 속성을 사용하여 접힌 상태라면 false, 값을 펼쳐진 상태라면 true 값을 지정할 수 있다.
WAI-ARIA 작성 규칙
랜드마크와 HTML5
HTML5에 새롭게 추가된 섹션 관련 요소의 경우 WAI-ARIA 규칙과 동일한 역할의 요소가 다수 있다.
W3C 에서는 HTML5의 섹션 관련 요소와 WAI-ARIA 규칙을 함께 사용할 경우 해당 기능이 무효화 되
거나 충돌이 발생할 수 있으므로 중복해서 사용하지 않도록 주의를 당부하고 있다.
랜드마크(Landmark Role)는 웹 페이지에서 제공되는 콘텐츠 유형이 어떤 역할을 하는지 식별할 수 있 도록 도와주는 표지판 기능으로 기존 웹접근성 지침에서 요구하고 있는 건너뛰기 링크의 발전된 모습 이면서 콘텐츠 블록의 제목 제공보다 명확한 영역 구분이 가능하다는 장점을 가진다.
랜드마크를 사용하는 방법은 콘텐츠를 포함하고 있는 컨테이너인 HTML 요소에 role 속성을 사용하여 콘텐츠의 역할을 지정하면 된다.
HTML요소의 기능 변경 제한
ARIA 규칙을 이용하여 요소의 네이티브(Native) 의미를 변경하는 것은 바람직하지 않다.
예를 들어 버튼의 역할을 하는 콘텐츠를 <h1> 요소로 마크업하고 role=“button”으로 지정하는 경우를 들 수 있다.
이미 제공되고 있는 <h1> 요소에 버튼을 역할을 수행하도록 하고자 한다면 <h1> 요소에 직접 role을 부여하기 보다 자식 요소로 의미에 맞는 <button> 요소를 추가하거나 중립적인 의미를 가지는 <span> 등의 요소에 role=“button”을 부여하여 추가하는 것을 권장한다.
키보드 사용 보장
사용자와 상호작용이 필요한 대화형 UI의 경우 키보드로도 접근 및 사용이 가능하도록 제공해야 한다.
여기서 상호작용이 필요한 대화형 UI란 사용자가 클릭할 수 있는 정보나 탭 또는 드래그 앤 드롭, 슬라이드, 스크롤 등의 기능이 필요한 콘텐츠를 의미한다.
키본적으로 키보드 포커스를 받지 못하는 HTML 요소의 경우 tabindex 속성을 사용하여 키보드 포커스를 받을 수 있도록 할 수 있다.
숨김 콘텐츠
사용자에게 정보를 전달하되 단순히 화면에서만 보이지 않도록 처리된 콘텐츠에 aria-hidden="true"를 지정해서는 안된다.
단순히 가시적으로만 숨긴 콘텐츠에 특정 role을 부여했더라도 스크린리더 등의 보조기기에서는 의미적으로도 숨겨진 콘텐츠로 인식하게 된다.
또한 이와 비슷하게 특정한 의미를 전달해야 하는 요소에 presentation 역할(Role)을 주어서는 안된다.
스크린리더 등의 보조기기는 role=“presentation”으로 지정된 요소를 의미 없이 단순히 가시적으로 전
달하기 위한 요소로 인식하게 된다.
레이블 제공
모든 대화형 UI의 경우 반드시 레이블을 제공하여야 한다. 레이블 제공을 위해 HTML의 <lable> 요소를 사용하는 것을 권장하며
aria-label, aria-labelledby등의 WAI-ARIA 관련 속성을 사용하여 레이블을 제공할 수도 있다.
<div class="“container”">
<label for="“user-name”">이름</label>
<input type="“text”" id="“user-name”" />
</div>
<div>
<div id="“user-name”">이름</div>
<input type="“text”" aria-labelledby="“user-name”" />
</div>
<button aria-label="“닫기”" onclick="“myDialog.close()”">X</button>
유효성 검사
WAI-ARIA를 사용할 경우 의미를 가지는 시맨틱 요소와 충돌되지 않도록 하는 것이 필요하다.
가령 헤딩의 의미를 가지는 <h1> 요소에 role=“button”을 부여하면 해당 요소에 적절하지 않은 속성을 사용했다는 문법 오류를 경험하게 될 것이다.