ARIA attribute is not allowed here

Why does it matter?

WCAG 4.1.2 asks that a control's name, role and state reach assistive technology; WAI-ARIA does not allow this attribute on this kind of element, so many screen readers ignore it. Fine if the element's visible text already says the same thing.

Who it affects: Screen reader and keyboard users, who depend on ARIA and focus order being correct to understand and operate the page.

What does Lumtera flag?

An ARIA attribute on an element whose role does not allow it. For review: it is fine if the visible text already says the same thing.

Check ID aria-attr-not-allowed — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Remove the attribute, or give the element a role that allows it. To name an icon, use role="img" with aria-label, or visually hidden text. For a state, make sure the element has the right role, for example role="switch" for aria-checked.

Example

<span aria-label="Rated 4 out of 5">★★★★</span>

<span role="img" aria-label="Rated 4 out of 5">★★★★</span>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Press Tab from the top of the page. Focus should move in reading order and never land on something invisible or silent.