문제
iOS VoiceOver에서 발생하는 문제이다.
문장안에 태그가 포함되어 있는 경우 하나의 문장으로 매끄럽게 읽어 주는 것이 아니라 끊기는 형태로 나눠서 읽어준다.
검색해보니 애플에서는 이와 같은 현상을 알고 있으며, 기능이라고 생각한다는 글이 있다.
1
2
3
<p>하나의 문장으로 읽어줍니다</p>
<p>하나의 <span>문장으로</span> 읽어주지 않습니다.</p>
view
해결 방법
해당 태그에 role="text"를 추가하는 방법이 있으나, role="text"는 w3c Role Attribute에는 포함되지 않는다.
하지만 iOS VoiceOver에서 읽기 문제를 해결하는데 사용되며, NVDA나 Sense Reader, TalkBack에서는 인식되지 않는다.
1
2
3
<p>하나의 문장으로 읽어줍니다</p>
<p role="text">하나의 <span>문장으로</span> 읽어줍니다.</p>
주의
role="text"를 사용하게 되면 원래의 의미가 사라지고, 일반 텍스트로 처리한다.
예를 들어 헤딩 태그나 링크 태그 등에 사용 했을 경우, 원래의 의미를 잃게된다.
그렇기 때문에 사용할 경우 주의해야 한다.
1
2
3
<h1 role="text">헤딩으로 인식되지 않습니다.</h1>
<a href="#" role="text">링크로 인식되지 않습니다</a>