접근성 태그에 따른 실제 읽어주는 멘트 정리

접근성 관련해서 작업을 하는데 여건 까다로운게 아님. 난 그냥 단순하게 숨겨진 텍스트 같은걸로 표시해주면 되는줄 알았는데, 정작 스크린리더로 읽을 때를 적용하다보니 포커스 작업이 굉장히 중요하다는걸 알게됨.

 

게다가 pc랑 mobile에서 작업할 때도 다른게, pc는 tab키를 눌러서 움직이고, <p>태그는 포커스가 안가고, 포커스 없는 태그한테 포커스를 주려면 tabindex="0"을 적용하면 되는데, mobile은 스와이프로 움직이고, <p>태그는 읽고, tabindex는 통하지 않음ㅜ

 

1. 읽는 기준 (아이폰 기준)

<!-- "봄" -->
<p>봄</p>

<!-- "여름" ===> (tabindex 상관없음) -->
<p tabindex="0">여름</p>

<!-- "가을" ===> (tabindex 상관없음) -->
<p tabindex="-1">가을</p>


<!-- 여기서 .hidden태그는 접근성 처리용으로 흔히 쓰는 숨겨진 텍스트. -->


<!-- "숨겨진 텍스트, 겨울" ===> 스와이프 2번 해야함 -->
<p><span class="hidden">숨겨진 텍스트</span>겨울</p>

<!-- "겨울" -->
<p><span aria-hidden="true">숨겨진 텍스트</span>겨울</p>

<!-- "숨겨진 텍스트 기상청" ===> 한번에 읽음 -->
<p role="text"><span class="hidden">숨겨진 텍스트</span>기상청</p>

<!-- "날씨가 좋다" -->
<p role="text" aria-label="날씨가 좋다">날씨가 나쁘다</p>

결론은 제일 마지막 방법인 role과 aria-label을 활용하는 것이 제일 좋은 듯 하다.

 

실제로 개발하면

<p>1/203</p>

라고 코드는 쓰는데,

스크린리더로는

"203페이지 중 1페이지"

라고 읽어줬으면 하는 경우가 대부분이기때문에

 

<p role="text" aria-label="읽어주었으면 하는 내용">화면에 보이는 내용</p>

으로 쓰면 될듯함.

 

※ role을 굳이 쓰는 이유는 안써주면 aria-label을 안읽는 경우가 있음.

※ role="button" 등 다른 role을 써도 읽어주긴하는데 마지막에 "버튼"이라고 말해버리는 경우가 있음.