Missing defined alternative description to non-text content

Description

Rule ID: missing-alt-attribute

This rule determines if the following HTML elements have defined an alternative description through an alt attribute for non-decorative images, images within a link, form fields, and other interface elements.

  • img
  • area
  • input[type="image"]

Context

People who are blind or have low vision may need additional information presented as text so they can access information and control interface elements. Complex images may require detailed descriptions to convey important or useful information. For instance, provide a more detailed description for a chart demonstrating a growth trend.

How to fix it

  1. Give the purpose and function of the image within the context of the surrounding information and provide any text shown in the image, verbatim.
  2. Related to SEO, it is important to remember that the keywords you use in the alternative description increase your chances of ranking in image search.
  3. Read Best practices for writing good alt text.

How to find missing image alt text attributes on a website?

  • Use SiteLint platform to determine automatically all missing alt text attributes without crawling.
  • Use following small code snippet directly in your developer console: Array.from(document.images).filter((img) => { return img.getAttribute('alt') === null })

Standard