- Use an informative, short phrase to convey what image is showing
- Write concise descriptions that still give user context
- Write short alt text that can be read quickly by a screen reader
- Include targeted keywords

University of Illinois at Urbana-Champaign

Alt text helps translate a visual UI into a text-based UI. Alt text is a short label that is up to 125 characters embedded in the code describing an image for visually impaired users. There is no need to add text stating that the UI is an "image of" or "picture of" since alt text is only used for images. A screen reader will read the text aloud in place of the image. Alt text also appears in place of the image if the original image fails to load.

Alternative Text (Alt Text)

Material Design Documentation

Do's for Alt Text

- Don't use only one or two words to describe an image
- Don't write a length description, it may get truncated
- Don't place keywords simply to improve Search Engine Optimization (SEO)
- Don't include the phrases "image of" or "picture of"

Learn Before

Related