WAI-ARIA 기본 개념

2020-12-27

ARIA는 마크업에 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 스크린 리더기 및 보조 기기 등에서 접근성 및 상호 운용성을 향상 시키고 보다 나은 사용자 경험(User Experience)를 제공하기 위함이라는 목적을 가진다.

배경

WCAG(Web Content Accessibility Guidelines)은 국제 웹 표준 기구인 WCA가 1997년 WAI(Web Accessibility Initiative)을 설립하고 장애인이나 장애 환경 등의 접근성 재고를 위해 만든 가이드라인이다. WAI에서는 W3C 1.0을 시작으로 W3C 2.1까지 웹 콘텐츠를 더 접근성있게 만드는 권고안을 만들었다. 시각장애인, 청각 장애인등 다양한 장애를 가진 사람들이 보다 접근 가능한 콘텐츠를 제공하는 것을 목표로 한다. “웹 콘텐츠 접근성 가이드 라인” 의 버전이 지속적으로 업데이트되면서 웹접근성 보장 수준이 좋아지고 있으나 새롭게 등장하는 신기술들을 지원하기에는 아직 부족하다.

RIA 의 동적인 웹 애플리케이션 접근성 보장을 위한 지침이 부족하다.
ajax를 통한 실시간으로 변경되는 콘텐츠 를 못읽을 수 있다.
페이지 콘텐츠 중 일부만 변경 시 동일한 내용을 계속 읽어야 하는 문제가 발생한다.
화면 확대 사용자의 경우, 가시 범위 밖의 콘텐츠 변경 내용 을 인지하기 어렵다.

그 이외에도 HTML 명세만으로는 웹접근성 문제를 해결하기 어렵다는 판단 하에 WAI-ARIA(RIA를 위한 접근성 권고안)을 발표하게 된다.

목적

스크린 리더기 및 보조기기 등에서 접근성 및 상호 운영성을 향상시키기 위해 마크업의 역할, 속성, 상태 정보를 추가할 수 있도록 지원한다. 추가된 정보는 웹브라우저에 의해 자동으로 해석되어 각각의 운영체계 접근성 api로 변환되도록 설계되었다. 이때 스크린 리더기 및 보조기기는 운영체제에서 제공하는 접근성 api를 통해 데스크탑 애플리케이션과 동일한 방법으로 자바스크립트 컨트롤을 인식하고 상호작용을 하게 된다. 이것이 스크린 리더기 및 보조기기 사용자가 웹 애플리케이션을 사용할 때 데스크탑 애플리케이션 동작과 유사하게 인식하고 작동하기 때문에 보다 향상된 사용자 경험을 제공하게 된다.

3가지 기능

역할(Role)

특정 요소(Element)에 역할을 정의하는 것
역할을 부여하여 사용자에게 정보를 제공
부여된 역할은 동적으로 변경할 수 없으므로 주의가 필요

메뉴 정의

1	<div class="user_menu" role="menu">

경고 대화상자 정의

1	<div class="auth_error" role="alertdialog">

버튼 정의

1	<a class="btn_01" role="button">

속성(Properties) & 상태 (States)

요소(Element)가 기본적으로 갖고 있는 특징이나 상황
속성과 상태는 aria-* 접두어를 가진다.
상태는 요소의 상황을 나타내므로 애플리케이션이 실행되는 중에 자주 바뀌는 반면, 속성은 상대적으로 바뀌는 경우가 드물다.

속성

필수 항목 속성

1	<input type="checkbox" aria-required="true">

추가 설명 속성

input값에 초점이 가는 경우 추가 설명을 함께 읽어주게 된다.

1 2	<input type="checkbox" aria-describedby="reference"> <div id="reference">추가설명</div>

그룹 레이블 명명

다양한 요소의 레이블을 지정하는 용도로 사용하며, 긴 설명보다는 명사 등으로 해당 요소의 성격이 무엇인지 이해를 돕도록 할 수 있다.

1	<div role="group" aria-label="레이블">추가설명</div>

상태

확장되어 있는 상태의 탭패널

1	<div role="tabpanel" aria-expanded="true">

오류가 발생한 상태의 입력상자

1	<input type="text" aria-invalid="true">

선택된 상태의 토글 버튼

1	<button aria-pressed="true">

REFERENCE
https://www.youtube.com/watch?v=08ha5EkByIo&list=PLtaz5vK7MbK355QFGb4q8DfFPbh3NQDda