Rule ID: ace-aria-text-no-focus

Validate that elements with role=”text” do not contain focusable descendant elements

Blind Mobility Best Practice

What This Rule Checks

When the role=”text” attribute is applied, it transforms the element and its children into text nodes. This helps screen readers, like VoiceOver, treat complex nested text as a single phrase. However, if any of the child elements are focusable (e.g., links or buttons), it creates a conflict, making these elements unannounced or causing empty tab stops.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Elements with role=”text” are read as a single string by screen readers. If focusable elements like links are inside, users cannot navigate to or activate them, effectively hiding interactive content.

How to Fix

To ensure that role=”text” is correctly applied and doesn’t interfere with the accessibility of the content:

Avoid Focusable Descendants:

Make sure that no focusable elements, such as links (<a>), buttons, or form controls, are placed inside an element with role=”text”.

Use role=”text” for Grouped Text:

Use this attribute to merge text into a single announcement for screen readers but ensure it is only applied where there are no interactive elements.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- role="text" with focusable descendants -->
<span role="text">
  Price: <a href="/pricing">$9.99/month</a>
</span>

Copy

Correct Markup Solutions:

Code example

<!-- Remove role="text" if descendants are interactive -->
<span>
  Price: <a href="/pricing">$9.99/month</a>
</span>

<!-- Or remove focusable descendants from the text role -->
<span role="text">
  Price: $9.99/month
</span>

<a href="/pricing">View pricing details</a>

Copy

Common Mistakes to Avoid

Wrapping interactive elements inside role=”text” to force a single announcement.
Not realizing that role=”text” prevents users from navigating to links inside it.
Using role=”text” when native text elements would work better.

Tip: Remember the first rule of ARIA: don’t use ARIA if a native HTML element can provide the same semantics. Native elements come with built-in keyboard handling and screen reader support that ARIA cannot replicate.