Provide meaningful Alt text for images. This helps users who rely on assistive technology such as a screen reader to understand the meaning of the image. The screen reader will read out the ALT description to the user.
Example: <img src="../images/womens_history_month_hero_image.png" alt="View the 2019 Women's History Month Opening Ceremony">
Images that Have Meaning
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="image of city logo">
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. A screen reader already tells the user this information.
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.