How to Write Usable Alt Text
Alt text is a crucial part of making images accessible to users who rely on screen readers. However, many editors are told to simply "add alt text" without clear guidance. The reality is that alt text serves a specific purpose: conveying the image's purpose and meaning within the context of the page, not just a visual description.
Alt Text’s Job: Purpose, Not Pixels
Alt text should describe why an image is on a page and what information it conveys, rather than listing every visible detail. The University of Iowa's accessibility guidance states that "good alt text should describe the image's purpose, not just its appearance." Writers should think about why the image is included and how it fits into the surrounding content.
When an image serves a functional purpose, like a button or link, the alt text should describe the action that results from clicking or activating it. Avoid listing all the visual elements. Instead, convey the essential information the image provides in the flow of the page.
Alt Text vs. Captions: Different Jobs, Different Content
Alt text is designed to be consumed by assistive technologies like screen readers, while visible captions are meant to be read by sighted users. Captions often include editorial content, credits, and commentary that belongs outside the concise, neutral alt description.
Arizona State University’s accessibility guide advises keeping alt text around 160 characters to avoid truncation by screen readers. Captions, on the other hand, provide additional context and details that supplement the main content. Editorial phrases like "Photo by." and commentary belong in captions, while alt text should remain focused on the core information and purpose of the image.
When to Say Nothing: Decorative Images and Empty Alt
Decorative images, like design elements, backgrounds, and visual separators, often serve a purely visual role without conveying key information. In these cases, the best alt text may be no alt text at all.
The W3C’s guidance on decorative images specifies that purely decorative images should use null (empty) alt text alt="". This allows screen readers to skip these images altogether, providing a cleaner experience for users who don't need the extra visual details. Similarly, the University of Virginia advises using empty alt text or a short decorative phrase to indicate that an image is not essential to understanding the content.
How to Write Alt Text: Practical Rules Editors Can Apply
Following a few key rules can help editors create effective alt text:
- Keep it short. Aim for no more than 150 characters, with the most important details first. Avoid phrases like "image of" or "picture of" since screen readers already announce the image type.
- Focus on purpose, not appearance. Describe the essential information or function the image conveys in the context of the page.
- Don't duplicate nearby text. If the surrounding content already conveys the key information, leave alt empty or add very minimal detail to avoid repetition.
- Use appropriate language and punctuation. Write actual sentences with proper capitalization and ending punctuation.
- For functional images, describe the action or destination. This helps screen reader users know what will happen when they activate the image.
Testing Your Alt Text: The Read-Through and Functional Check
A simple test can help editors catch ineffective alt text:
- Read the content before and after the image.
- Read the alt text in place of the image.
- If the combined content makes sense and captures the purpose of the image, the alt is likely effective.
For linked or clickable images, an additional step is essential:
- Check that the alt text accurately conveys the action or destination of the link. This ensures that screen reader users know where the image will take them.