How do I name an icon-only button?

Give the button an aria-label that describes what it does, such as aria-label="Close" or aria-label="Open menu", and mark the icon inside it aria-hidden="true" so it is not announced separately. For an input image button, use the alt attribute; for an input button, use the value attribute. The name should describe the action, not the icon.

Does a button with no text fail WCAG?

Yes. A button with no accessible name fails Success Criterion 4.1.2 Name, Role, Value at Level A, the most basic conformance level. An automated scanner reliably finds buttons with no name, because it is a fact about the markup. Whether the name you give is clear enough is a smaller, usually obvious judgment a person confirms.

Should an icon be a button or a link?

Use a button when the control performs an action on the page - opening a menu, closing a dialog, playing a video, submitting a form. Use a link when it navigates to another page or location. Both need an accessible name, but picking the right element also gives screen reader and keyboard users the correct expectation of what will happen.

Buttons Without Discernible Text: What It Means and How to Fix It

By Site Brace Research · Published June 15, 2026

"Buttons must have discernible text" means a button has nothing a screen reader can read, so the user hears "button" and has no idea what it does. It is nearly always an icon-only button - a hamburger menu, a search magnifier, the X that closes a dialog, a play button - built with just an icon and no label. WCAG Success Criterion 4.1.2 (Level A) requires every button to have a non-empty accessible name. We found unnamed buttons on 20 of the 299 large US home pages we scanned, most often on nonprofit and law firm sites. The fix is a short aria-label describing the action.

A button is a verb. Close, open, search, play, submit: each does something, and the name is how a screen reader user knows which. When the button is only an icon, sighted users read the little picture and a screen reader user gets nothing - the control is there, focusable, clickable, and silent. This is the close cousin of links without discernible text, with one difference worth keeping straight: a link goes somewhere, a button does something, and the right markup follows from that.

What "discernible text" means for a button

A button's accessible name is what assistive technology announces when focus lands on it. It can come from:

the text inside the <button> ("Submit"),
an aria-label on the button, for an icon-only control,
an aria-labelledby pointing at visible text elsewhere,
or, for input buttons, the value attribute (<input type="submit" value="Search">) or alt (<input type="image" alt="Search">).

WCAG covers this at Success Criterion 4.1.2 Name, Role, Value, Level A, which requires that the name of every user interface component can be programmatically determined. The automated button-name rule maps straight to it: a button with none of the above has no name, and fails.

Who this shuts out

Screen reader users, who hear "button" with no purpose and have to guess, or skip it. A close button they cannot find is a dialog they cannot dismiss.
Voice-control users, who operate the page by speaking a control's name ("click Search"). An unnamed button cannot be spoken to, so it cannot be operated hands-free.

How common is it?

In our State of Web Accessibility 2026 study of 299 large US home pages, 20 (7%) had at least one button with no discernible text. It was most common on nonprofit sites (7 of 43, 16%) and law firm sites (6 of 46, 13%). The repeat offenders are the same few icon buttons on almost every site:

the hamburger that opens the mobile menu,
the search magnifier,
the X that closes a dialog, banner, or cookie notice,
play and pause on a hero video,
and icon-only submit buttons on a search or signup form.

<!-- Unnamed: a screen reader announces only "button" -->
<button><svg>...</svg></button>

<!-- Fixed: announced as "Close, button" -->
<button aria-label="Close">
  <svg aria-hidden="true">...</svg>
</button>

How to fix it

Find the unnamed buttons. Run a scan or use axe DevTools to list every button with no discernible text.
Add an aria-label for the action - aria-label="Search", "Close", "Open menu". Name what it does.
Hide the icon with aria-hidden="true" on the inner SVG so it is not announced separately.
Handle input buttons - value for <input type="submit">, alt for <input type="image">.
Confirm it is the right element - a button for actions, a link for navigation.
Listen. Move a screen reader to each button and confirm it announces a clear action, then re-scan.

As with the other failures, skip any "overlay" widget that claims to label your controls automatically - it guesses, and the Federal Trade Commission fined the overlay vendor accessiBe one million dollars in 2025 over its claims. A button label is a few characters you write once. We explain why overlays fall short in detail.

What a scan can and cannot tell you

This is reliably caught: a button with no accessible name is a fact about the markup, so a scanner finds it and points at the element. The judgment left to a person is small - confirming the label you wrote ("Close", "Search") matches the action, which it usually plainly does. We report the automated slice; the quick human confirmation is part of a full audit.

Common questions

What does "buttons must have discernible text" mean? A button with no text a screen reader can announce - almost always an icon-only button.

How do I name an icon button? Add an aria-label for the action and aria-hidden="true" on the icon.

Does it fail WCAG? A button with no name fails 4.1.2 (Level A).

Button or link? Button for an action, link for navigation - both need a name.

Check your own site

Run a free check on your home page to see every button with no discernible text, with the markup to fix, in about a minute. For the whole site, see what a full audit covers, and how monitoring catches the icon buttons that ship unnamed whenever a new component lands. For the data behind this page, read the State of Web Accessibility 2026; its closest companion is links without discernible text.