[Web] WAI-ARIA란?

장애인이나 고령자 등이 웹 사이트에서 제공하는 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 것을 웹 접근성이라 한다.

웹 접근성을 보장하는 방법 중 하나로 Semantic 요소를 사용하는 방법이 있는데,

이 Semantic 요소만으로 의미를 충분히 부여할 수 없는 상황에서 WAI-ARIA를 사용하면 웹 접근성을 향상시킬 수 있다.

HTML 요소에 추가적인 의미 부여가 가능해 진다.

WAI-ARIA란?

WAI와 ARIA를 합친 단어로, WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격이다.

• WAI (Web Accessibility Initiative): 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
• ARIA (Accessible Rich Internet Applications): 웹 컨텐츠와 앱에 더 쉽게 접근할 수 있도록 하는 웹 접근성을 갖추기 위한 기술
  • RIA (Rich Internet Applications): 동적이고 빠른 반응의 UI와 UX를 제공하는 웹 애플리케이션 (보통 SPA를 의미함)

WAI-ARIA 기능

ARIA는 요소에 적용할 수 있는 의미를 정의하며 역할, 상태, 속성으로 나뉜다.

• 역할 (role): HTML 요소의 역할을 정의하는 속성
• 상태 (state): 요소의 현재 상태를 나타내는 속성
• 속성 (property): 요소의 특징이나 상황을 정의하는 속성

역할 (role)

HTML 요소와 역할이 상이할 때, 어떤 역할을 하는 요소인지 명시해주기 위해 사용하는 속성이다.

예를 들어, <a> 요소는 클릭 시 해당 링크로 이동할 수 있는 기능을 가지고 있다.

<a href="www.sample.com">www.sample.com</a>

하지만 스크린 리더는 <a> 요소를 링크라고 읽기 때문에 스크린 리더를 사용하는 사용자가 이를 버튼으로 인지할 수 없는 상황이 발생할 수 있다.

이러한 상황에서 role을 지정하여 사용자가 단순한 링크가 아닌 버튼으로 인식할 수 있도록 도와줄 수 있다.

<a href="www.sample.com" role="button">www.sample.com</a>

상태 (state)

요소의 현재 상태를 의미하며 상황의 변화에 따른 값을 가진다.

메뉴가 펼쳐진 상태인지, 유효하지 않은 값이 입력되었는지 등의 상태를 나타낼 수 있다.

예를 들어 드롭다운 메뉴의 경우, 메뉴가 펼쳐진 상태 또는 접힌 상태인지에 대한 정보를 aria-expanded 속성을 사용하여 정보를 제공할 수 있다.

<ul id=“menu” role=“tree”>
	<li id=“menu” role=“treeitem” aria-expanded=“true”>
		<a>WAI-ARIA 소개</a>
		<ul id=“sub-menu” role=“group”>
			<li id=“menu” role=“treeitem” aria-expanded=“false”>
				<a>WAI-ARIA 란?</a>
			</li>
		</ul>
	</li>
	<li id=“menu” role=“treeitem” aria-expanded=“false”>
		<a>WAI-ARIA의 목적</a>
	</li>
</ul>

속성 (property)

요소가 기본적으로 갖고 있는 특징이나 상황을 의미한다.

form의 input이 읽기 전용인지, 필수 항목인지, 업데이트된 정보가 있는지 등의 상황을 사용자가 인지할 수 있도록 도와준다.

예를 들어 회원가입 폼에서 필수로 입력해야 하는 input이 있을 경우 aria-required를 지정하여 해당 항목이 필수 항목이라는 정보를 제공할 수 있다.

<div class=“id-area”>
	<label for=“user-email”>아이디</label>
	<input type=“email” id=“user-email” aria-required=“true”>
</div>
<div class=“pw-area”>
	<label for=“user-pw”>비밀번호</label>
	<input type=“password” id=“user-pw” aria-required=“true”>
</div> 

[MDN] 더 많은 역할, 상태, 속성 보기

Reference

https://www.wah.or.kr:444/board/boardView.asp?page=1&brd_sn=5&brd_idx=1019

https://story.pxd.co.kr/1588