What Is Alt Text and Why Images Need It for Accessibility
Patrick Bushe
October 27, 2024 · 5 min read
Alt text, short for alternative text, is a written description attached to an image in a web page's code. Screen readers read it aloud to people who can't see the image. It also appears when an image fails to load, and helps search engines understand what an image shows.
Who relies on it
- People who are blind or have low vision using screen readers.
- People on slow connections who have images turned off or waiting to load.
- Search engines, which use it to understand and index images.
The accessibility guidelines (WCAG 1.1.1) require a text alternative for every image that carries meaning.
How to write good alt text
- Describe the purpose, not just the content. Ask what the image tells the reader in this context.
- Be concise: usually one short sentence.
- Skip "image of" or "picture of"; screen readers already announce it's an image.
- Include text that appears in the image, if it matters.
Different images, different alt text
- Informative image: a product photo might be "Navy wool coat with a hood and toggle buttons."
- Linked image or icon: describe where it goes or what it does, such as "Search" or "Bushe.co home," not "magnifying glass."
- Chart or diagram: give the main takeaway in the alt text, and the full data in nearby text or a table.
- Decorative image: use an empty alt attribute (
alt="") so screen readers skip it.
Common mistakes
- Missing alt attributes, so screen readers read the file name, like "IMG_4021.jpg."
- Keyword stuffing for search engines.
- The same alt text on every image.
- Describing decorative images, which adds noise.
- Putting important information only in an image of text.
Checking alt text on a page
In Chrome, right-click an image and choose Inspect to see its alt attribute. Accessibility testing extensions such as WAVE list every image's alt text on a page. See accessibility testing extensions.
When sites leave it out
Chrome has an option for screen reader users to get image descriptions from Google for images that have none. It's helpful but generated automatically, so it can miss the point of an image.
Beyond alt text
Alt text is one part of an accessible page, alongside headings, labeled forms and readable layout. For readers who find busy pages hard to follow, ADHD Reading Focus shows one paragraph at a time. See how screen readers see websites.