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

WAI-ARIA란?

웹 접근성을 준수하기 위해서 장착해야 할 도구는 바로 WAI-ARIA이다.

WAI-ARIA는 Web Accessibility Initiative’s Accessible Rich Internet Applications의 약자로, 스크린리더가 브라우저를 읽을 때 각 요소가 어떤 역할을 하는지 무슨 의미로 존재하는지 알 수 있도록 하기 위해 만들어진 기술이다. 또, 자바스크립트나 다른 동적 언어로 인해 페이지의 요소가 바뀌더라도 새로고침을 하지 않아도 스크린 리더가 바뀐 요소를 읽어준다.

스크린 리더란 브라우저를 시각적으로 읽는 것이 불편한 사용자를 위해 컴퓨터 화면을 낭독해주는 소프트웨어다. 우리가 웹페이지를 만들 때 시멘틱 태그를 사용하지 않고, 시각적으로 꾸미기 위해 일부 속성을 사용하지 않는다면 스크린 리더 사용자가 이 웹페이지를 읽거나 사용하기가 굉장히 어려울 것이다.

예를 들어, 카카오톡 화면 하단의 홈, 채팅, 뷰, 쇼핑, 더보기 버튼에 아무런 아이콘이 없다면 우리가 사용하는 데 있어서 굉장히 불편할 것이다. 우리가 각 버튼 아이콘을 <div>태그로 띡 감싸놓기만 하고 아무런 설명도 붙이지 않는다면 스크린 리더 사용자는 이 버튼이 버튼인지 링크인지 그냥 이미지인지 구분하기가 어려울 것이다.

role 속성으로 태그의 역할을 지정해주고, aria-label로 이름표를 붙여주면 스크린 리더 사용자가 조금 더 쉽게 브라우저를 읽을 수 있을 것이다.

본문에서는 WAI-ARIA중 role과 aria-label, 그리고 약간의 aria-labelledby를 다룰 예정이다.

role과 aria-label

role

role은 태그의 역할을 알려주는 속성(attribute)이다.
role에 들어가는 값은 우리 마음대로 정하는 게 아닌 정해진 값을 사용해야 한다.

• tab
• tablist
• banner
• button
• gruop
  ...
  등등 더 많은 값은 MDN에서 볼 수 있다. ↓

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

aria-label

aria-label은 태그가 가지고 있는 의미를 적어주는 이름표 같은 역할을 한다. role과는 다른 기능이 있는데, 크게 두 가지로 나눌 수 있다.

첫 번째 특징

aria-label은 role의 banner나 tab처럼 값이 정해져 있는 게 아닌, 브라우저가 스크린 리더 사용자에게 전달해야 할 내용을 상황에 따라 적어야 한다.
예) aria-label="메뉴 탭"

예를 들어, 말풍선 아이콘이 있다고 치자.

그리고 아래와 같은 코드가 있을 때,

<div>
  <a href="#"><i class="ico ico-chat"></i></a>
</div>

우리는 화면에 보이는 아이콘으로, 또는 아이콘의 위치나 CSS 스타일로 해당 링크가 어떤 페이지로 이동 하는지 짐작할 수 있지만, 스크린 리더 사용자는 아이콘 생김새도 알 수 없고 이 버튼이 어딘가로 향하는 링크라는 것밖에 알지 못한다.
(스크린 리더는 내부-링크라는 것만 알려준다.)

하지만, 만약 여기서 aria-label="채팅창으로 이동"를 입력해주면

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

스크린 리더는 '채팅창으로 이동 내부-링크'라고 읽는다.

여기에 role까지 추가한다면, role="button"을 입력하면 버튼이라는 것도 알려주고, 펼치기 기능을 한다는 것도 알려준다.

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

스크린 리더는 '버튼 펼치기 내부-링크'라고 읽는다.

두 번째 특징

aria-label과 같이 써도 되는 태그가 있고 아닌 태그가 있다.

다음과 같이 시멘틱 태그이거나, role 속성 값이 상호작용(interactive)을 하는 값일 때 aria-label을 붙일 수 있다:

• a (href 속성이 있을 때)
• button
• header
• footer
• nav
• main
• form
• iframe
• img
• role="navigation"
• role="button"
  ...

시멘틱 태그가 아닌 의미 없는 태그에는 role이 붙어있지 않은 이상 aria-label을 마음대로 붙이면 안 된다:

• div
• span
• p
• li
  ...

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

aria-label과 role을 쓰기 위한 규칙

다음과 같은 몇 가지 규칙을 지키면서 적용해야 한다.

첫 번째 규칙

만약 HTML에 개발자들이 쓰기 좋게 만들어져 있는 태그가 존재한다면 그 태그를 사용하는 것이 좋다.

예를 들면, 로 체크박스를 손쉽게 만들 수 있고, 체크박스를 위한 기능(체크하기, 체크 풀기, 체크박스가 focus 되어있을 때 키보드로 제어하기 등등….)들이 이미 만들어져 있을 때 우리는 이 태그를 사용하면 된다.
굳이 <div>태그를 사용해 role을 checkbox로 지정해주고 체크박스가 가진 기능들을 직접 만들 필요가 없는 것이다.

두 번째 규칙

시멘틱 태그에 role을 될 수 있으면 쓰지 않는다. 시멘틱 태그 자체가 의미 있는 태그이기 때문에 role은 붙일 필요 없다. 만약 nav 태그에 button 역할을 추가하고 싶다면

<nav role="button"></nav>
//가 아닌

<nav><button></button></nav>
//이렇게 쓸 것을 권장한다.

버튼

코드 첫 줄의 경우 스크린 리더는 태그를 무시하고 role을 읽는다.

세 번째 규칙

aria로 사용된 모든 요소는 키보드로 제어할 수 있어야 한다. (제 기능을 해야 한다)
만약 role="button"이라면 tab으로 focus한 다음 enter 키나 return 키를 눌렀을 때 active 상태가 되어야 한다.

네 번째 규칙

시멘틱 태그가 의미하는 것을 aria-label로 다시 나타낼 필요는 없다.
아래 코드와 같이 이미 <button>으로 감싸진 태그 안에 또다시 app button이라는 텍스트를 넣을 필요가 없다.

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

버튼

아래 코드와 같이 'app'만 적어주면 된다.

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

버튼

aria-label과 aria-labelledby의 차이점

aria-label이 이름표를 붙여주는 것이라면, aria-labelledby는 쉽게 말해 그룹으로 묶어주는 속성이다.

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

오늘 할 일

• 자바스크립트 공부
• html/css 과제
• 알고리즘 문제풀이

오늘 할 일이라는 텍스트와 아래의 list 들이 같은 그룹이고 연결되어 있다는 것은 aria-labelledby를 통해 알 수 있다.
보통 연결해야 하는 label의 id를 적어주며, 만약 오늘 할 일이 list 들을 연결해야 한다면 aria-describedby를 써주면 된다.↓

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

오늘 할 일

• 자바스크립트 공부
• html/css 과제
• 알고리즘 문제풀이

참고

• 왜, 어떻게, 언제 시멘틱 html과 aria를 써야 하는가?:
  https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/
• W3C Using Aria:
  https://www.w3.org/TR/aria-in-html/#bib-HTML51
• aria-label이란-aditus
  https://www.aditus.io/aria/aria-label/
• aria-describedby MDN
  https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby
• aria-labelledby MDN
  https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby