[HTML] WAI-ARIA란? 스크린 리더에서 읽히고 싶지 않은 문자 숨기기

🌎 WAI-ARIA란?

WAI(Web Accessibility Initiative)

: W3C에서 웹 접근성을 담당하는 조직

ARIA(Accessible Rich Internet Applications)

:접근가능한 리치 인터넷 어플리케이션(ARIA)은 장애를 가진 사용자가 웹 콘텐츠와 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성을 말한다.

 

ARIA는 HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공한다.

 

+ 툴팁(tooltip) = 공통 그래픽 사용자 인터페이스 요소. 마우스 포인터라 불리는 커서와 함께 동작. 사용자가 커서로 항목을 클릭하지 않고 가리키기만 했을 때 조그마한 상자가 항목 위에 나타나 보충 설명을 보여준다.

 

홈페이지에서 사용하고 있는 툴팁은 다음과 같은 2가지 경우가 있다.

1. 화면 공간이 좁아 소스 상으로는 텍스트가 있지만 말줄임으로 표현한 경우

2. 약어를 이해하기 쉽도록 보여주는 설명하는 경우

 

스크린리더에서 읽히고 싶지 않은 툴팁은 aria-hidden="true" 해주면 된다.

 

아래와 같이 굳이 읽지 않아도 되는 텍스트도 처리해줌으로 스크린리더가 읽지 않고 넘어가게 되어 사용자의 혼란을 방지할 수 있다.

<span aria-hidden="true"> | </span>

 

 

참고 사이트

https://aoa.gitbook.io/skymimo/aoa-2019/2019-aria/tooltips

https://m.blog.naver.com/dbswldud9549/221795229343

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

ARIA - 접근성 | MDN

 

읽어보면 좋은 사이트

https://w3c.github.io/using-aria/

Using ARIA

 

 

 

🙂 공부하며 정리하는 글입니다. 공감과 피드백 환영합니다.