thedaviddias 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