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

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