Why can't this element have aria-label?

aria-prohibited-attr page

The issue

An aria-label on an element whose role can’t be named is text that some screen reader users hear and others don’t. The ARIA specification prohibits naming these roles, so browsers and screen readers handle the label inconsistently: it may be ignored, or read in place of the content.

The cause is usually a label added to the wrong element, such as an icon’s description put on a plain <span>, or on an image that has been marked decorative.

Scope

Each visible element whose role prohibits an attribute is checked. The role can be explicit or, for an <img alt="">, the implied presentation role. Probeo checks these roles:

Role	Prohibited
`generic`	`aria-label`, `aria-labelledby`, `aria-roledescription`
`none`, `presentation`	`aria-label`, `aria-labelledby`
`caption`, `code`, `definition`, `deletion`, `emphasis`, `insertion`, `paragraph`, `strong`, `subscript`, `superscript`	`aria-label`, `aria-labelledby`

How to check you have it

In probeo: the page reports the aria-prohibited-attr rule, “Elements must only use permitted ARIA attributes”, with serious impact, naming the role and the prohibited attributes. It maps to WCAG 4.1.2, Name, Role, Value.
By hand: find each aria-label and aria-labelledby in the source and check the element’s role: a decorative image (alt=""), or an element with one of the roles above, can’t carry one.
With a tool: axe DevTools reports the same rule id. The browser’s accessibility tree shows whether the label became the element’s name.

The fix

Move the name to an element that can carry one, or make the text visible.

If the element is decorative, it needs no name: remove the attribute. If it carries meaning, give it a role that can be named, or put the name on the interactive element around it, such as the button or link. Text that should be read can often simply be visible text, or visually hidden text inside the element.

<!-- Before: decorative image with a label -->
<img src="check.svg" alt="" aria-label="Verified">

<!-- After: the image carries the meaning itself -->
<img src="check.svg" alt="Verified">

Done when: no element carries an attribute its role prohibits, and the check above comes back clean.

Do not

Do not put aria-label on a <span> or <div> to describe it; those have no role that can be named.
Do not mark an image decorative and label it at the same time.

FAQ

Why does a plain div get flagged only sometimes?

A <div> with no role isn’t checked here. It is flagged when it is given one of the roles above, such as role="generic" or role="presentation".

What about aria-describedby or aria-hidden?

They aren’t prohibited on these roles, and probeo doesn’t flag them here.

Often. Text inside the element is read by every screen reader, is translated with the page, and stays in sync with the content.

Which product detects this

Probeo checks this on every page of your site as part of Site Clarity. This page explains one instance; the product tells you every page that has it.