Alternative Text

1. Alternative Text for Images

When images are present in Web content, we must provide meaningful alternative text description so that users of screen readers can have the image described to them. Also, we must provide ways for screen readers to ignore images that are used for decoration.

Best Practices

  • Keep the descriptions short and concise
    • Keep alt text under 140 characters (with spaces)
  • Do not use the word “graphic or image” in the description
    • Screen readers will announce "Graphic" and then read aloud the alt text description
  • Decorative images must be set to be ignored by screen readers

Don't do This

Scenario One: Alt Text is Not Meaningful

ama-dablam-2064522_1280

Why is This Wrong?

The image has alternative text that reads "ama-dablam-2064522_1280" which is the file name from the stock house from which it was downloaded. 


Scenario Two: Decorative Image Has Alternative Text

Divider line

Why is This Wrong?

The image has alternative text that reads "divider line" which is the file name from the stock house it was downloaded from.

Do This

Scenario One: Alt Text is Meaningful

Himalayan mountain peak

Why is This Right?

The image has alternative text that reads "Himalayan mountain peak" which "serves an equivalent purpose" per SC 1.1.1 of the WCAG 2.0.


Scenario Two: Decorative Image Set to Be Ignored by Screen Reader

Why is This Right?

The image below has alt attribute set to ("") which is compliant to SC 1.1.1 which mandates we provide a way for screen readers to ignore content "If non-text content is pure decoration, is used only for visual formatting.