aria-label 을 통한 웹 접근성 향상

대부분의 웹 콘텐츠에는 해당 요소를 설명하는 text가 존재한다.

// 버튼
<button onClick={close}>
	닫힘
</button>

// 이미지
<img
	src={src}
    alt={"이미지 설명"}
/>

각 element 들은 해당 요소를 설명하는 문자열을 감싸고 있기 마련이며,

이를 통해 각기 다른 상황의 사용자들도 해당 웹에서 동일한 경험을 할 수 있다. (접근성이 향상된다)

 

그러나 웹을 작성하다 보면

접근할 수 있는 기본 이름이 누락되거나, 

DOM에 해당 element에 의미를 부여할 수 있는 내용이 존재하지 않는 경우가 발생한다.

(대표적 예시 = 텍스트 없이, SVG 혹은 글꼴 이미지 텍스트로 이뤄진 버튼)

 

이와 같은 상황에서 aria-label을 사용할 수 있다.

→ 해당 element와 상호작용하는 문자열 정의 가능!

<button aria-label="Close" onclick="myDialog.close()">
  <svg
    aria-hidden="true"
    focusable="false"
    width="17"
    height="17"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
      fill="#000" />
  </svg>
</button>

이를 통해 접근성을 개선하고,

스크린 리더기 사용자 및 기타 보조 기술 사용자가 해당 요소와 상호작용 하는데 도움을 줄 수 있다.

 

또한 요소의 의미를 text로 명시해 다양한 언어로 제공이 가능하며,

적절한 키워드나 설명을 제공할 수 있으므로 검색 엔진 최적화에도 이점을 가질 수 있다.

 

그런데, 만약 해당 요소를 설명하는 text가 DOM안에 존재할 경우에는

→ aria-labelledby 속성을 권장하고 있다!

(aria-labelledby는 aria-label와 완전히 동일한 역할을 수행하며, 두 속성이 모두 설정되었을 경우 aria-labelledby가 우선권을 갖는다)

 

또한, 모든 요소에 aria-label을 지정하는 것 역시 바람직하지 않다.

해당 속성은 사용자와 상호작용 가능한 요소 에만 지정해야 하며, 

aria-labelledby와 aria-label을 동시에 지정하는 것 역시 권장되지 않는다.
→ 비대화형 요소, inline structural role(code, term, emphasis 등), 접근 불가능한 요소(none, hidden) 등에 남용해서는 X