Why text alternatives matter
Alt text, or text alternatives, are short descriptions added to images. They let users who can’t see images understand their purpose. Here’s why they’re essential:
- Screen reader users rely on alt text: People with visual impairments use screen readers that read alt text aloud, providing context and meaning for each image.
- Helps with slow connections or disabled images: Users with limited internet or those who disable images still know what’s there when alt text is provided.
- Supports SEO: Alt text helps search engines understand images, improving your site’s discoverability. However, the primary purpose of alt text should be accessibility, not SEO.
- Meets accessibility standards: Many accessibility standards, like WCAG, require text alternatives.
Best practices for writing effective alt text
Consider the context
The image’s purpose in the content determines the best alt text.
- Complement the surrounding text: Match the alt text to the image’s purpose in context. For instance, if the image supports a specific concept in a paragraph, your alt text should reflect that.
- Use empty alt text for decorative images: If an image is purely decorative, use
alt=""to tell screen readers to skip it. This prevents unnecessary distractions.
Be descriptive but concise
Describe the image’s content and purpose without extra details.
- Focus on key details: For example, instead of “image,” say “Smiling woman holding a laptop.”
- Skip phrases like “Image of”: Screen readers already know it’s an image, so jump straight into the description.
- Keep it brief: Aim for one concise sentence. Include only the essential information.
Avoid keyword stuffing
Alt text should serve users, not search engines.
- Write for accessibility first: Avoid stuffing keywords. If a keyword fits naturally, that’s fine, but clarity is the priority.
Use alt text for functional images
Buttons, icons, and functional images need specific descriptions.
- Describe actions for clickable images: For a magnifying glass icon used as a search button, use “Search” as the alt text instead of “Magnifying glass.”
- Convey meaning for icons: If an icon provides information, describe its meaning, like “Warning” or “Error.”
Provide alt text for complex images
For charts, graphs, or infographics, offer a summary and, if needed, a detailed description nearby.
- Brief summary in alt text: For example, “Bar chart showing sales growth from 2019 to 2023.”
- Link to a detailed description: If the image is too complex for brief alt text, add a longer description on the page or link to it.
Test your alt text for accessibility
Testing ensures alt text meets user needs.
- Use a screen reader: Listen to how the alt text is read. Check for clarity and that it adds value.
- Ensure consistency: Verify that alt text is provided for each image where necessary and aligns with its content and purpose.
Examples of effective alt text
To illustrate the principles of effective alt text, here are some before-and-after examples:
- Before: “Image of a cat”
- After: “Orange cat sleeping on a windowsill”
- Before: “Graph showing sales”
- After: “Bar chart showing a 20% increase in sales from January to March”
- Before: “Search button”
- After: “Search the site”