Labels need an element whose role allows a name

• Rule: axe/aria-prohibited-attr
• Checks: Elements must only use permitted ARIA attributes
• WCAG: 4.1.2
• Fix class: mechanical: A fix needs no authored text or visual decision.

Who it affects

• People who use a screen reader or a braille display, most of them blind.

How to fix it

An icon <span>, <i> or <div> with no role has aria-label

If the icon carries meaning, add role="img" so the label is allowed and read. If it repeats nearby text or is decoration, remove aria-label and add aria-hidden="true".

<span class="icon icon-error" role="img" aria-label="Error"></span>

A <div>, <span> or <p> with text has aria-label or aria-labelledby, so axe asks for review

Screen readers handle a name on these elements inconsistently: some read the name, some the text. Remove the label and put the words in the text itself. If the element is a section people should find, use a named landmark or role="group", which take a name.

The element has a role that forbids a name, such as role="none", role="presentation" or role="paragraph"

Remove aria-label and aria-labelledby. If the element does need a name, give it a role that takes one, or use an element that does, such as a <table> with a <caption>.

Fixes that fail

Adding role="img" to an element that holds controls or text people need to read

An image role makes its contents presentational, so screen reader users hear only its name and cannot reach the controls or text inside.

Adding role="region" just so the label is allowed

A named region is a landmark, listed among the page’s main areas. Turning small boxes into landmarks clutters the list people use to move around the page.

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.