WAI-ARIA: Role과 Aria-Label이란?

웹 접근성을 향상시키기 위해 사용되는 중요한 도구 중 하나는 바로 WAI-ARIA다. WAI-ARIA는 Web Accessibility Initiative's Accessible Rich Internet Applications의 약자로, 스크린 리더가 웹 페이지를 읽을 때 요소의 역할과 의미를 파악할 수 있도록 돕는다. 특히 JavaScript 같은 동적 언어를 사용해 페이지 요소가 변경되더라도 스크린 리더는 새로고침 없이 변경된 내용을 읽을 수 있다.

스크린 리더란?

스크린 리더는 시각적으로 웹 페이지를 읽는 것이 어려운 사용자들을 위해 컴퓨터 화면의 내용을 읽어주는 소프트웨어다. 우리가 웹 페이지를 만들 때 시맨틱 태그를 사용하지 않거나 시각적으로만 요소를 꾸민다면, 스크린 리더 사용자들은 웹 페이지를 이해하거나 사용할 때 어려움을 겪을 수 있다.

WAI-ARIA의 역할

WAI-ARIA는 웹 요소들의 역할과 의미를 명확하게 정의하여, 스크린 리더가 이를 정확히 해석할 수 있도록 돕는다. 이를 통해 시각 장애가 있는 사용자들도 웹 페이지를 원활하게 탐색할 수 있다.

---

role 속성

role 속성은 태그의 역할을 알려주는 속성이다. 예를 들어, role="button"은 해당 요소가 버튼임을 나타낸다. role에 들어가는 값은 정해진 값을 사용해야 하며, 이는 MDN 웹 문서에서 확인할 수 있다.

Using ARIA: Roles, states, and properties - Accessibility | MDN

<div role="banner">
  <h1>안녕하세요</h1>
</div>

aria-label 속성

aria-label 속성은 태그가 가지고 있는 의미를 설명하는 이름표다. 이를 통해 스크린 리더 사용자가 해당 요소의 기능을 쉽게 이해할 수 있다. aria-label은 상황에 맞게 적절한 설명을 입력해야 한다.

<a href="#" aria-label="채팅창으로 이동"><i class="ico ico-chat"></i></a>

• 위의 예시에서 스크린 리더는 링크를 "채팅창으로 이동"이라고 읽는다.

aria-labelledby와 aria-describedby

aria-labelledby 속성은 그룹으로 묶어주는 역할을 한다. 예를 들어, 할 일 목록을 제목과 연결할 때 사용한다.

<h2 id="today-todo">오늘 할 일</h2>
<ul aria-labelledby="today-todo">
  <li>자바스크립트 공부</li>
  <li>html/css 과제</li>
  <li>알고리즘 문제풀이</li>
</ul>

• 스크린 리더는 제목과 목록 항목이 연결되어 있다고 알려준다.

aria-describedby 속성은 특정 요소가 설명하는 다른 요소를 지정할 때 사용한다.

<h2 aria-describedby="today-todos">오늘 할 일</h2>
<ul id="today-todos">
  <li>자바스크립트 공부</li>
  <li>html/css 과제</li>
  <li>알고리즘 문제풀이</li>
</ul>

• 스크린 리더는 제목의 목록 항목을 연결해서 알려준다.

---

특징 및 사용 규칙

특징

1. 정의된 값 사용: role 속성에 들어가는 값은 정해진 값을 사용해야 한다. 예를 들어 tab, button 등.
2. 상황에 따른 설명: aria-label은 상황에 맞게 적절한 설명을 입력해야 한다.

사용 규칙

1. 시멘틱 태그 사용: 가능하면 시멘틱 태그를 사용하여 의미를 명확히 한다.

<nav role="button"></nav> <!-- X -->
<nav><button></button></nav> <!-- O -->

 

2. `role`과 `aria-label` 사용: 상호작용 요소에만 `role`과 `aria-label`을 사용한다.

<div role="button" aria-label="펼치기"><i class="ico ico-arrow"></i></div>

 

3. 키보드로 제어 가능: role을 사용한 모든 요소는 키보드로 제어할 수 있어야 한다.

 

4. 중복 설명 피하기: 이미 의미가 명확한 태그에 중복으로 설명을 추가하지 않는다.

<button type="button">
  <a href="#" aria-label="app button"></a> <!-- 불필요 -->
</button>

<button type="button">
  <a href="#" aria-label="app"></a>
</button>

참고

• a_in.log: WAI-ARIA: role과 aria-label 사용법

WAI-ARIA: role과 aria-label 사용법

• MDN Web Docs: WAI-ARIA

ARIA - Accessibility | MDN

• W3C Using Aria

Using ARIA

• aria-label이란-aditus

aria-label - examples and best practices | Aditus

• aria-describedby MDN

aria-describedby - Accessibility | MDN

• aria-labelledby MDN

aria-labelledby - Accessibility | MDN