Ensures "role=text" is used on elements with no focusable descendants
How to Fix the Problem
Correct markup solutions
role="text" attribute should be put on an element with no focusable descendants.
<div role="section"> <a href="/site.html">Announced as link</a> </div>
Incorrect markup solutions
<div role="text"> <a href="/site.html">Not announced as link</a> </div>
Why it Matters
When a text node is split by markup (e.g.
<h1>Hello <span>World</span></h1>) VoiceOver will treat it as two separate phrases instead of just one. Adding
role="text" around the elements solves the problem. However, it also overrides the role of the element and all descendants and treats them all as text nodes. If one of the descendant elements is also focusable it would create an empty tab stop. That is, you could tab to the element but VoiceOver would not announce its name, role, or value.
role="text" must not have focusable descendants.
The Algorithm (in simple terms)
Checks all elements with
role="text" to ensure that they do not contain focusable content, including content hidden with