WAI-ARIA정리

스크린 리더 사용자가 브라우저를 읽을 때 각 요소의 역활을 알 수 있도록 도와주는 기술이다. p태그나 a태그와 같은 태그들은 태그의 이름으로 어떤 역활을 하고 있는지 알 수 있다. 하지만 div나 span태그는 태그만 봐서는 무슨 역활을 하고 있는지 알 수 없다. 그리고 ul태그와 같은 경우 리스트로 주로 사용하지만 탭으로 만드는 경우가 있는데 이런 상황에도 탭 역활을 하고 있다고 표시해 줄 필요가 있다.

방법

역활을 알려주는 role과 이름표 같이 설명해주는 aria-label이 있다.

role

우선 role로 태그의 속성을 설명할 수 있다.
role에는 적을 수 있는 속성이 제한되어 있다.

button
scrollbar
tab
banner
textbar
...
등

그 외는 mdn에서 참고
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

aria-label

aria-label은 role과 달리 값이 정해져 있지 않다.
수량을 조절 하는 버튼을 만든다면 role=button과 함께 aria-label = "수량 추가" 라고 이름표처럼 붙여서 사용할 수 있다.

참고

• aria-label은 모든 태그에 사용할 수 없다. 시멘트 태그가 아닌 div나 span같이 의미가 없는 태그인 경우에 role이 붙어있지 않으면 마음대로 사용하면 안된다.