Who this affects
These buttons have no accessible name, so a screen reader announces them only as "button". Users relying on assistive technology cannot tell what each control does before activating it. Icon-only controls — carousel arrows, close buttons, cart and search icons — are the usual cause.
How to fix it
Add aria-label to the button, or include visually-hidden text inside it. Check the listed elements: the right label depends on what each control does.
Effort Low · ~10 min per button
Before and after
Fails
<button class="carousel-next">
<svg><use href="#arrow-right"></use></svg>
</button>Passes
<button class="carousel-next" aria-label="Next product">
<svg aria-hidden="true"><use href="#arrow-right"></use></svg>
</button>Where this sits in the standard
| WCAG success criterion | Level | EN 301 549 clause |
|---|---|---|
| 4.1.2 Name, Role, Value | A | 301-549, 9.4.1.2 |
EN 301 549 clause 9 applies these criteria to web content. The published version referenced by the European Accessibility Act is V3.2.1, which incorporates WCAG 2.1 level A and AA. More on the standard.
How to check it by hand
Tab to the control and listen to what a screen reader announces. It should say what the control is and what it does. "Button" on its own is a failure.
Automated testing settles roughly a third of the WCAG success criteria. This rule is one an automated tool detects reliably — but a clean automated result is not proof of conformance.
Reference
Deque's technical write-up for this rule: button-name
See whether your site trips this rule
Paste a URL. We open it in a real browser, dismiss the cookie wall and run the full EN 301 549 rule set. No account, no card.