Page Title: ARIA Text Role – Avoid Focusable Descendants

• June 1, 2025

Page Title: ARIA Text Role – Avoid Focusable Descendants

Rule ID: aria-text
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: Deque Best Practice

How to Fix the Problem

If you use the role="text" attribute to ensure screen readers treat visually split but semantically unified text (e.g., <h1>Hello <span>World</span></h1>) as a single phrase, ensure that none of the descendant elements inside the role="text" container are focusable.

Focusable elements inside a role="text" region can cause major accessibility issues. For example, if an element like a link (<a>) or a button is placed inside a container with role="text", it may still be reachable via keyboard navigation (like the Tab key), but screen readers (especially VoiceOver) will not be able to announce it correctly. This creates a confusing and incomplete experience for users relying on assistive technology.

To fix this:

• Avoid placing interactive elements (like links, buttons, form fields) inside any element with role="text".

• Re-structure your HTML if interaction is necessary: use role="text" only where the content is purely textual and doesn’t require interaction.

• If needed, remove role="text" and instead aim for clearer HTML structure or use alternative markup that does not cause screen reader fragmentation.

Bad Example:

Good Example:

Or, if unification is needed:

(as long as no part is focusable)

Why it Matters

Screen readers like VoiceOver interpret DOM structure literally. When text content is visually continuous but split in the DOM (for styling or other reasons), it may be read out as separate phrases. This can confuse users and break the intended communication.

Applying role="text" tells screen readers to treat everything inside as one continuous phrase. However, doing so changes how assistive technologies interpret roles and names. If a focusable element exists inside such a container, the screen reader may skip reading it correctly or create an empty tab stop—meaning the user can tab to it but won’t hear what it is or what it does. This harms both usability and accessibility compliance.

Rule Description

Any element assigned role="text" must not contain descendants that can receive focus (e.g., links, buttons, or any element with tabindex="0" or similar behavior).

The Algorithm (in Simple Terms)

1. Look for elements with role="text".

2. Check if any of their child elements are focusable.

3. If any are found, flag the structure as a violation.