Define Images with Appropriate Text Alternatives

Images must have text alternatives that describe the information or function represented by them so they can be read and understood by those using screen readers.

Alternative text for images

• All <img> elements should have an alt attribute provided
  • When not provided many screen readers will fallback to reading the file name instead
• The alt value should not include words like “image”, “picture” or “icon”
  • Screen readers are already announcing that the element is an image
• Images that are decorative only and provide no information or function to the page should be hidden from Assistive Technologies by providing an empty alt attribute (alt=””)

References

• https://www.w3.org/WAI/tutorials/images/
• https://www.w3.org/WAI/tutorials/images/decision-tree/
• https://www.w3.org/WAI/tutorials/images/tips/
• https://www.w3.org/WAI/tutorials/images/informative/
• https://www.w3.org/WAI/tutorials/images/functional/
• https://www.w3.org/WAI/tutorials/images/textual/