Best practices

Buttons without accessible names: the number one flaw detected by scanners

Icon buttons without accessible names (search, cart, close, hamburger menu) are the most common issue identified by accessibility audits. For a screen reader user, they only hear “button” without any context. Discover the four techniques to fix them.

Figures, methodology and reuse terms: see the citable data →

The short answer

An SVG icon button or image without an aria-label, aria-labelledby attribute, or visible text remains invisible to a screen reader. The user only hears “button.” To fix this: add an aria-label for a short label, use visible text if space allows, or use aria-labelledby to link to existing text. Check with F12: the Accessibility tab should display the button’s name.

Why this defect is critical

Buttons without an accessible name are among the most common WCAG violations in the United States, according to public data from compliance firms. The dedicated W3C rule ("Image button has non-empty accessible name") applies everywhere: a search magnifying glass, a shopping cart, a close button, a carousel chevron, a social media icon, all require an audible name.

This article is based on the Inclaria 2026 study: among the 55 French e-commerce sites analyzed, 94.5% had at least one critical or serious non-compliance issue. Poorly named icon buttons rank first in detected occurrences, often appearing across multiple pages of the same site.

What a screen reader user hears

Put yourself in the shoes of someone navigating without seeing the screen. When they reach a search button without an accessible name, their screen reader simply announces “Button”, then stops. No context, no indication of the action. They must exit the screen reader, open the browser inspector, or refer to external documentation to understand what it is.

The same scenario applies to a shopping cart presented as a lone SVG icon, a modal close button marked only by an X, or chevrons for navigating a carousel. Each silent button creates an area of uncertainty for the user. On a site with 15 or 20 poorly named icon buttons, the friction builds up quickly: some users give up.

The four techniques for naming a button

1. Visible text with hidden visibility (sr-only)

Add a span element with the sr-only class containing the label. Invisible on the screen, audible for screen readers.

Code

Button containing an SVG magnifying glass icon and a span element with the « sr-only » class and the text « Search ».

Advantage: the text is also in the DOM, so technically crawlable by a search engine. Disadvantage: assumes an sr-only CSS class is defined in your stylesheet.

2. aria-label

Direct attribute on the button: aria-label=« Search ». Short, easy, and does not affect the visual DOM.

Advantage: minimalist, quick to add. Disadvantage: absent from visible text, thus invisible to copy-paste and text-based SEO.

3. aria-labelledby

Links the button to another textual element in the DOM via an identifier: aria-labelledby=« search-label ». Ideal when relevant text already exists on the page.

Advantage: references real content, traceable. Disadvantage: requires the source text to exist and have a unique id.

4. alt attribute on input type=image

If you use an input of type image with the source « search.png » and the alternative text « Search », the alt attribute serves directly as the accessible name.

Advantage: native semantics. Disadvantage: outdated solution in modern HTML, rarely recommended.

When to use each? Decision matrix

Common Pitfalls

The title attribute is not enough

Many developers mistakenly believe that the title attribute, such as title=« Search », on a button is sufficient to name it. In reality, title is a hover advisory attribute (tooltip), not an accessible name. Screen readers ignore it, except in very limited cases. Do not rely on it.

aria-label in a foreign language

If your content mixes languages, be careful: aria-label always uses the page’s language. An aria-label=« Search » on a French website will be read in French by the screen reader. Prefer visible text or ensure that aria-label respects the local language.

The 2.5.3 pitfall: « Label in Name »

A subtle trap: if a button has visible text (e.g., « OK »), its aria-label must start with or contain that same text. A button displaying « OK » with aria-label=« Confirm » creates an inconsistency that voice command users (« click OK ») cannot trigger. Align the accessible name with the visible text.

SVG without an appropriate role

A standalone SVG is just an image. Always nest it within a semantic element (button, a) or add role=« button ». Without this, the screen reader may ignore it or announce it as an image.

How to check in two minutes

Open your page in any modern browser (Chrome, Firefox, Safari).

• Press F12 (or right-click, then Inspect).
• Locate the icon button in the HTML.
• Open the Accessibility tab (Chrome, Edge, Firefox).
• Check the Accessible Name field: it should display clear text (e.g. “Search”, “Cart”). If it’s empty or says “button”, a name is missing.

Alternatively: navigate using the keyboard (Tab) to the button, then test with a free screen reader.

Keyboard and screen reader test

On Windows, NVDA (free, open source) is reliable. On Mac, VoiceOver comes preinstalled (Cmd+F5). Navigate your site: every icon button should announce its name clearly. If you only hear “button”, fix it.

Practical examples: search magnifier, shopping cart, close button, carousel chevrons

Loupe de recherche

A button with aria-label="Search" containing an SVG icon is the standard approach. Short and clear. If you use hidden text: use a button containing the SVG icon and a span element with the class "sr-only" and the text "Search".

Panier d'achat

Prefer aria-label="Cart" or aria-label="View cart (2 items)". An item count can enrich the context without overloading the announcement.

Croix de fermeture

A button with aria-label="Close" containing an SVG cross icon is classic. Simple text, no jargon.

Chevrons de carrousel

Buttons with aria-label="Next item" and aria-label="Previous item" guide the user. Avoid generic labels like "Next" or "Previous" alone; specify: "Previous carousel slide".

Social media icons

A link with aria-label="Follow us on X (Twitter)" or a button with aria-label="Share on LinkedIn" makes the target network explicit.

Integration into your compliance approach

Buttons without an accessible name are the number one default detected by automated scans. If you conduct an accessibility audit on your site, this violation will almost certainly appear, often with dozens of occurrences.

The good news: it’s easy and quick to fix. Once you grasp the pattern, you can audit your codebase, fix icon buttons in a few hours, and measure the impact: a significant portion of your accessibility score improves immediately.

An effective strategy: run an automated scan (Inclaria, aXe, WAVE), sort the results by severity, and start with buttons without an accessible name. This alone removes a significant share of critical non-conformities on many sites. Then, progress toward manual testing and structural issues (keyboard navigation, tab order, contrasts).