Alternative text (alt text) is used to describe images and adds context in association to the content. The lack of image alt text is one of the most common accessibility errors on the web. We’re all responsible for adding alt text to images, icons, and other visual media, whether it’s in a Word or Google doc, social media post, emails, or website.
What is alt text?
Alt text is a short description of an image for people who use screen readers or other assistive technology, or who have slow internet access. Alt text makes images and their intent perceivable to a wider audience.
When to use alt text
If an image is important enough to be included in your design, alt text is required to go along with it for accessibility. Think of it this way: If an image fails to load, what text makes sense in its place? What does that image represent? What is its specific purpose for being there? Use that for the alt text.
For example, alt text that says “Business owner drinking coffee while sorting receipts” conveys more purpose and emotion than “Woman with papers drinking coffee.”
You don’t need alt text for decorative images that aren’t associated with the content. Just define the image as decorative for developers or leave the alt blank (alt=“”). A screen reader will skip the blank tag.
Captions are an alternative way to provide an image description. Captions are useful for everyone, can be reviewed by approvers, and can be easily translated if you’re using the same content across multiple countries.
Be clear and concise so readers can visualize the content without seeing it.
Don’t be too minimal or too complex.
If the image has text, include that in the alt text.
Don’t include “picture of” or “image of.” This is already assumed. The screen reader will tell you it’s a graphic, so you don’t need to mention it unless it’s an important thing to note.
If the image represents an action, describe it.
Don’t stuff alt text with keywords—it can be seen as spam. But more importantly, it’s not kind for people who use screen readers.
Make sure buttons have alt text that describes their function, such as “select” or “explore now”
Don’t neglect metadata and alt text for buttons, especially forms.
Start with a capital letter. Screen readers will emphasize it more, which may help separate it from the rest of the text.
If color is important for context or content, include it. Otherwise, just mention it in the body of the content.
Keep below 125 characters, the standard cutoff for most screen readers
Resources
- Writing alt text for images (Adobe Spectrum)
For Intuit employees
- Intuit alt text requirements (for developers)
