Alt Text: A Comprehensive Guide with Examples

In the world of web accessibility, few elements are as crucial as alt text. Alt text, short for “alternative text,” is a concise description of an image within an HTML document. It serves a vital purpose: providing the information an image conveys to people who cannot see it, whether because they are blind or have low vision and use a screen reader, or because they are using a text-only browser or the image failed to load. In this comprehensive guide, we’ll explain the WCAG requirement behind alt text, walk through informative, decorative, functional and complex images, and show before-and-after examples and code to help you get it right.

Why Alt Text Matters

Alt text is a fundamental component of web accessibility for several reasons:

1. Inclusion: Alt text helps everyone, regardless of ability, access and understand the content on your website.
2. Compliance: Text alternatives are required by WCAG Success Criterion 1.1.1 Non-text Content, which is part of the WCAG standards that many accessibility laws and regulations refer to. In the US, Section 508 requires federal agencies to meet WCAG 2.0 Level AA, and the Department of Justice’s ADA web guidance lists missing alt text on images as an example of a barrier that keeps people who are blind from understanding content.
3. SEO Benefits: Search engines use alt text, along with page content, to understand images. Google’s image SEO guidance recommends descriptive, useful alt text and warns against keyword stuffing.
4. Usability: Alt text helps all users when images fail to load or when someone is on a slow connection with images turned off.

What WCAG 1.1.1 Non-text Content Requires

WCAG 2.2 Success Criterion 1.1.1 (Level A) says that all non-text content presented to the user has a text alternative that serves the equivalent purpose, with a few exceptions. Two of those exceptions matter most for images: controls and inputs must have a name that describes their purpose, and purely decorative images must be implemented so that assistive technology can ignore them. In practice, that means every image needs a decision: what is this image for, and what text would do the same job? The W3C’s alt decision tree walks through that decision step by step.

The Five Types of Images

The W3C Images tutorial groups images by purpose. Each type needs a different kind of alt text:

1. Informative images convey a simple idea or fact, such as a photo of a product or a diagram of a simple concept. Describe the information the image adds, in a short phrase or sentence.
2. Decorative images add only visual style, such as divider lines, background textures or a stock photo that repeats the heading. Use an empty alt attribute (alt="") so screen readers skip them. Do not leave the alt attribute out entirely; many screen readers will then read the file name.
3. Functional images are used as links or buttons, such as a logo linking to the home page or a magnifying-glass icon on a search button. Describe the action or destination, not the picture.
4. Images of text show words as pixels, such as a banner reading “Summer Sale”. The alt text should include the same words. Where possible, use real text styled with CSS instead.
5. Complex images such as charts, graphs, maps and infographics contain more information than a short phrase can carry. Give a short alt that identifies the image and its key point, plus a longer description nearby.

Best Practices for Writing Alt Text

Writing effective alt text means balancing enough information with brevity. Keep these best practices in mind, and see WebAIM’s alternative text guide and Section508.gov’s guide to authoring meaningful alternative text for more detail:

1. Describe purpose, not just appearance: Ask what the image contributes to the page. The same photo might need different alt text in a news story and in a product listing.
2. Keep it concise: Most alt text is a short phrase or one sentence. Put longer explanations in the page text or a long description.
3. Use empty alt for decoration: alt="" tells assistive technology to ignore the image. (Adding role="presentation" is not needed on an img with empty alt.)
4. Avoid redundancy: Don’t start with “image of” or “picture of”; screen readers already announce that it is an image. Don’t repeat text that is right next to the image, such as a caption.
5. Include text in images: If an image contains words that matter, include them in the alt text.
6. Be consistent: If the same image is used several times for the same purpose, use the same alt text.
7. Write for people, not search engines: Accurate, natural descriptions serve both. Stuffing keywords into alt text makes screen reader output harder to understand.

Code Example: Adding Alt Text

Let’s look at code examples for each type of image.

<!-- Informative image -->
<img src="team.jpg" alt="Two developers reviewing a website on a large screen">

<!-- Decorative image: empty alt, not missing alt -->
<img src="divider.png" alt="">

<!-- Functional image inside a link: describe the destination -->
<a href="/"><img src="logo.svg" alt="HalfAccessible home"></a>

<!-- Functional image inside a button: describe the action -->
<button type="submit"><img src="search.svg" alt="Search"></button>

<!-- Image of text: repeat the words -->
<img src="sale-banner.png" alt="Summer Sale: 20% off all courses">

Complex Images: Short Alt Plus a Long Description

For a chart, keep the alt short and put the detail in visible text or a linked description, as the W3C’s complex images tutorial recommends:

<figure>
  <img src="revenue-chart.png"
       alt="Line chart of annual revenue, 2021 to 2025, rising every year. Details follow.">
  <figcaption>
    Annual revenue grew from $1.2M in 2021 to $3.4M in 2025.
    <a href="#revenue-data">View the data table</a>
  </figcaption>
</figure>

The data table or text description then gives every value, so screen reader users get the same information as people who can see the chart. (The figures in this example are illustrative.)

For images in PDFs, the same principles apply; see our PDF accessibility guide for how to add alt text in documents.

Alt Text Samples: Before and After

Here are typical before-and-after examples of the kind of problems accessibility reviews find, with improved versions:

1. Informative image
   • Image: A product photo of a blue waterproof jacket.
   • Before: alt="IMG_4032.jpg"
   • After: alt="Navy waterproof jacket with hood and zip pockets, front view"
2. Functional image
   • Image: A magnifying glass icon on the search button.
   • Before: alt="Search icon - Click to search for products"
   • After: alt="Search". The screen reader already says “button”, so the action word is enough.
3. Decorative image
   • Image: A horizontal line used to separate sections.
   • Before: no alt attribute (the screen reader reads “divider underscore final dot png”).
   • After: alt=""
4. Image with text
   • Image: A button graphic containing the phrase “Contact Us.”
   • Before: alt="button"
   • After: alt="Contact Us"
5. Complex image
   • Image: An infographic showing six steps to improve website accessibility.
   • Before: alt="Infographic"
   • After: alt="Six steps to improve website accessibility, listed below", followed by the six steps as a real list in the page.
6. Linked logo
   • Image: A company logo linking to the home page.
   • Before: alt="logo"
   • After: alt="Acme home"

Alt Text in Online Stores

Product images are often the most important content on an e-commerce page. Describe what a shopper needs to know: colour, style, material and the view shown, and give each product gallery image its own alt text rather than repeating the product name. Our e-commerce accessibility team sees this daily, and our Shopify ADA compliance guide covers image alt text alongside the other common Shopify fixes.

Alt Text, ARIA and Accessible Names

For an image inside a link or button, the alt text becomes the link’s or button’s accessible name, which is what WCAG 4.1.2 Name, Role, Value checks. Prefer the alt attribute over ARIA for images; use aria-label or aria-labelledby only for things like inline SVG icons that have no alt attribute. Our ARIA essentials guide explains when ARIA is needed.

How to Test Your Alt Text

• Run an automated checker to find images with no alt attribute. Tools cannot tell whether alt text is accurate, so review the results by hand.
• Turn images off in your browser, or use a browser extension that shows alt text, and check that the page still makes sense.
• Listen to key pages with a screen reader such as NVDA or VoiceOver.

Conclusion

Alt text is a fundamental part of web accessibility that benefits everyone. Decide what each image is for, write short and accurate text that does the same job, leave decorative images empty, and give complex images a longer description. Following these practices makes your website more inclusive, helps you meet WCAG 1.1.1, and improves SEO and user experience at the same time.

Related Resources

• Web accessibility audits
• aria-label guide
• W3C: Images tutorial