Alt Text

What is Alt Text?

  • Text alternatives for non-text content (images, icons, emojis, images of text) that can be programmatically determined
  • A short description of an image
  • Alt text is read by a screen reader when it reaches an image to allow the content to be perceived
  • Alt text using the alt tag is for images

Why Alt Text?

Guideline 1.1 - Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
WCAG 2.0 Guidelines

Do I need to add alt text content to every image?

Nope.

Do I need to supply an alt attribute to every image?

Yes.

What happens if I don't supply an alt attribute to an image?

Bad things.

The image url might be read instead or just "Image".

Empty/null alt text

Use empty/null alt text for decorative images.

alt="" allows the screen reader to skip over the image.

What is a decorative image?

An image that doesn’t convey any meaning or add information. If the page makes sense without the image, it is probably decorative.

What about Aria-hidden?

We know we can use aria-hidden="true" to hide things from screen readers, so can we use it for images?

No, because it is not semantically correct. Use aria-hidden for icons and other elements you want to hide for screen reader users.

What does not go in alt text?

  • Redundant information that is already on the page
  • “Picture of”, “Image of”... (Screen readers already announce this)
  • Information that should be accessible to everyone, such as a caption

How descriptive should alt text be?

Alt text should be a short and consise description of the image that includes the context. A picture is worth a thousand words, but alt text should not be that long at all.

Does alt text need to be localized / translated?

Yes. It is part of the content on the page.

Help! I don't know what to do!

When in doubt, consult your designer or PM.

How can I enforce this in React code?

You can use eslint-plugin-jsx-a11y's rule for alt-text.