Alt text for icons and icon buttons

An icon button is a button or link whose only visible content is a small picture, such as a magnifying glass for search or an X for close. Sighted visitors recognize the picture. Screen reader users, and people who control a page by voice, rely on the control's accessible name, and for an image that name comes from its alt text. W3C's functional images tutorial says the text should convey the action the control starts rather than describe the image, and it contrasts "Print this page" with a printer and "Search" with a magnifying lens.

In the February 2026 WebAIM Million, 46.3% of home pages had an empty link and 30.6% had an empty button, and 45% of the images missing alternative text were linked images. For other kinds of image, start with our complete guide to alt text and the alt text examples.

The rule: name the action, not the picture

Two WCAG criteria sit behind this, both Level A. Success criterion 1.1.1 Non-text Content says that when non-text content is a control, it "has a name that describes its purpose". Success criterion 4.1.2 Name, Role, Value asks that the name and role of every interface component can be determined by software. W3C notes that standard HTML controls already meet 4.1.2 when used according to specification, so a native button or link (a) brings its own role and you supply the name. For a link, Level A criterion 2.4.4 Link Purpose (In Context) asks that its purpose be clear from its text or context, and an image link's text is its alt text. Our pages on WCAG 1.1.1 and WCAG 2.4.4 cover each in full.

Four situations, four answers

The same picture needs different alt text depending on what surrounds it.

The icon is the only content of a link or button

The alt text is the control's name, so it has to state the purpose. The HTML Standard says that for a link or button containing nothing but images, their alt text must together convey its purpose. An empty alt here, with no other name on the link, is a failure: technique F89 fails 2.4.4, 2.4.9 and 4.1.2 for an image that is the only content of a link and has no accessible name, and its example shows some screen readers guessing a name, such as a file name. WebAIM agrees that empty alt text is never appropriate in that case, and advises against starting with "link to", because screen readers already announce links as links. A logo that links home follows the same rule; see alt text for logos.

<a href="/cart/"><img src="cart.svg" alt="View cart"></a>

<button type="button"><img src="close.svg" alt="Close"></button>

The icon sits beside text that says the same thing

Here the text names the control and the icon only supplements it, so the alt is present but empty. The HTML Standard calls this an icon that is supplemental to a text label conveying the same meaning, and W3C's functional images tutorial shows a logo with an empty alt inside a link that also reads "W3C Home". Give the icon alt="View cart" instead and a screen reader announces the same words twice.

<a href="/cart/"><img src="cart.svg" alt=""> View cart</a>

If an icon link and a text link sit side by side and go to the same place, merge them into one link, as F89 suggests (technique H2). Our decorative images guide has a worked before and after.

The icon adds something the text does not say

Some icons carry information of their own. In W3C's tutorial, a "new window" icon follows the link text "W3C Homepage" and has the alt "new window", because the text does not mention it. WebAIM gives a PDF icon beside link text the alt "PDF". A status icon that is the only mark of a result, such as a red cross for a failed payment, belongs here too: name the status, or add it as visible text.

The icon is decoration

A flourish inside a control that is already named, such as a chevron after a menu label, gets an empty alt, or aria-hidden="true" when it is inline SVG or an icon font. If the icon is all the control contains, it is not decoration. An icon set as a CSS background image carries no text alternative (WebAIM notes that alt text cannot be added directly to CSS background images), so the control must get its name from elsewhere, such as an aria-label (see background images and accessibility). When to leave alt text empty covers the full set of cases.

Ways to give an icon its name

What you write depends on how the icon is built. Whatever the method, the control ends up with an accessible name that says what it does.

The markup below names an inline SVG close button two ways, following MDN's aria-label page and the off-screen text technique in WebAIM's invisible content article, which calls the class sr-only.

<!-- Named with aria-label -->
<button type="button" aria-label="Close">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 16 16">...</svg>
</button>

<!-- Named with visually hidden text -->
<button type="button">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 16 16">...</svg>
  <span class="sr-only">Close</span>
</button>

Visible text beside the icon is the most robust, because everyone can read it and speech users can say it. MDN advises making important information visible to all users, and prefers aria-labelledby when a visible label exists. Technique H33 uses the title attribute only to supplement link text and cautions about limited browser support, so do not rely on it as the control's only name. For a font icon, technique ARIA24 adds role="img" and a label, so people who override page fonts keep the icon. Inline SVG has its own guide: SVG accessibility.

Icons that change state

Some icon buttons have two states, such as a heart that is filled or empty or a hamburger that opens a menu. The state belongs in an attribute, not in the name.

• Toggle buttons. The ARIA button pattern uses aria-pressed, true when on and false when off, and says the label on a toggle should not change when its state changes. If the design calls for the label to change instead, such as Mute to Unmute, the pattern says aria-pressed is not needed, so we suggest one approach, not both.
• Menu and disclosure buttons. The disclosure pattern sets aria-expanded to true when the content is visible and false when it is hidden. It does not address the label; we recommend keeping the name "Menu" in both states, for the same reason as the toggle rule.

<button type="button" aria-pressed="false" aria-label="Favorite">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 16 16">...</svg>
</button>

Use a native button for all of these. The Understanding document for 4.1.2 says elements scripted to behave differently from usual need additional measures, and the ARIA button pattern's examples show what it takes to make a clickable div or span work as a button. Our guides to buttons versus links and the keyboard accessibility test cover the rest.

Common mistakes

• Describing the picture or adding the role. "Magnifying glass icon" says what the icon looks like, not what it does, and words such as "button" or "link" repeat what a screen reader already announces.
• Removing the only name. An empty alt on the only content of a link is the F89 failure. Hiding the only content has the same effect. The MDN aria-hidden page hides an icon only in a button that also has a visible "Tweet" label, says to remove visible content from assistive technology only when equivalent meaning stays exposed, and advises against aria-hidden="true" on a focusable element.
• A name that contradicts the visible label. Success criterion 2.5.3 Label in Name (Level A) says that when a control has a visible text label, its accessible name must contain that text, because speech users say the words they see. A button that reads "Search" but is named "Find products" fails it. A bare icon with no visible text is outside 2.5.3, so its name should describe the function.
• Repeated names. A screen reader user tabbing through ten trash can buttons that are all named "Delete" cannot tell them apart. Add what each acts on, such as "Remove blue notebook" (an invented example). WebAIM makes the same point about a row of icon links that all say "PDF format".
• Filenames and placeholders. alt="icon-17.svg" or alt="image" counts as present but names nothing. Our free scan flags placeholder-style alt text.

Contrast and size

An icon is also a visual element. Success criterion 1.4.11 Non-text Contrast (Level AA) asks for at least 3:1 against adjacent colors for the visual information needed to identify a control and for the parts of graphics needed to understand them, and W3C says the term graphical object applies to stand-alone icons such as a print icon with no text. Check the pair with our contrast checker, which has a 3:1 target for UI components and graphics (details on our WCAG 1.4.11 page). Success criterion 2.5.8 Target Size (Minimum) (Level AA) asks for pointer targets of at least 24 by 24 CSS pixels, with an exception for small targets that have enough spacing around them, which matters for small icon buttons. See touch target size.

Check it yourself

Run the automated checks first, then spend a few minutes on the part software cannot judge.

• Link text checker. Lists every link with the name a screen reader announces, so an icon link with no alt text or aria-label shows up as a link with no name. It checks links, not buttons, and reads the HTML your server sends, so paste the rendered HTML to include links a script adds. Whether a name matches what the link does needs a person, as that tool's page says.
• Alt text checker. Downloads up to six of a page's images and checks whether each alt text is true of its image, including descriptions on images that carry no information and empty alts on ones that do. It opens JPEG, PNG, WebP and GIF files, so icons that are SVG files, inline SVG or an icon font are not compared.
• Accessibility bookmarklet. Runs on the live page in your browser and flags links and buttons with no accessible name, a link whose only content is an image with empty alt, image buttons with no alt, and role="img" with no name.
• Scan my site for free. The free scan's rule checks flag an image with no alt attribute and a link or button with no accessible name.

Then test the names yourself:

1. Tab to each icon control and read its accessible name, with a screen reader or your browser's accessibility inspector.
2. Ask whether the name says what happens on activation, and starts with the control's visible text if it has any.
3. Switch each toggle and menu button on and off. The name should stay the same while aria-pressed or aria-expanded changes.
4. Repeat after any theme, plugin or template change.

Keep it checked

A theme update, a new icon set or a redesigned header can swap labeled icon buttons for unlabeled ones without anyone reviewing the markup. GotAlt checks the pages you monitor every week. Its rule checks include an image with no alt attribute and a link or button with no accessible name, and it compares the alt text of up to six images per page with the image itself. It also opens monitored pages in a browser for contrast and other checks that need a rendered page (see what we check), and reports what changed. Whether a name is the right one still needs a person. Plans start from $69 a month: Audit my whole site from $69/mo.