[HTML] aria-label에 대해서...

때때로 요소의 기본 접근자 이름이 없는 경우, 또는 그것의 콘텐츠를 명확하게 설명하지 못한 경우, 그리고 해당 요소에게 의미를 주기 위한 객체와 연관된 DOM 안에 표시가능한 콘텐츠가 없는 경우가 있습니다. 흔한 예로 SVG 또는 어떠한 텍스트도 없이 icon 폰트(사용되어서는 안되는 방법입니다.)만을 가진 button 요소가 있습니다.

 

이렇게 접근자 가능한 접근자 이름이 없거나, 초기 접근자 이름이 적합하지 않은 경우, aria-label 속성을 사용하여 요소의 접근자 이름을 정의할 수 있습니다.

 

대표적인 예로 교보문고 웹 페이지를 살펴볼 수 있을 것 같습니다.

여기서 웹페이지의 "<" 버튼의 html 파일 부분을 살펴보면 다음과 같이 코드가 작성되어 있습니다.

<button type="button" class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide">
	<span class="hidden">이전</span>
</button>

button 요소 안에 오늘의 주제인 aria-label 속성이 적용되어 있음을 확인할 수 있습니다. 과연 이 요소 속성이 어떠한 역할을 하는지 명확하게 파악하기 위해서는 스크린 리더로 확인해보면 쉽게 알 수 있습니다.

스크린 리더를 이용하여 해당 버튼을 클릭하면 "previous slide"라고 읽어주는 것을 확인할 수 있습니다. 이것이 바로 button 요소 안의 aria-label 속성이 접근자 이름의 역할을 수행하고 있다는 것을 보여주는 증거입니다.

해당 button 요소 안에는 위 그림에서 하단의 빨간색 박스와 같이 background-image로 이미지 파일만 전달이 되어 있음을 확인할 수 있습니다. 이렇게 접근자 이름이 존재하지 않고 이미지 파일만 존재하게 되는 경우 사용하기 가장 적합한 요소 속성이 바로 aria-label인 것입니다.

 

아마 한편으로는 span 요소가 button 안에 있는데 왜 읽어주지 않는 것인지 궁금해집니다. 여기서 주목할 부분은 클래스명이 hidden이라는 점입니다. ir 기법을 사용하였는데, 여기에서 읽히지 않는 이유는 아마도 클릭하였을 때 button 요소만 선택되기 때문인 것으로 판단됩니다. ir 기법을 사용하였기 때문에 해당 요소를 잡을 수 없어서 나타난 현상이라고 판단됩니다.

 

이렇듯 aria-label은 접근가능한 접근자 이름이 없는 경우에 이를 제공하기 위한 방법으로 사용됩니다. 이는 웹 접근성의 향상을 위해 존재하는 속성입니다. 하지만, 오직 스크린리더만을 위하여 제공되는 것은 아닙니다. 사용자의 interaction이 작용되는 요소이면서 동시에 접근자이름이 없는 경우에 aria-label 속성의 사용을 고려하면 됩니다. 보여지는 것에 국한시켜 고려하지 마시길 바랍니다.

 

이 외에도 aria-label에 대한 추가적인 내용들이 있으나 이 글에서는 간단하게 aria-label의 역할과 사용법 그리고 언제, 어떠한 경우 사용하는 것이 적합한지 살펴보는 정도로 마치겠습니다. 보다 자세한 내용은 aria-label과 관련된 MDN 문서를 살펴보시기 바랍니다. (해당 자료는 참고 자료에 링크로 올려놓았습니다.)

 

감사합니다.

 

[참고 자료]

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label

aria-label - Accessibility | MDN