[웹접근성] WAI-ARIA

WAI-ARIA

정의

W3C의 WAI(Web Accessibility Initiative)가 제정한 *RIA(Rich Internet Applications)의 웹 접근성에 대한 표준 기술 규격을 의미

RIA(Rich Internet Applications)는?

동적인 javascript, Ajax와 같은 기술을 사용한 환경에 적용하여 수준 높은 UX(User eXperience)를 제공하는 웹 애플리케이션

등장배경

- 기존의 HTML, javascript, Ajax 등을 이용한 동적인 웹 애플리케이션(RIA)은 화려하고 편리하지만 스크린리더를 사용하는 장애인들이 접근하기에는 취약

- 정보통신보조기기에 웹페이지의 기능을 제공하는 새로운 방법을 정의하여 RIA의 접근성 문제를 해결하기 위한 표준으로 WAI-ARIA가 등장

장점

• 엘리먼트 및 컴포넌트에 누락된 의미를 제공

• 보조 기기 사용성의 향상

• 논리적 구조 설계 가능 및 구조의 시각화 가능

• 구조에 의미를 부여하여 페이지 영역의 빠른 탐색 가능

• 동적 컨텐츠의 식별이 가능

• 상태 변화 발생시 사용자 에이전트는 사용하는 API에 적절한 이벤트 알림 제공

구성 요소

역할(Role), 상태(State), 속성(Property)을 통하여 유저인터페이스의 요소들을 정의하여 인식 가능하게 함

역할(Role) 

- 유저 인터페이스(User Interface)에 포함된 특정 컴포넌트의 역할을 정의

- 랜드마크(이정표)의 역할을 함

- Abstract Roles / Widget Roles / Document Structure Roles / Landmark Roles

1. 추상 모델 (Abstract Roles)

 Roles의 분류 체계를 만들고 역할들을 정의

 상속 구조를 잡기 위한 상위 개념의 role 속성 값으로 엘리먼트에 직접 사용할 수 없음

 WAI-ARIA를 구축하는 기반

Abstract Roles

command / composite / input / landmark / range / roletype / section / sectionhead / select / structure / widget / window

2. 위젯 모델 (Widget Roles)

 독립형 사용자 인터페이스를 동작시키기 위한 목적

 사용자와 상호작용하는 엘리먼트를 나타냄

 더 큰 Roles에 포함되거나 복합 위젯의 일부로 사용됨

독립형 Widget Roles	command / composite / input / landmark / range / roletype / section / sectionhead / select / structure / widget / window
복합형 Widget Roles (단독으로 쓰이지 않음)	combobox / grid / listbox / menu / menubar / radiogroup / tablist / tree / treegrid

3. 문서구조 모델 (Document Structure Roles)

 문서구조를 설명하는 목적의 Roles

 엘리먼트가 어떤 성격의 영역인지 정의

모델	설명
article	블로그 글, 포럼 글, 뉴스 기사 등 문서에서 독립적인 내용으로 구성 가능한 영역
columnheader	표의 제목열
definition	용어의 정의나 의미, 개념
directory	목차와 같은 컨텐츠의 참조 목록
document	웹 애플리케이션 달리 문서 내용을 담고있는 영역
group	사용자와 상호작용하는 엘리먼트(위젯)의 집합
heading	섹션의 제목
img	이미지와 관련된 엘리먼트
list	상호작용하지 않는 listitem의 집합(=목록)
listitem	목록(directory, list)을 구성하는 항목
math	수식
note	컨텐츠의 내용을 보충하는 메모
presentation	접근성 API와 같은 보조 도구에서 무시해도 되는 영역
region	문서 내에서 요약이나 목차가 제공될 만큼 큰 컨텐츠를 가지고 있는 섹션
row	표의 행
rowgroup	표의 행 그룹
rowheader	표의 제목행
separator	section, menuitem의 그룹을 구별하는 구분자
toolbar	도구 모음 영역

4. 랜드마크 모델 (Landmark Roles)

 웹페이지의 각 영역을 명확하게 구분하는 목적의 Roles

 영역 역할을 지정할 수 있는 8개의 속성이 존재

모델	HTML5 섹션 관련 요소
role="application"	동일한 역할의 요소 없음. 주로 <div> 요소와 같은 그룹 역할을 하는 요소로 대체 가능
role="banner"	동일한 역할의 요소 없음. 비슷한 의미로 <header> 요소를 사용할 수 있으나 <header role="banner">로 사용하였다면 한 페이지에서 한개의 <header>요소만 사용하길 권장함
role="navigation"	<nav> 요소 다른 페이지 또는 페이지 내 특정 영역으로 이동하는 링크 콘텐츠 영역으로 주로 메인 메뉴 및 서브 메뉴 등에 사용
role="main"	<main> 요소 본문의 주요 콘텐츠 영역으로 한 페이지 내에 1개만 사용 가능 <article>, <aside>, <footer>요소의 하위 요소로 사용 불가
role="complementary"	<aside> 요소 주요 콘텐츠와 연관이 적은 의미있는 콘텐츠 영역으로 종종 사이드바로 표현 가능 <aside> 영역에는 현재 날씨, 관련된 기사 또는 주식 정보등의 부가 콘텐츠를 포함 가능
role="form"	<form> 요소 폼과 관련된 요소의 모임을 표현하는 영역으로 서버에 전송될 수 있는 콘텐츠를 포함 가능
role="search"	동일한 역할의 요소 없음 검색의 역할을 담당하는 서식 영역임을 의미 <div> 또는 <form> 요소를 사용하는 것을 권장
role="contentinfo"	동일한 역할의 요소 없음 비슷한 의미로 <footer>요소를 사용 가능 <footer role="contentinfo">로 사용하였다면 한 페이지에서 한 개의 <footer> 요소만 사용하길 권장

속성(Property) & 상태(State)

속성(Property)

해당 컴포넌트의 특징이나 상황을 정의

엘리먼트가 기본적으로 갖고 있는 특징이나 데이터를 표현하는 방식

속성의 값이 바뀌는 것은 엘리먼트의 형태나 데이터를 표현하는 방식의 변화를 가져옴

속성명으로 "aria-*"라는 접두사를 사용

상태(State)

해당 컴포넌트의 상태 정보를 정의

엘리먼트가 사용자의 입력이나 정해진 규칙에 따라 변하는 것을 나타냄

상태의 값은 엘리먼트의 근본적인 형태나 동작에 영향을 미치지 않음

속성과 상태는 Widget states / Live Regions / Drag and Drop / Relationshiops 로 분류됨

Widget states and properites	autocomplete / checked / datatype / disabled / expanded / haspopup / invalid / level / multiline /    multiselectable / pressed / readonly / required / secret / selected / valuemax / valuemin / valuenow
Live Regions	aria-live / aria-relevant / aria-atomic / and aria-busy
Drag and Drop	aria-dropeffect / aria-grabbed
Relationshiop	aria-activedescendant / aria-colcount / aria-colindex / aria-colspan / aria-controls / aria-describedby / aria-details  / aria-errormessage / aria-flowto / aria-labelledby / aria-owns / aria-posinset / aria-rowcount / aria-rowindex /   aria-rowspan / aria-setsize

사용시 주의사항

- 접근성 향상의 목적으로 애트리뷰트 선택자(ARIA포함) 만을 이용하여 엘리먼트를 컨트롤 시 사이드 이펙트 발생할 위험 존재

- HTML 명세서에 정의된 태그의 고유한 의미와 ARIA의 암시적인 의미가 충돌을 일으킬 가능성이 존재

  ex) <h1 role="button"></h1> (X)

- 모든 RIA 컨텐츠는 키보드를 사용하여 접근 가능해야 함

- 모든 브라우저와 보조기기가 WAI-ARIA를 지원하지 않기 때문에 지원하는 브라우저와 기기 정보를 확인하고 적용해야 함