Alt text examples › Icons & buttons
When an image is a button or the only content of a link, it is functional: its alt text must say what happens when you activate it, not what the icon looks like. "Magnifying glass" is a picture; "Search" is a function.
| # | The image | Bad alt | Good alt | Why |
|---|---|---|---|---|
| 1 | Magnifying glass icon that submits a search form | magnifying glass | Search | Describe the function. Users need to know what the button does. |
| 2 | Shopping cart icon with a badge showing 3 | cart icon | Cart, 3 items | Include the state the badge shows. |
| 3 | Twitter/X bird icon linking to the company profile | bird | Acme on X | Social icons are links: name the destination. |
| 4 | Hamburger (three lines) menu icon | three horizontal lines | Menu | Name the control, not its shape. |
| 5 | Printer icon that prints the page | printer | Print this page | Action plus object is clearest. |
| 6 | Thumbnail image linking to a full article | photo of mountains | Read: 10 easy hikes near Denver | A linked image's alt is the link text. Say where it leads. |
| 7 | Trash can icon in each row of a table | delete | Delete invoice #1042 | Repeated icons need to be distinguishable: add which item they act on. |
| 8 | Star icons showing a 4-of-5 rating (not clickable) | star star star star | Rated 4 out of 5 | Read the value, not each star. |
WCAG 1.1.1 Non-text Content (Level A), 2.4.4 Link Purpose (Level A) and 4.1.2 Name, Role, Value (Level A): an icon-only control must have an accessible name that describes its purpose. The full requirement is explained in our guide to WCAG 1.1.1 alt text requirements.
Upload a photo to the free generator and get a draft in seconds (3 images a day, no signup). On WordPress, Alt Text BYOK writes it automatically on upload and fixes your whole media library in bulk, using your own AI key.
Try the free alt text generator Alt Text BYOK for WordPress