role=’text’ should have no focusable descendants

No focusable children are allowed on elements with the role="text" attribute.

When a text node is split by markup (for example, <h1>Good morning, <span>friend</span></h1>) VoiceOver will treat it as two distinct phrases rather than one. Adding role="text" to the elements circumvents the issue.

In addition, it overrides the role of the element and its descendants, treating them as text nodes. If one of the descendant items is also focusable, an empty tab stop will be generated. That is, you might tab to the element but VoiceOver would not announce its name, role, or value.

What this Accessibility Rule Checks

Checks each element with the role="text" attribute to guarantee that none of its children are focusable.

Learn more:

Deque Reference

Deque University - How To Fix

→