누구나 사용하기 쉽게 WAI-ARIA role

이번 코드 리뷰에서 aria-labelledby를 사용 해보라는 코멘트를 받게 되었다

aria-labelledby? 가 무엇이길래 사용을 해야하는 것일까?
화면에는 모든 콘텐츠들이 문제없이 잘 보이는데 말이다.

우리가 제작하는 웹페이지는 눈이 잘 보이거나 소리를 잘 듣는다거나 웹페이지를 다루는데 능숙한 사람들만이 사용하는 것이 아니다
당연하게 개발자가 제작하는 웹페이지는 몸이 불편하신 분, 나이든 사람까지 모두가 사용 할 수 있다.
그리고 이분들의 원할한 이용을 돕기 위해 만들어 진 것이 WAI-ARIA role이다.

실제 WAI-ARIA를 적용했을 때에 스크린 리더기가 페이지를 어떻게 읽는지 보여주는 영상

WAI-ARIA 정의

사용자의 인터페이스 구성 요소의 접근성을 증가 시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.
웹개발자들이 점차 클라이언트 사이드 스크립트를 사용하여 HTML만으로 제작할 수 없는 사용자 인터페이스 컨트롤을 만들게 되었고 해당 인터페이스 기술 들은 스크린 리더 사용자나 마우스나 기타 포인팅 장치를 사용할 수 없는 사용자들에게 접근 할 수 없게 되었다. 그래서 WAI-ARIA 를 통해서 역할 ,속성, 상태 정보 등을 웹 어플리케이션에 추가함으로써 사용자 인터페이스 컨트롤과 동적인 콘텐츠들에 더 잘 접근 할 수 있도록 한다.

WAI-ARIA적용하는 법

WAI-ARIA를 모두 소개하기에는 양이 많기 때문에 이번 포스팅에서는 코드 리뷰를 통해 알게된 aria-labelledby와 aria-label을 예제로 설명해보고자 한다

aria-label

aria-label MDN 문서

aria-label은 쉽게 말해 해당 element의 역할을 알려주는 일을 한다.

예를 들어

<button class="close-button">X</button>

이 있다고 가정을 해보자 X라고 보여지는 버튼을 닫기버튼으로 관습적으로 알 수 있다. 하지만 스크린 리더기를 사용하는 사용자의 입장에서는 어떤 버튼인지 미리 파악하기 힘들다.
이럴 때에 aria-label를 사용하여

<button aria-label="페이지 닫기 버튼" class="close-button">X</button>

페이지 닫기 버튼이라는 해당 element가 수행하는 역할을 명시해 주게 되면 스크린 리더기를 통해서 사용자는 페이지 닫기 버튼의 역할을 사전에 알게 되어 웹페이지 사용을 쉽게 할 수 있다.

주의점은 aria-label이 포함된 속성들은 자동번역이 되지 않으므로 주 사용층이 따라 어떤 언어를 사용하여 aria-label에 기술할 것인지 선택해야 한다.

aria-labelledby

aria-labelledby MDN 문서

aria-labelledby의 역할은 페이지의 다른 요소를 참조하여 엑세스 가능한 이름을 정의 하는 것이다. 사실 aria-labelledby 는 aria-label과 목적이 같다.
aria-labelledby 또한 사용자에게 해당 element가 어떤 역할을 하는지 인식 가능하고 엑세스 가능한 이름을 제공하기 때문이다.

사용 예시

<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span>
<span id="tac">I agree to the Terms and Conditions.</span>

만약, 스크린 리더기를 통해서 해당 체크박스에 접근했을 때에 스크린 리더기는 aria-labelledby에 의해서 연결된 "tac"으로 접근하게 되고 span태그 내부에 있는 I agree to the Terms and Conditions를 읽어주어 체크박스 element의 역할을 알려주게 된다

• aria-balledby의 특징

1. aria-labelledby는 브라우저가 엑세스 가능한 이름을 계산할 때에 최우선 순위를 가진다 심지어 aria-label 보다도 먼저!
2. id값을 사용하여 지정할 수 있기 때문에 두 가지 이상의 엑세스 가능한 요소를 지정할 수 있다
3. 보이지 않는 요소의 콘텐츠가 포함 될 수 있어 html 에서 hidden처리가 된것이나 css에서 display:none, visibility:hidden으로 처리한 element에도 적용할 수 있다

<article aria-labelledby="car-name-input-title">
          <h2 hidden id="car-name-input-title">자동차 이름을 입력하는 곳</h2>

위의 코드는 이번에 코드에서 적용해봤었던 aria-labelledby이다
해당 코드에서 h2가 hidden이 되어서 화면에 나오지 않음에도 불구하고 aria-labelledby로 연결을 한 이유는 사용자가 지금 읽고 있는 section이 어떤 부분에 대한 것인지 알리기 위해서 이다.
h2에 section에 대한 설명을 쓰고 aria-labelledby로 연결하여 스크린 리더기가 지금 읽고 있는 section은 이런 내용을 가지고 있는 section임을 알려 줄 수 있게 한 것이다.