문제
모바일 iOS VoiceOver 와 안드로이드 TalkBack 에서 발생하는 문제이다.
a태그 안에 내용이 여러개의 태그로 이루어진 경우, 초점 분리 현상이 일어나는 경우가 생기게 된다.
VoiceOver에서는 a태그 안에 요소들을 하나의 내용으로 매끄럽게 읽어주는 것이 아니라 나뉘어서 읽어주며,
TalkBack에서는 a태그의 내용을 읽어준 이후에 중복으로 내용을 나뉘어서 읽어주었다.
예를 들어 쇼핑몰에서 상품 아이템에 대한 정보들을 하나의 a태그로 감싸는 경우이다.
Screen Reader 지원
| 방식 | VoiceOver | TalkBack |
|---|---|---|
| 1. a태그 안에 block 태그 사용 | X | X |
| 2. a태그 안에 inline 태그 사용 | O | X |
3. block 태그를 사용한 경우 role="text" 추가 |
O | X |
4. aria-label 추가 |
O | X |
5. aria-label 및 aria-hidden 추가 |
O | O |
6. aria-labelledby 및 aria-hidden 추가 |
O | O |
VoiceOver에서는 a태그 안에 black 태그를 사용하지 않거나, role="text" 를 추가하는 방식으로 해결 할 수 있었지만,
TalkBack에서는 aria-label 또는 aria-labelledby를 사용해야 하며,
aria-hidden을 추가하지 않으면 중복으로 읽어주게 되며 초점 분리 현상이 해결되지 않았다.
view
html
1. a태그 안에 block 태그 사용
1
2
3
4
5
<a href="#">
<div>플래그</div>
<div>상품명</div>
<div>가격</div>
</a>
2. a태그 안에 inline 태그 사용
1
2
3
4
5
<a href="#">
<span>플래그</span>
<span>상품명</span>
<span>가격</span>
</a>
3. block 태그를 사용한 경우 role="text" 추가
1
2
3
4
5
<a href="#">
<div role="text">플래그</div>
<div role="text">상품명</div>
<div role="text">가격</div>
</a>
4. aria-label 추가
1
2
3
4
5
<a href="#" aria-label="플래그 상품명 가격">
<span>플래그</span>
<span>상품명</span>
<span>가격</span>
</a>
5. aria-label 및 aria-hidden 추가
1
2
3
4
5
6
7
<a href="#" aria-label="플래그 상품명 가격">
<div aria-hidden="true">
<span>플래그</span>
<span>상품명</span>
<span>가격</span>
</div>
</a>
6. aria-labelledby 및 aria-hidden 추가
1
2
3
4
5
6
7
<a href="#" aria-labelledby="sample">
<div id="sample" aria-hidden="true">
<span>플래그</span>
<span>상품명</span>
<span>가격</span>
</div>
</a>