[웹 접근성] WAI-ARIA role / aria-label

role

html 태그 외에도 접근성적으로 의미를 부여해야 할 경우 role을 사용한다.

예) span 태그이지만 link 역할을 하는 경우

<span
  tabindex="0"
  role="link"
  onclick="goToLink(event, 'http://www.w3.org/')"
  onkeydown="goToLink(event, 'http://www.w3.org/')"
>
  W3C website
</span>

스크린리더 시 role 값이 읽힌다.

aria-label

태그 내의 텍스트가 아니라 다른 멘트가 읽혀야 하는 경우 aria-label을 사용한다.

적절한 액세스 가능한 이름 역할을 하는 보이는 텍스트 콘텐츠가 없을 때 유용하다.

<a href="#" aria-label="a 링크">다운로드</a>

a 태그와 button 태그를 스크린리더기로 읽었을 때

a 태그의 경우 ‘링크’라는 소리가 난 후 텍스트 순으로 읽히고

button은 태그 안의 텍스트를 읽은 후 ‘버튼’(윈도우는 ‘단추’) 소리가 추가로 들린다.

참고사이트

링크 예시
레진 WAI-ARIA 가이드라인 소개.
접근 가능한 이름 및 설명 제공