Alt text is a text replacement for an image. Screen readers announce it, and it displays when images fail to load.
What alt text should do
- Help people navigate the interface.
- Provide an inclusive experience.
- Be as short and specific as possible.
- Be contextual to the intended message.
Do
Describe the content: “2018 Caterpillar 320 excavator, left side view”.
Don’t
Use a file name or timestamp: “excavator.png”, “Screenshot 2022-11-07 at 3.05.55 PM”.
Writing alt text
Always write alt text in plain text, and be as brief as possible — many screen-reader users listen at fast speeds.
- Be concise; write for a small amount of space.
- Use simple words.
- Remove needless words and articles like “a”, “an”, “one of” — alt text has different grammatical rules.
- Avoid decorative punctuation (“!!”) and emoji, which screen readers announce literally.
- Only use acronyms your audience will understand; if you do, add spaces (“Y M C A”).
- Write in the active voice when possible.
Alt text in context
It can be tricky to decide whether an image needs alt text or should be ignored by screen readers. The same image may need different alt text depending on what it conveys. Ask: Is it interactive? Does it convey information not given elsewhere? Does its context communicate anything?
Do
For an interactive icon, describe the action: “Search”.
Don’t
For an interactive icon, describe the picture: “Magnifying glass”.
Do
Mark a purely decorative image so screen readers skip it (empty alt).
Don’t
Add verbose alt text to a decorative image that adds no information.