How long should alt text be, and do icons need it?

What alt text is for, and why length matters

The alt attribute on an <img> gives the image a text alternative. A screen reader reads it aloud when it reaches the image, a browser shows it in place of a broken image, and search engines use it, along with the surrounding text, to understand what the image shows. WCAG success criterion 1.1.1 (Non-text Content) asks that every image that carries meaning has a text alternative serving the same purpose, and that purely decorative images are marked so assistive technology can ignore them.

No standard sets a maximum length. HTML does not limit the attribute, and current screen readers read the whole value. The often-quoted figure of 125 characters is a working habit from older advice, not a rule. It is still a useful target, because alt text is heard in one go: a listener cannot skim it or jump back to the important part, and most screen readers do not let the user pause inside it as easily as inside normal text.

If your description needs more than about two sentences, the image probably holds information that belongs in the page itself, in a caption or in a paragraph that everyone can read.

Deciding what each image needs

The right alt text depends on what the image does in its place on the page, not on what the picture contains. The same photo of a red bicycle might need the model name on a shop page, the words Hire a bike on a button, and nothing at all as a background behind a heading. Work through these questions in order and stop at the first that fits:

1. Is the image the only content of a link or button? Then the alt text is the name of that link or button. Describe the destination or action, such as Download the 2026 price list (PDF), not the picture.
2. Does it contain text? If the text matters, repeat it in the alt. If the same words also appear as real text next to it, the image can be silent.
3. Does it add information the page needs? Then describe that information briefly. For a chart, give the conclusion and put the figures in a table or paragraph.
4. Is it purely decorative, or does it repeat nearby text? Then use alt="".

A helpful check is to imagine phoning a customer and reading the page to them. Whatever you would say when you reached the image is a good alt text. If you would say nothing, the alt should be empty.

Empty alt is not the same as missing alt

alt="" is a deliberate signal that the image is decorative. Screen readers skip it entirely. When the attribute is left out, many screen readers fall back to announcing the file name or the address, so a listener hears something like image, I M G underscore 2041 dot jpg. Audit tools flag missing alt for this reason. They should not flag a correctly empty alt, and if they do, the warning is a false positive rather than a reason to add a description.

Icons: silent, labelled or named on the control

Icons cause more confusion than any other image type because the same icon can need three different treatments. What matters is whether visible text already does the job.

Icon beside text that says the same thing

A phone icon next to the words Call us, a basket icon next to Basket, or a tick next to each item in a features list add nothing for a screen reader user. Hide them, otherwise the user hears phone, Call us or, worse, a file name before every list item.

<!-- Image file -->
<a href="tel:+441632960961"><img src="/icons/phone.svg" alt="" width="16" height="16"> Call us</a>

<!-- Inline SVG -->
<a href="/basket"><svg aria-hidden="true" focusable="false" width="16" height="16">...</svg> Basket</a>

<!-- Icon font -->
<button><i class="icon-print" aria-hidden="true"></i> Print</button>

Icon fonts deserve special care. The glyph is often a private-use character that some screen readers announce as an odd symbol or not at all, so always add aria-hidden="true" to the element that holds it.

Icon-only buttons and links

A magnifying glass that opens search, a cross that closes a dialog or a hamburger that opens the menu has no visible text, so the control needs an accessible name. Put the name on the control itself and hide the icon.

<!-- aria-label on the button -->
<button type="submit" aria-label="Search">
  <svg aria-hidden="true" focusable="false" width="20" height="20">...</svg>
</button>

<!-- Visually hidden text, which also translates with the page -->
<button type="button" class="menu-toggle">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="visually-hidden">Open menu</span>
</button>

<!-- Image file inside a link: the alt is the link name -->
<a href="https://www.linkedin.com/company/example"><img src="/icons/linkedin.svg" alt="Our LinkedIn page"></a>

Visually hidden text uses the usual clip pattern, so it is read by assistive technology but takes up no space:

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

Worked examples for common images

These examples come from typical small business pages. Each shows the image, what it does on the page and the markup that fits.

The chart deserves a closer look. The alt gives the one fact a listener needs to follow the argument. The detailed figures go in a short table or a paragraph under the chart, where everyone, including people who struggle to read small chart labels, can use them:

<figure>
  <img src="/images/sales-2024-2026.webp" width="800" height="450"
       alt="Bar chart: sales doubled from 2024 to 2026">
  <figcaption>Sales were 410 orders in 2024, 590 in 2025 and 830 in 2026.</figcaption>
</figure>

When a caption already describes the image fully, keep the alt short or empty so the listener does not hear the same sentence twice. More on images with visible captions is in the guide to alt text not showing on hover.

How to check alt text across a page

Automated tests can find missing alt attributes, but they cannot tell whether the text is right. Use a quick script to list every image and its alt, then judge each one with the questions above. Paste this into the browser console on any page:

console.table([...document.images].map(img => ({
  src: img.currentSrc.split('/').pop(),
  alt: img.hasAttribute('alt') ? img.alt : '(missing)',
  length: img.alt.length,
  inLink: !!img.closest('a, button'),
  hidden: img.closest('[aria-hidden="true"]') ? 'yes' : ''
})));

Look for four patterns in the table: (missing) values, which need fixing first; very long values over about 150 characters; values that are file names or start with Image of; and images inside links where the alt is empty, which leaves the link with no name at all.

For inline SVG and icon fonts, open DevTools, select the button or link, and read the Computed name in the Accessibility pane. If the name is empty, or reads as a stray symbol, the control needs a label. Lighthouse and similar checkers report this as buttons or links that do not have an accessible name.

Listen once

Turn on a screen reader for five minutes. NVDA is free on Windows, VoiceOver is built into macOS and iOS (Command and F5 on a Mac), and TalkBack is built into Android. Move through the page with the arrow keys or by swiping. You will quickly hear decorative images that should be silent and icon buttons that have no name. Our accessibility guide explains the wider checks worth running at the same time.

Platform notes

• WordPress. The Alternative Text field in the media library sets a default, but the block editor stores alt per image block, so changing the library value does not update images already placed in posts. To make an image decorative, leave the field empty; WordPress then outputs alt="". Some themes and page builders print icons as images without any alt. See accessibility fixes for WordPress.
• Shopify. Product media has an alt field under each image. Theme code using the image_tag filter outputs the stored alt, and themes often fall back to the product title when it is empty, which repeats the heading beside it. Theme icons are usually inline SVG snippets; check they carry aria-hidden="true". See accessibility fixes for Shopify.
• React and Next.js. The alt prop is required on next/image, and an empty string is accepted for decorative images. Icon libraries such as Lucide and Heroicons render SVG; pass aria-hidden when the icon sits beside text, and put aria-label on the surrounding button when it does not.
• Page builders. Icon widgets in Elementor, Divi and similar tools often add their own markup. Check the rendered HTML rather than the widget settings.

The fix, step by step

Edge cases worth knowing

• Images of text. A banner that says 20% off this weekend must carry those words in the alt, because a screen reader cannot read pixels. Better still, use real text over a background image.
• Complex diagrams. A floor plan or process diagram needs a short alt plus a longer description on the page or a linked page. Point to it in the alt, for example Floor plan of the ground floor, described below.
• Several images in one link. If a product card wraps a photo and the product name in one link, make the photo silent. Otherwise the link name repeats.
• Background images in CSS. These have no alt and are ignored by assistive technology. That suits decoration, but never put meaningful content in a CSS background.
• Keyword stuffing. Alt text written for search engines, such as a list of service and town names, makes pages tiresome to listen to, and Google warns it can cause a site to be seen as spam. Describe the image honestly instead.
• Language. Alt text is read in the language of the page. On multilingual sites translate it, or a French page will read English alt with French pronunciation.

Keeping alt text right

1. Write a one-page alt text rule for everyone who uploads images: describe the purpose, keep it short, leave decoration empty, and never use the file name.
2. Build icons into components that hide them by default and require a label prop when the icon is used on its own. That way a developer cannot ship an unnamed icon button by accident.
3. Run an automated accessibility check on each template after changes, and review new pages by reading the console table above.
4. Recheck after theme or plugin updates, which often change how icons and logos are printed.

The broader rules on writing descriptions are in the alt text guide, and the treatment of purely visual images is covered in fixing decorative images.