WAI-ARIA란?

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

WAI-ARIA(웹 접근성 이니셔티브 - Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 페이지 및 웹 애플리케이션의 접근성을 향상시키기 위한 명세이다. 주로 JavaScript를 사용하여 동적으로 업데이트되는 웹 애플리케이션과 웹 컨텐츠에 적용되는데, WAI-ARIA는 장애를 가진 사용자들이 웹 콘텐츠와 애플리케이션을 더 잘 이해하고 상호 작용할 수 있도록 돕기 위해 추가적인 정보를 제공한다.

WAI-ARIA는 세 가지 주요 역할(Role), 속성(Property), 상태(State)로 구성되어 있다.

 

1. 역할(Role):
WAI-ARIA 역할은 특정 요소가 수행하는 역할을 설명한다. 몇 가지 흔한 WAI-ARIA 역할에 대한 예시는 다음과 같다:

 

button (버튼):

<div role="button" tabindex="0" onclick="handleClick()">Click me</div>

link (링크):

<div role="link" tabindex="0" onclick="navigateToURL()">Visit our website</div>

 

menu (메뉴):

<ul role="menu">
  <li role="menuitem">Item 1</li>
  <li role="menuitem">Item 2</li>
  <li role="menuitem">Item 3</li>
</ul>

 

 

2.속성(Property):

WAI-ARIA 속성은 특정 역할을 가진 요소에 대한 추가 정보를 제공한다.

 

aria-label (레이블):

<button aria-label="Close" onclick="closeDialog()">X</button>

 

aria-describedby (설명):

<input type="text" id="username" aria-describedby="username-info">
<div id="username-info">Please enter your username</div>

 

 

3. 상태(State):

WAI-ARIA 상태는 특정 역할을 가진 요소의 현재 상태를 나타낸다.

aria-checked (체크 상태):

<input type="checkbox" aria-checked="true" onchange="handleChange()">Checked</input>

 

aria-expanded (확장 상태):

<div role="button" aria-expanded="false" onclick="toggleContent()">Toggle content</div>

 

 

이러한 WAI-ARIA 속성은 화면 판독기와 같은 보조 기술을 사용하는 사용자들에게 웹 애플리케이션의 의미와 상태를 전달하는 데 도움이 되지만, 주의해야 할 점은 WAI-ARIA를 사용할 때에는 기본 HTML 요소와 구조를 최대한 활용하고, WAI-ARIA를 보조 수단으로 사용해야 한다. 즉, 가능한 한 네이티브 HTML 태그 및 속성을 활용하여 접근성을 확보하는 것이 좋다.