Describes what the picture is and how it relates to our content.

Alt Text should:

• Be on any image that is not decorative (border, bullets, etc.)
  • Decorative images are images that are there for visual purposes to break up spaces or for design (bullets).  These are the only images that alt text shouldn’t be on.
• Important details that are pertinent to the content and purpose of the image
  • Location
  • People
  • Time of day
• People’s names when it is a headshot, or it is important to know specifically who is in the image
• Be roughly 250 characters or less
• If there is text in the image, then it should be included in its entirety.
• Location if it is important to the understanding of the image to the content.
• Use plain language that is easy to understand

 

Pro Tip: If you are adding an image then the images must have a reason for you to be adding it, but if you area ever in doubt it is better to add an alt text to the image and let the user determine if they wish to skip the meaning of it or not.

Alt Text Shouldn’t Include:

• A person’s age, gender, race, etc. shouldn’t be included unless it is important to the meaning of the photo and content
• Location if it isn’t important to the content
• Don’t put Image of, graphic of, picture of at the beginning of your alt text
  • This will already be announced to the user through their assistive technology

Good Examples of Alt Text

• Headshot of Brooke Bailey
• The Rotunda surrounded by a blue and red sunset
• A family eating a meal together at a picnic table at a park

Functional Images

These images and/or icons are used to initiate actions instead of conveying information to the user.  The alt text for these images/icons should describe the function or purpose of the image/icon to the user

Examples of How to Apply Alt Text to Functional Images

<img src="......" alt="Print Page" />
<img src="......" alt="Print " />

<img src="......" alt="Download Application" />

<img src="......" alt="Search the Digital Accessibility Website" />
<img src="......" alt="Search" />

Decorative Images

Decorative images include anything that is design related and is not relevant to the content on the screen.  Ask yourself, if the element was removed would there by any change or loss of  information.  If the answer is no, then it could be a decorative image.

Examples of How to Apply Alt Text to Decorative Images

There are two ways to handle alt text on decorative images.  One way is to have no alt text at all (Empty Alt Text Method) and the second is to have a short phrase stating that the image is decorative (Full Alt Text Method).  Either way is correct and meets the WCAG guidelines.

Some assistive technology users encourage people to apply alt tech regardless if the image is decorative or not.  

Method: Empty Alt Text

<img src="......"  alt="">

Method: Full Alt Text

<img src="......"  alt="Decorative Image">

Informational Images

These images add meaning and context to the content that is around it and on the page.  Any image that is not decorative or functional should be considered an informational image and alt text should be applied to the image.

Examples of How to Apply Alt Text to Informational Images

<img src="..." alt="Woman wearing aviator glasses and wearing a blue beanie stares to the left of the image" />

<img src="..." alt="Dark red and green lights shining on a masterlock that is sitting on a laptops keyboard" />

<img src="..." alt="Headshot of Brooke Bailey, Digital Accessibility Coordinator at the University of Virginia" />

Long Descriptions

Images alt text should be roughly 255 characters.  If an image has a lot of alt text or is more complicated then additional methods below should be used to provide the information to the users.

Examples of How to Apply Alt Text to Informational Images

<fig> and <figcaption>

<figure role=“group”>
     <img src=“chart.png” alt=“bar chart showing monthly and total students for the first quarter of 2023 for sites 1 to 3” />
     <figcaption>
          <a href=“2023-first-qtr.html” title=“link to 2023 first quarter results”>Students for January to March 2023 text description of the bar chart</>
     </figcaption>
</figure>
 

<img> and <a> Linked Together

<p><img src=“chart.png” alt=“Bar chart showing monthly and total students for the first quarter of 2023” />
<br />
<a href=“2023-first-qtr.html”  link=“link to 2023 first quarter results”>Students from January to March 2023 text description of bar chart</a>
</p>

<img> and <a> Linked Apart

<p> <img src=“chart.png” alt=“Bar chart showing monthly and total students for the first quarter of 2023.  Described under the heading Site Visitors Full Text” /></p>
[…]
<h4>Site Visitors Full Text</h4>
<p>Description of the chart will be located here under the heading Site Visitors Full Text.</p>

Additional Resources

• Siteimprove Alt Text Best Practices
• WebAim Alt Text