아티클

WAI-ARIA 바르게 사용하기 9부 - aria-roleDescription 이해하기

2020-08-18 11:31:46

안녕하세요. 엔비전스입니다.

오랜만에 WAI-ARIA 바르게 사용하기로 찾아뵙게 되었습니다. 지난 시간에는 자동완성 편집창에 대에 다뤄보았는데요. 이번에는 조금은 생소한 aria-roledescription이라는 속성을 다루고자 합니다.

aria-roledescription은 이름에서 바로 기능을 알 수 있는데요. 바로 요소 역할(role)의 역할을 커스터마이징 하여 전달하는 것입니다. 어떠한 속성인지 알았으니 이제 aria-roledescription을 어떻게 사용하는지, 어디에 사용하는가, 그리고 어떤 곳에 사용하면 안 되는가를 알아보겠습니다.

 

aria-roledescription 소개

<a href="...." aria-roledescription="Banner link"> 가을 난방 30% 할인 </a>

aria-roledescription은 WAI-ARIA 1.1부터 추가된 WAI-ARIA의 속성으로, 이미 정해진 요소의 역할을 더 명확하게 만드는 데 사용합니다. 이미지로 예로 들면 단순한 그래픽이 아니라, "thumbnail graphic"처럼, 무엇에 사용하는 이미지인지 명확히 사용자에게 알려주고자 할 때 사용하는 것이지요.

이 외에는 HTML 5에서 따로 정의하지 않았지만, 익히 알려진 영역이나 위젯의 역할을 안내하고자 할 때 사용합니다.

 

aria-roledescription의 문제점

다음에 나올 카드 목록은 aria-roledescription을 사용하여 만든 커스텀 목록입니다. NVDA나 JAWS를 통해 aria-roledescription을 체험해볼 수 있습니다. 카드 목록에 적힌 내용을 통해 aria-roledescription의 특성과 문제점을 알아봅시다.

 

되도록 사용을 지양해야 한다

aria-roledescription은 위 카드에 작성된 내용처럼 사용자와 개발자에게 많은 이슈가 있습니다.

위 카드 목록에서 3번과 4번의 문제가 가장 치명적인 문제입니다. 이 두 문제를 해결하기 위해서는 서비스에 aria-roledescription을 사용할 때에는 주로 접속할 사용자의 기기, 국가별 언어를 반드시 고려해야 합니다.

4번 카드의 문제는 언어별로 roledescription 텍스트를 다르게 준다면 해결됩니다. 하지만, 3번 카드 항목에서 기기의 호환성을 언급하였는데, Android에서는 aria-roledescription을 제대로 지원하지 않습니다. 따라서 스크린 리더에서 개발자의 의도와 맞지 않게 표준 컨트롤 이름을 읽는 이슈가 있으며, 이로 인해 기기 환경에 따라서 동일한 경험을 줄 수 없게 됩니다.

지금까지 aria-roledescription에 대해 알아보았습니다. 요소 유형 텍스트를 변경한다는 것은 분명히 매력적으로 보입니다. 하지만 사용자와 개발자, 모두 만족하기에는 아직은 많은 아쉬움이 남습니다.

비록 웹 표준과는 맞지 않는 속성이지만, 호환성이 개선되어 널리 사용할 수 있게 되기를 바라면서 글을 마칩니다. 읽어주셔서 감사드리며, 더 유익한 아티클로 찾아뵐 수 있도록 항상 노력하겠습니다.

 

댓글 0
댓글을 작성하려면 해주세요.