Avoid focusable descendants in role="text" elements

Using role="text" on a container forces screen readers to treat everything inside as a single string of text, which effectively hides any interactive elements from users who rely on assistive technology.

Quick Reference

• Elements with role="text" should not contain interactive children (links, buttons)
• Ensure role="text" only contains static text content
• Prevent accessibility "black holes" where interactive items are hidden from screen readers

Check

Identify elements with role="text" and verify they do not contain any focusable elements like buttons, links, or inputs.

Fix

Remove role="text" from containers that have interactive children or move the interactive elements outside.

Explain

Explain how role="text" overrides the semantics of descendant elements, making interactive components inaccessible to screen reader users.

Code Review

Review the rendered markup and interactive states that affect Avoid focusable descendants in role="text" elements. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/accessibility/aria-text