Ensures role="text" is used on elements with no focusable descendants
Accessibility testing for dev teams - No experience required
Compliance Data & Impact
How to Fix the Problem
Correct markup solutions
The role="text" attribute should be put on an element with no
focusable descendants.
<h1><span role="text">Hello <br/>World</span></h1>Incorrect markup solutions
<span role="text">
<a href="/site.html">Not announced as link</a>
</span>
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.
Rule Description
Elements with role="text" must not have focusable descendants.
The Algorithm (in simple terms)
Checks all elements with role="text" to ensure that they do not
have focusable descendants.
Resources
Deque University Course Pages (subscription required)
No related course information available.
Was this information helpful?
Your response was as follows:
Date/Time feedback was submitted: