Alternative text (alt text) serves as a text replacement for images, making visual content accessible to people who use screen readers. But writing good alt text is more nuanced than simply describing what's in the image.
The Purpose of Alt Text
Alt text serves multiple purposes:
- Screen readers read it aloud to describe images to blind users
- It displays when images fail to load
- It helps search engines understand your images
- It provides context when images are disabled
The Golden Rule
Describe the function, not just the appearance. Ask yourself: "If I couldn't see this image, what information would I need?"
Types of Images and How to Handle Them
Informative Images
These convey information that's part of the content.
<!-- Product photo -->
<img src="headphones.jpg" alt="Sony WH-1000XM5 wireless headphones in black with cushioned ear cups">
<!-- Person's photo -->
<img src="ceo.jpg" alt="Sarah Chen, CEO of Acme Corp, speaking at the 2024 Tech Summit">Functional Images
Images used as links or buttons should describe the action.
<!-- Logo link to homepage -->
<a href="/">
<img src="logo.svg" alt="Acme Corp - Go to homepage">
</a>
<!-- Social media icon -->
<a href="https://twitter.com/acme">
<img src="twitter.svg" alt="Follow us on Twitter">
</a>Decorative Images
Images that don't add information should have empty alt text.
<!-- Background flourish -->
<img src="swoosh.png" alt="">
<!-- Icon next to text that already conveys the meaning -->
<span><img src="phone.svg" alt=""> Call us: 555-1234</span>Complex Images (Charts, Graphs, Diagrams)
Provide a brief alt text and detailed description elsewhere.
<figure>
<img src="sales-chart.png" alt="Q3 2024 sales by region. Full data in table below.">
<figcaption>
<details>
<summary>View chart data</summary>
<table>
<!-- Full data table here -->
</table>
</details>
</figcaption>
</figure>Common Mistakes to Avoid
Don't Start with "Image of" or "Picture of"
Screen readers already announce it as an image. Starting with "Image of" is redundant.
<!-- Bad -->
<img alt="Image of a golden retriever playing fetch">
<!-- Good -->
<img alt="Golden retriever catching a frisbee mid-air">Don't Keyword Stuff
Alt text is for accessibility, not SEO manipulation.
<!-- Bad -->
<img alt="best cheap affordable wireless bluetooth headphones buy online sale discount">
<!-- Good -->
<img alt="JBL Tune 510BT wireless on-ear headphones in blue">Don't Leave Alt Text Empty for Important Images
Missing alt text on informative images excludes screen reader users from that content.
Don't Repeat Surrounding Text
If a caption or nearby text describes the image, the alt text can be briefer or empty.
Length Guidelines
- Keep alt text under 125 characters when possible
- Be concise but descriptive
- For complex images, use a brief alt text with a longer description elsewhere
Testing Your Alt Text
Read your alt text out loud. Does it make sense without seeing the image? Does it provide the same information a sighted user would get?
SiteDNA scans automatically detect missing and empty alt text on images. Run a free scan to identify which images on your site need attention.