# Icon Button: How to Give It an Accessible Name

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

An icon button is a button that shows only a symbol – a magnifier, a cross, three lines – and no visible text. To be accessible it needs an accessible name in code that tells assistive technology what the button does.

An icon button is a button that shows a symbol instead of a word: the magnifier that opens search, the "×" that closes a dialog, the heart that saves a product. Icon-only buttons save space, but the symbol is invisible to a screen reader – the button needs a name in the code that says what it does.

## What it means

[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). For every user interface component, the name and role must be programmatically determinable. A native `<button>` brings the role. The name is your job – and an icon alone does not provide one. When it is missing, scanners report an [empty button](https://allyway.ai/glossary/empty-button), and W3C classes it as failure F68: a control without a programmatically determined name.

W3C separates two ideas. A *label* is visible to everyone; a *name* is what software reads and may be hidden. Icon controls are the classic case of a name without a visible label. That is why the same symbol button can pass or fail depending on a single attribute.

There are four reliable ways to give an icon control its name:

| Technique | Code | Best for |
|---|---|---|
| `aria-label` (ARIA14) | `<button aria-label="Search">` | Most icon buttons |
| Visually hidden text | text with a `sr-only` class inside the button | Text that should also translate well |
| `aria-labelledby` (ARIA16) | points to the `id` of visible text | Buttons next to an existing heading or label |
| Image with alt text | `<img src="search.svg" alt="Search">` | Buttons that contain an `<img>` |

> **Tip:** > **Describe the action, not the picture**
> "Close dialog" helps; "X" or "cross icon" does not. If the icon changes the state of something, keep the name stable and expose the state, e.g. `aria-pressed="true"` on a "Mute" button.

People who use voice control say what they see – "click search". Pick names that match what the icon commonly means, so the spoken command works. A tooltip on hover is a nice extra for sighted mouse users, but it is not the accessible name.

## Examples

```html title="Example"
<!-- Icon button without a name: announced only as "button" -->
<button class="cart"><svg viewBox="0 0 24 24">…</svg></button>

<!-- Fixed with aria-label; the decorative SVG is hidden -->
<button class="cart" aria-label="Open cart">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Fixed with visually hidden text -->
<button class="menu">
  <svg aria-hidden="true">…</svg>
  <span class="sr-only">Open menu</span>
</button>
```

When the icon is an `<img>`, its alt text becomes the button name. A [missing alt attribute](https://allyway.ai/glossary/missing-alt-attribute) on that image therefore leaves the button unnamed, and the same applies to icon links, which then show up as an [empty link](https://allyway.ai/glossary/empty-link).

**Do:** Do

Use a real `<button>`, give it a short action name, hide the SVG or icon font with `aria-hidden="true"`, and use the same name for the same action across the site.

**Don't:** Don't

Put the icon on a clickable `div`, rely on `title` or a hover tooltip as the only name, or let an icon font glyph be read out as a random character.

## How to check an icon button



## Questions

Q: What is an icon button in accessibility?
A: A button that shows only a symbol and no visible text. It is accessible when it has an accessible name in code, for example through `aria-label` or visually hidden text, that describes the action.

Q: Is aria-label or visually hidden text better for an icon button?
A: Both are valid. `aria-label` is quick and covered by technique ARIA14. Visually hidden text is regular page text, so it is picked up more reliably by translation tools. Choose one approach and use it consistently.

Q: Should the SVG inside an icon button have a title?
A: Not if the button already has a name. Hide the SVG with `aria-hidden="true"`, otherwise some screen readers announce the graphic as well, and the name may be read twice.

Q: How do I find icon buttons without a name on my website?
A: Run the [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) on your key pages. It reports buttons and links without an accessible name, so you see every unlabeled icon in one list.

Q: Can allyWay fix icon buttons automatically?
A: Yes. allyWay detects icon buttons without a name across your site and gives them clear names that screen readers 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 icons allyWay names on your site.