# Empty Button: What the Error Means and How to Fix It

Source: https://allyway.ai/glossary/empty-button

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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) is a Level A criterion of [WCAG 2.2](https://allyway.ai/regulations/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** |

> **Note:** > **The same error, a different element**
> An [empty link](https://allyway.ai/glossary/empty-link) and an empty button have the same cause and the same fix. The difference: links take you somewhere, buttons do something on the page.

## Examples

```html title="Example"
<!-- 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](https://allyway.ai/glossary/missing-alt-attribute) on that image creates an empty button too.

**Do:** Do

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"`.

**Don't:** Don't

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](https://allyway.ai/integrations/shopify-accessibility-integration), check cart, search and slider controls first.

## Questions

Q: What is an empty button?
A: A button without an accessible name. Screen readers announce "button" but not what the button does.

Q: Is aria-label enough to fix an empty button?
A: 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.

Q: Does a title attribute count as a button name?
A: 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.

Q: How do I find empty buttons on my site?
A: Run the [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) on your homepage. It flags empty buttons along with related issues such as a [missing form label](https://allyway.ai/glossary/missing-form-label).

Q: Can allyWay fix empty buttons automatically?
A: 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](https://allyway.ai/automatic-accessibility-fixes-for-website) 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](https://app.allyway.ai/register) and see which buttons allyWay names on your site.