이번 코드 리뷰에서 aria-labelledby를 사용 해보라는 코멘트를 받게 되었다
aria-labelledby? 가 무엇이길래 사용을 해야하는 것일까?
화면에는 모든 콘텐츠들이 문제없이 잘 보이는데 말이다.
우리가 제작하는 웹페이지는 눈이 잘 보이거나 소리를 잘 듣는다거나 웹페이지를 다루는데 능숙한 사람들만이 사용하는 것이 아니다
당연하게 개발자가 제작하는 웹페이지는 몸이 불편하신 분, 나이든 사람까지 모두가 사용 할 수 있다.
그리고 이분들의 원할한 이용을 돕기 위해 만들어 진 것이 WAI-ARIA role이다.
실제 WAI-ARIA를 적용했을 때에 스크린 리더기가 페이지를 어떻게 읽는지 보여주는 영상
사용자의 인터페이스 구성 요소의 접근성을 증가 시키는 방법에 대해 규정한 W3C가 출판한 기술 사양이다.
웹개발자들이 점차 클라이언트 사이드 스크립트를 사용하여 HTML만으로 제작할 수 없는 사용자 인터페이스 컨트롤을 만들게 되었고 해당 인터페이스 기술 들은 스크린 리더 사용자나 마우스나 기타 포인팅 장치를 사용할 수 없는 사용자들에게 접근 할 수 없게 되었다. 그래서 WAI-ARIA 를 통해서 역할 ,속성, 상태 정보 등을 웹 어플리케이션에 추가함으로써 사용자 인터페이스 컨트롤과 동적인 콘텐츠들에 더 잘 접근 할 수 있도록 한다.
WAI-ARIA를 모두 소개하기에는 양이 많기 때문에 이번 포스팅에서는 코드 리뷰를 통해 알게된 aria-labelledby와 aria-label을 예제로 설명해보고자 한다
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 는 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의 역할을 알려주게 된다
<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임을 알려 줄 수 있게 한 것이다.
오 사용만 하고 뭔지는 정확히 몰랐는데 감사합니다 ^-^