WAI-ARIA 란? (웹 접근성 향상)

일반적으로 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 웹 접근성(Web Accessibility)라고 한다.
하지만 특수 상황에 있어 비 장애인도 정보 접근에 제한을 받는 불편함을 겪을 수 있다(ex. 운전 중, 요리 중 등의 상황 )

이 때 , WAI-ARIA을 이용하면 웹 접근성을 효과적으로 향상시킬 수 있게 된다.

WAI-ARIA

WAI(Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관

ARIA(Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에서 더 쉽게 엑세스 할 수 있도록 하는 기술.
즉, 웹 접근성을 갖추기 위한 기술

RIA (Rich Internet Application) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성과
프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 어플리케이션. SPA를 의미하는 경우가 많다

정리하자면 WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격으로 웹 접근성을 향상시킬 수 있는 방법 중의 하나이다.

728x90

WAI-ARIA는 HTML 요소에 따라 스크린 리더 등의 보조기기에서 제대로 읽히지 않는 경우를 개선하기 위해 웹 애플리케이션에 역할(Role), 속성(Property), 상태(State) 정보를 추가 할 수 있다

 

역할 (Role)

HTML 요소의 역할을 정의하는 속성으로 HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해 줄 때 사용하는 속성
예를 들어 버튼으로 사용되는 요소를 <div> 요소를 사용하여 만들었다면 이 요소가 버튼 역할을 하고 있음을 이렇게 표현할 수 있습니다. 

<div role = "button"> button으로 사용되는 div </div>

 

속성(Property)

해당 요소의 특징이나 상황을 정의하는 속성. aria-라는 접두사를 사용한다
속성의 예시 중의 하나로 aria-label은 요소에 라벨을 붙여주는 기능을 하는 기능을 한다

<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>

 

상태(State)

요소의 현재 상태를 나타낸다

예를 들어 tab을 구현한다고 할 때, 현재 선택되어 있는 tab을 표현하기 위해서 아래와 같이 적용할 수 있다
aria-seleted는 여러개의 선택가능한 요소 중에서 선택 상태인 요소를 표시할 수 있는 속성이다.

<div role="tabList">
  <li role="tab" aria-selected="true">Tab1</li>
  <li role="tab" aria-selected="false">Tab2</li>
  <li role="tab" aria-selected="false">Tab3</li>
</div>

 

예시로 들었던 속성들 외에도 aria-live, aria-describedby 등 다양한 속성이 있다

---

참고

https://bcp0109.tistory.com/348

https://www.w3.org/WAI/fundamentals/accessibility-intro/ko