Wai-aria 란?

2024년 6월 2일

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)란 웹 콘텐츠 및 웹 애플리케이션의 접근성을 향상시키기 위한 기술 사양이다.

스크린 리더가 브라우저를 읽을 때, 각 요소가 어떤 의미로 어떻게 존재하는지 알수 있도록 할 수 있다.

여기서 스크린 리더란, 컴퓨터나 모바일 화면의 텍스트를 TTS를 통해 읽어주는 소프트웨어이다.

특히나 장애를 가진 사용자들이 웹 콘텐츠를 더 쉽게 접근할 수 있도록 돕기 위해서 고안 되었다.

만약에 시맨틱 태그나 wai-aria를 사용하지 않고, 본인만의 편의성을 위해서 코드를 작성한다면, 스크린 리더를 사용하는 사용자가 어플리케이션을 이용하기 어려울 것이다.

wai-aria는 또한 요즘 같이 동적으로 업데이트 되는 컨텐츠에 대해서, 스크린 리더가 잘 인식할 수 있도록 돕는 역할을 한다.

<div role="alert" aria-live="assertive">
  새로운 알림!
</div>

또한 탭, 아코디언, 슬라이더와 같은 복잡한 UI 요소는 기본 HTML 태그만으로는 접근성을 보장하기 어렵다.

이런 경우에 wai-aria 역할과 속성을 사용하여 이러한 요소의 접근성을 높일 수 있다.

<div role="tablist">
  <div role="tab" aria-selected="true">
1
  </div>
  <div role="tab">2</div>
</div>

시멘틱 태그를 사용하는 것이 가장 좋지만, 시멘틱 태그를 사용하지 못하는 경우나, 추가적인 설명이 필요한 경우 wai-aria를 사용할 수 있다.

<!-- 시맨틱 태그 사용 예시 -->
<button>클릭</button>

<!-- 시맨틱 태그를 사용할 수 없는 경우 -->
<div role="button" tabindex="0" aria-pressed="false">클릭</div>

또한 wai-aria를 사용할때, 키보드 접근성을 생각해야한다.

tabindex를 사용하여 키보드 포커스를 제어할 수 있다.

<div role="button" tabindex="0">
  버튼
</div>

여기서 tabindex는 키보드 포커스 순서를 제어하는데에 사용 된다.

기본적으로 대화형 요소 (버튼, 인풋, a 태그 등)은 키보드로 접근할 수 있지만, 경우에 따라 사용자 정의 요소에도 포커스를 부여해야 할 때, tabindex 속성을 사용한다.

tabindex=0은 요소를 기본 탭 순서에 포함시킨다는 의미이다.

이 값은 요소가 문서의 자연스러운 탭 순서에 따라 포커스를 받을 수 있게 된다.

- 주요 ARIA 속성

  1. aria-hiddden

요소를 스크린 리더에서 숨긴다.

<div aria-hidden="true">이 요소는 스크린 리더에서 숨겨집니다.</div>
  1. aria-label

사용자에게 시각적으로 보이지 않는 라벨을 제공한다.

<button aria-label="Submit Form">제출</button>
  1. aria-labelledby

다른 요소에 의해 라벨링 된 요소를 연결한다.

<h1 id="header">헤더</h1>
<section aria-labelledby="header">
  <p>헤더 밑에 컨텐츠 내용</p>
</section>
  1. aria-describedby

다른 요소에 의해 설명 된 요소를 연결한다.

<button aria-describedby="desc">더 보기</button>
<div id="desc">이 버튼은 더 많은 정보를 보여줍니다.</div>

이런식으로 wai-aria는 웹 접근성을 향상 시킬수 있고, 조건에 관계 없이 모든 사용자가 어플리케이션을 효율적으로 이용할 수 있도록 한다.