Alt Text Best Practices

  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.

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.

Have alternative text complement (not repeat) other content

The alternative 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 Jr. and Jane Stanford." Because that's also in the caption, the image could be decorative. If we include alternative text, the alternative text should complement and not repeat the caption or what's in the page content. It's important to keep the alternative text succinct as you're limited to 150 characters.

Image with alternative text

Image with better alternative text

The alternative text is "Dressed in black and white formal attire, a young boy sits in his mothers lap." Because this describes what you see, and doesn't repeat the caption, it complements the content and provides a richer experience for the non-visual visitor.