Icon Button: How to Give It an Accessible Name
Also called: Icon-only button, Icon control, Symbol button
Definition
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 is a Level A criterion of 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, 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> |
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
<!-- 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 on that image therefore leaves the button unnamed, and the same applies to icon links, which then show up as an empty link.
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.
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
What is an icon button in accessibility?
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.
Is aria-label or visually hidden text better for an icon button?
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.
Should the SVG inside an icon button have a title?
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.
How do I find icon buttons without a name on my website?
Run the free WCAG scanner on your key pages. It reports buttons and links without an accessible name, so you see every unlabeled icon in one list.
Can allyWay fix icon buttons automatically?
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 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 icons allyWay names on your site.
Related terms
Empty Button: What the Error Means and How to Fix It
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.
Read definition: Empty Button: What the Error Means and How to Fix ItEmpty 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 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 FixedAlt text
Alt text is a short written description of an image. Screen readers read it aloud, and browsers show it when the image can't load – so people who can't see the image still get its meaning.
Read definition: Alt text