문제
모바일 iOS VoiceOver에서 발생하는 문제이다.
a태그 사이즈 만큼 가상 초점이 생기는게 아니라, 실제 사이즈와는 다르게 생기는 문제이다.
button 태그에서는 발생하지 않는다.
Screen Reader 지원
| 방식 | VoiceOver | TalkBack |
|---|---|---|
| 1. 기본 - 하위 요소가 1개인 경우 | X | O |
| 2. 기본 - 하위 요소가 2개 이상인 경우 | O | X |
| 3. 가상 요소 css 추가 | O | X |
4. 태그 내 추가 |
O | X |
5. aria-label 추가 |
O | O |
6. aria-labelledby 추가 |
O | O |
VoiceOver와 TalkBack을 비교해보니 문제가 생겼다.
VoiceOver에서의 가상 초점 문제를 해결하려고 하니 TalkBack에서 a tag 초점 분리 현상 문제가 발생했다.
VoiceOver에서는 a태그 내에 하위 요소가 1개만 포함 된 경우 가상 초점 문제가 발생하며,
TalkBack에서 a태그 내에 하위 요소가 2개 이상인 경우에 초점 분리 현상 문제가 발생했다.
view
html
1. 기본 - 하위 요소가 1개인 경우
1
2
<a href="#">버튼1</a>
<a href="#"><span class="sr-only">버튼1</span></a>
2. 기본 - 하위 요소가 2개 이상인 경우
1
2
<a href="#"><span>더보기<span>버튼</a>
<a href="#">더보기<span class="sr-only">버튼</span></a>
3. 가상 요소 css 추가
가상 요소(before, after)에 \00a0 (non-breaking-space로 빈공백 유니코드) 추가하여 처리
1
2
<a href="#" class="button">버튼</a>
<a href="#" class="button"><span class="sr-only">버튼</span></a>
1
2
3
4
.button::before {
font-size: 0;
content: "\00a0";
}
4. 태그 내 추가
a태그 하위 요소에 1개의 태그가 있을 경우 를 해당 위치에 추가
1
<a href="#"><span class="sr-only">버튼</span> </a>
5. aria-label 추가
1
<a href="#" aria-label="버튼"></a>
6. aria-labelledby 추가
1
2
3
<a href="#" aria-labelledby="button">
<span aria-hidden="true" id="button">버튼</span>
</a>