Text roles need to hold only plain text
- Rule:
axe/aria-text - Checks: “role=text” should have no focusable descendants
- WCAG: none; a best practice, not a WCAG success criterion
- Fix class:
mechanical: A fix needs no authored text or visual decision.
Who it affects
Section titled “Who it affects”- People who use a screen reader or a braille display, most of them blind.
How to fix it
Section titled “How to fix it”A link, button or other focusable element sits inside an element with role="text"
Section titled “A link, button or other focusable element sits inside an element with role="text"”Move the focusable element out, or remove role="text". The role exposes everything inside it as one piece of plain text, so a control inside stops being a control for screen reader users.
<p> <span role="text">Now $24<span class="cents">.99</span></span> <a href="/shipping">Shipping costs</a></p>role="text" sits on a whole card or list item to stop a screen reader splitting its text
Section titled “role="text" sits on a whole card or list item to stop a screen reader splitting its text”Narrow the role to the short run of text that splits badly, such as a price built from several elements, and leave controls and structure outside it. Remove the role where the split does not hurt understanding.
Fixes that fail
Section titled “Fixes that fail”Adding tabindex="-1" to the control inside
Section titled “Adding tabindex="-1" to the control inside”axe still fails it: the control leaves the tab order, but screen readers can still move to it, where it reads as plain text.
Adding aria-hidden="true" to the control inside
Section titled “Adding aria-hidden="true" to the control inside”It hides the control from screen readers but leaves it focusable, so keyboard users reach a control nothing announces.
More on the rule
Section titled “More on the rule”axe-core’s documentation of the rule
CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.