이 글은 wai-aria에 대한 이해와 적용하며 발생했던 이슈들을 정리하는 글입니다. Wai-aria에 대한 기본 사용 방법은 이 글 에서 확인하실 수 있습니다.

wai-aria란?

사전적 의미로는 W3C에 의해 제정된 RIA(Rich Internet Applications)의 웹 접근성에 대한 표준 기술 규격 을 의미합니다.

왜 나왔을까?

웹 기술의 발달로 인해 점점 인터렉티브한 웹사이트가 나오게 됐는데 이에 따라 html5 에서 시멘틱 태그와 같이 다양한 의미를 갖고 있는 태그들이 등장하기 시작했습니다.

스크린 리더기 혹은 보조기기를 사용하는 사용자에게도 같은 의미를 전달해줘야 하는데, 그렇다고 새로운 의미마다 태그를 만들 수 없기 때문에 기존 태그들에 role(역할), Properties(속성),States(상태) 를 부여해서 스크린 리더기 및 보조기기 사용자에게도 같은 정보를 제공해줄 수 있도록 해결 했습니다.

적용 사례

팝업 tooltip

image

이런 디자인에 “선호장르를 지정해보세요!” 라는 팝업을 tooltip이라고 생각해서 아래와 같이 역할을 추가해주었습니다.

 <span class="text" role="tooltip" id="wa_select_msg">선호장르를 지정해보세요!</span>

tooltip이면서 동시에 팝업이기 때문에 ` select에 ` haspopup 속성을 추가 해야하는지 찾아봤는데, 공식 문서에 아래와 같이 나와있었습니다.

image

tooltip은 팝업으로 간주되지 않는다고 합니다. 그래서 tooltip으로 처리할지 팝업으로 처리할지는 디자인의도나 상황에 맞게 사용하면 될 것 같습니다.