Empty Button: What the Error Means and How to Fix It
Also called: Button without text, Button has no accessible name, Unnamed button
Definition
An empty button is a button element with no accessible name – no text, no aria-label and no alt text on an image inside it. Screen readers announce only that it is a button, not what it does.
An empty button is a button that has no accessible name, so a screen reader cannot say what it does. Scanners report it as "Empty button" or "Button has no accessible name". The usual suspects are icon-only buttons: the search magnifier, the hamburger menu, the close "×" in a pop-up and the arrows of a slider.
What it means
Sighted users read a button's purpose from its icon. A screen reader needs text. Without a name it announces just "button", and the user has to press it to find out what happens – which could be "delete" as easily as "next". Voice control users have the same problem: they cannot say "click search" if the button has no name to match.
WCAG 4.1.2 Name, Role, Value is a Level A criterion of WCAG 2.2. It requires that the name and role of every user interface component can be programmatically determined. A native <button> already has the right role – it only fails when it has no name. W3C lists this as failure F68: a control without a programmatically determined name. Names can be visible or invisible, but W3C notes that in many cases the visible label and the name should be the same.
| Button content | Name source | Result |
|---|---|---|
<button>Search</button> |
Text inside the button | Passes |
Icon + aria-label="Search" |
aria-label | Passes |
<img alt="Search"> inside |
Alt text of the image | Passes |
| Icon only, no label | – | Empty button |
<img> without alt, or alt="" |
– | Empty button |
Examples
<!-- Empty button: icon only -->
<button class="close"><svg aria-hidden="true">…</svg></button>
<!-- Fixed: accessible name with aria-label -->
<button class="close" aria-label="Close dialog"><svg aria-hidden="true">…</svg></button>
<!-- Fixed: image with alt text -->
<button type="submit"><img src="search.svg" alt="Search"></button>Images used as button content need a text alternative, so a missing alt attribute on that image creates an empty button too.
Name the action in one or two words: "Search", "Open menu", "Close dialog", "Next slide". Hide decorative icons inside a named button with aria-hidden="true".
Use a div or span styled as a button without role and name, rely on a tooltip or title only, or label every icon button the same ("button", "icon").
How to fix an empty button
Theme widgets and page builders often produce empty buttons. If you use Shopify, check cart, search and slider controls first.
Questions
What is an empty button?
A button without an accessible name. Screen readers announce "button" but not what the button does.
Is aria-label enough to fix an empty button?
Yes, for icon-only buttons aria-label is a sufficient technique (ARIA14). If the button shows visible text, the name should contain that text, so speech users can say what they see.
Does a title attribute count as a button name?
Browsers can use title as a last-resort name, but it is not a good fix: it does not show on touch devices or for keyboard users. Prefer aria-label or visible text.
How do I find empty buttons on my site?
Run the free WCAG scanner on your homepage. It flags empty buttons along with related issues such as a missing form label.
Can allyWay fix empty buttons automatically?
Yes. allyWay detects unnamed buttons across your site and gives them clear names that screen readers can read aloud, written by AI from your page content. The automatic fixes are applied by the allyWay script – no changes to your theme or code – and you can change back any fix in one click. Start for free and see which buttons allyWay names on your site.
Related terms
Empty Link: What the Error Means and How to Fix It
An empty link is a link element that has no accessible name – no text, no alt text on an image inside it and no aria-label. Screen readers can only announce it as a bare link, so users cannot tell where it leads.
Read definition: Empty Link: What the Error Means and How to Fix ItMissing Form Label: Error Explained and Fixed
A missing form label means an input field, checkbox, select or textarea has no programmatically associated label or other accessible name. Screen readers announce only the field type, so users do not know what to enter.
Read definition: Missing Form Label: Error Explained and FixedMissing Alt Attribute: Error Explained and Fixed
A missing alt attribute means an img element (or an image button or image map area) has no alt attribute at all. Assistive technology cannot tell whether the image is informative or decorative and may read out the file name instead.
Read definition: Missing Alt Attribute: Error Explained and Fixed