Elements with role="text" must not contain focusable or interactive content
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
Role 'text' hides semantics — never put interactive elements inside it.
Why this matters and how to fix it
Why this matters
The `role="text"` causes assistive technologies to treat the content as plain text and ignore semantic meaning. Placing links, buttons, or other interactive elements inside removes them from the accessibility tree, making them unusable for screen reader and keyboard users.
How to fix this issue
Use `role="text"` only for small inline spans intended as plain text within a widget. Do not include links, buttons, or other interactive content inside. Move interactive elements outside or remove the role entirely.
Developer guidance
This role should be limited to advanced widget scenarios (e.g., part of a styled button label). Avoid using it on general UI elements or layout containers. Verify the accessibility tree to ensure interactive elements remain exposed.
Code examples
Incorrect Implementation
<span role="text">Click <a href="#">here</a></span>Correct Implementation
<span>Click <a href="#">here</a></span>Real-World Examples
Before
<div role="text">Visit our <button>Subscribe</button> now!</div> <!-- Button removed from accessibility tree -->After
<div>Visit our <button>Subscribe</button> now!</div> <!-- Button fully accessible -->Manual testing
- 1. Inspect elements with `role="text"`.
- 2. Verify that no interactive content (links, buttons, form controls) is inside.
- 3. If interactive elements are found, move them outside or remove the role.
- 4. Use a screen reader or accessibility tree tool to confirm interactive elements are accessible.
- 5. Re-test after changes to ensure proper accessibility tree exposure.
Trusted by organizations across Europe working toward WCAG and EAA conformance