Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Examples of descriptive/meaningful Alt text

    • <img src="../images/dem_hero_image.png" alt="About the Neighborhood Emergency Response Team">

    • <img src="../images/city_seal.png" alt="City and County of San Francisco">

  • Examples of non-descriptive Alt text:

    • <img src="../images/city_seal.png" alt="City Logoimage of city logo">

    • <img src="../images/dem_hero_image.png" alt="em_hero_image.png">

  • Decorative images that don’t present important content should have null alt text. Example: (alt=""). Or in the event that ALT text is redundant. Screen readers will ignore these images all together. 

  • Here are some general guidelines to follow when providing Alt text. Alt text should:

    • Be succinct. Typically no more than a few words or a short sentence.

    • NOT be redundant or provide the same information as text within the context of the image.

    • NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image.

  • For complex diagrams, charts, maps and graphs a text based equivalent needs to be provided either within the context of the page, such as in an adjacent data table. The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image. 

...