Ensures role=text Is Used On Elements with No Focusable Descendants

Yotam Flohr
Researcher
Blind Mobility
WCAG 2.1 Level A

Written and researched for humans by humans

Yotam Flohr
Researcher
Ritvik Shrivastava
Expertly reviewed by
Comments: 0
Your entire domain
Get detailed instructions on how to resolve every accessibility issue on your website

Web accessibility standards require elements with role=”text” to not have focusable descendants.

Why It Matters

When a text node is split by markup, VoiceOver technology will treat it as two separate phrases instead of just one. However, adding role=”text” around the elements solves the problem. 

The knock-on effect is that it also overrides the role of the element and all descendants and treats them all as text nodes. This means a user could tab to the element but VoiceOver would not announce its name, role, or value.

Fixing the Issue

Checks all elements with role=”text” to ensure that they do not have focusable descendants.

Good Code Example

Code example
<h1><span role="text">Hello <br/>World</span></h1> Copy

Bad Code Example

Code example
<span role="text"> <a href="/site.html">Not announced as link</a> </span> Copy