Alt Text Examples
Example - Image has no alt text
An image without an alternative text attribute can hinder accessibility, as screen readers cannot describe the image to visually impaired users. To fix this, update the image with a descriptive alt text or mark it as decorative if it does not convey important information, ensuring it is ignored by assistive technologies.
In the following example, editora11y will alert you that your text does not have an alternative text.
Go to Alternative text (alt text) for images and other media
Also see UIT Office of Digital Accessibility (ODA) guidance on
If you don't update the alternative text,
Editoria11y may flag the following issue:
- Manual check: image has no alt text
- To fix: It is okay to Mark as checked and OK if the image is decorative and can be fully understood without it then the image should be marked as decorative.
- Image has no alternative text attribute
- To fix: either add an empty alt (alt="") to indicate this image should be ignored by screen readers, or add descriptive alt text.
Example - Bad vs. Good alternative text
The alt text helps the reader understand the image in context of the content of the page. Suppose we want to write about Leland Stanford Jr. We have an image with a caption and this text "Leland was the only child of California Governor Leland Stanford and his wife, Jane Stanford." Because there's a caption, the image could be decorative. If we include alt text, the alt text should enhance the content.
Image with alt text
The alt text is "Leland and Jane Stanford." Because this repeats what is in the caption, it is not needed. The image should be marked as decorative.
Image with better alt text
The alt text is "Dressed in black and white formal attire, a young Leland Jr. sits in his mothers lap." Because this describes what you see, and doesn't repeat the caption, it enhances the content.