If you’ve ever been frustrated by a website that doesn’t load images correctly, imagine relying on a screen reader only to hear “image123.jpg” as the description. Not helpful, right? That’s why writing meaningful, effective image descriptions is such a critical part of accessibility—and it’s a foundational part of meeting WCAG 2.2 standards.
In this tutorial, we’ll walk through what the guidelines say, how to identify image alt text issues, what developers can do to write better descriptions, and common use cases where it’s easy to go wrong.
Jump Into The Good Stuff
What WCAG Says About Alt Text for Images
When you’re working to meet WCAG 2.2 accessibility compliance, images must be provided with meaningful alternative text if they convey content or function. There are several different types of images each with their own suggestions. For the most common kind, here’s what the guidelines break down into:
What images require alternative text?
Any non-decorative image that conveys important information or performs a function must have an alt attribute that clearly describes its purpose.
Reference: SC 1.1.1 Non-text Content (Level A)
Do decorative images need alt text?
If the image is used purely for decoration (no meaningful content or functionality), the alt attribute should be empty: alt="". This tells screen readers to skip it. Another way to ensure assistive technology ignores an image is to give it a role="presentation" attribute.
Reference: SC 1.1.1 Non-text Content (Level A)
Reference: Accessible Rich Internet Applications (WAI-ARIA) 1.3
How descriptive should alt text be?
The description should provide enough context to replace the image for users who can’t see it—without over-explaining. Be concise but clear. Pro Tip: Avoid starting with “Image of…” or “Picture showing…”
“the meaning or content that is displayed visually, which typically isn’t a literal description of the image.”
Reference: Tutorials for Image: Informative Images
Reference: Tutorials for Image: Tips and Tricks
Do functional images need alternative text?
If an image is used as a link or button, the alt text should describe the function, not the visual.
- Example:
alt="Download PDF"instead ofalt="Icon of a file"
If part of the image is interactive using something like an aera map and allows the user to select a portion which navigates them to another page, you should include in the alt text something like “Select ____ for more information.” But let’s get real for a sec, don’t do this—for everyone’s sake.
Reference: Tutorials for Images: Functional Images
Reference: SC 1.1.1 Non-text Content (Level A)
Reference: Providing text alternatives for the area elements of image maps
If the image contains text, does it need alt text?
Text in images can be a major accessibility barrier, especially if it’s not replicated elsewhere on the page. If an image includes essential text (like a quote, a button label, or chart labels), that text should be included in the image’s alt description or provided in an accessible format nearby.
- If the text is short and important, include it in the alt attribute:
alt="CTA button with the text 'Download Now'" - If the image contains a lot of text (like a screenshot or infographic), provide a full text alternative on the page, either directly below the image or linked from it.
- Avoid using images of text for UI elements unless absolutely necessary.
Reference: SC 1.4.5 Images of Text (Level AA)
Reference: Using alt attributes on img elements
How to Identify Missing or Poor Alt Text
Here are a few steps to uncover image accessibility issues on your site:1. Run an automated audit
Use tools like WAVE, axe DevTools, or Lighthouse to scan for missing or empty alt attributes.2. Visually inspect your site
Hover over images or check the source code to verify that each image element has analt attribute.
3. Use a screen reader
Try browsing your page using a screen reader like NVDA or VoiceOver to hear how images are described—or skipped.4. Look for overly generic or redundant text
“Image of man” or “Picture” isn’t helpful. Watch out for descriptions that are vague or repetitive.Practical Steps to Write Effective Alt Text
Remember The Goal. The purpose of writing alt text is to create an equal experience for users who can’t see your images. If you’re using an image to convey a message or feeling, that message should also be conveyed through your alt description. Think of it this way: if someone sees the image and walks away with a better understanding of your content, someone who can’t see it should be able to do the same—thanks to your alt text.
Add alt text to your HTML
<img decoding="async" src="team-photo.jpg" alt="The product team meeting around a table with laptops open">
Leave alt text blank for decorative images
<img decoding="async" src="border-shadow.png" alt="" role="presentation">
You may also consider adding:
role="presentation" aria-hidden="true"to reinforce that the image should be ignored by assistive tech.
Avoid these common mistakes:
- Repeating the same alt text for every image
- Using file names as alt text
- Using alt text for keywords instead of human-readable descriptions
Common Examples of Image Alt Text in Accessibility
Example 1: Informative Image
An image showing a step in a process, such as a user clicking a button in an app.
- Good alt:
"User clicking the 'Submit' button on the form"
Example 2: Functional Image
A magnifying glass icon that links to a search page.
- Good alt:
"Search"
Example 3: Decorative Image
A background flourish or divider line that adds visual polish.
- Good alt:
alt=""+aria-hidden="true"orrole="presentation"
Example 4: Complex Image (like a chart or graph)
- Use a concise alt text, then include a longer description elsewhere on the page.
- Good alt:
"Bar chart showing quarterly sales growth" - Add a text summary below the image or link to an accessible data table.
Final Thoughts
Alt text is a small detail that makes a big difference. By adding meaningful, purposeful descriptions to your images, you’re not only aligning with WCAG 2.2 compliance—you’re making your content usable by a wider, more inclusive audience.
Want a quick test? Try navigating your own site with a screen reader and see how your images are described. You might be surprised by what you hear—or don’t.