All images need to have succinct, accurate, and equivalent alt (alternative) text. This will be read by screen readers and should present the content and function of an image. Read more about alt text from the Web Content Accessibility Guidelines (WCAG3).

Alt Text Tips and Requirements

• Alt text should not contain redundant phrases like “image of” or “graphic of”
• Alt text for two images cannot be the same. 
  • If there are two photos of a river, for instance, on a page, either distinguish them by saying “River 1” and “River 2” or write more specific alt text such as “East side of the river” and “Close-up of river water”
• If an image contains words, add as much of the text from the image as possible to the alt text (100-character limit).
• Alt text should not contain file extensions, such as .jpg. It should be easily readable and describe what is happening in the image.
  
  • See the following explanation for using file extensions in the alt text

Complex Images

• Examples include charts, graphs, maps, or text
• Text displayed in the image is used as alt text
• A link is provided to an accessible format of the information
• Read more about WCAG 1.4.5

Linked Image Alt Text

• If the image functions as a link, the alt text should describe where the image will take the user.
• For instance, if an image showed a Swoosh and linked to the Nike Website, the appropriate alt text would be “Nike.” A screen reader would identify the link and add “site” or “link,” therefore writing “Nike Website” as alt text would be redundant, and “Nike Logo” would not make sense.
• If the image links to a document, the alt text should contain the file extension.
  • For example, if you have a cover image of the annual report – the alt text would be “Annual Report (PDF)”.
• If the image links to a larger version of itself, the alt text should read with the file extension.
  • For example, an image of a map linking to a larger version of itself should have the alt text “Map of Downtown (JPG)”.

Instructions

1. Add an Image Widget to your page and select images to Insert
2. Click Actions next to an image 
   
3. Select Modify
   
4. Add Alt text to clearly explain what is happening in the image
   
   
   • Accessibility Compliance: Ensure that the alt text is compliant and consistent with the image’s purpose
5. Click Save
   
   
6. Insert the image
   
7. Adjust the image on the page as desired and add a link if desired
8. Click Save to save page changes
   

Resources 

• WCAG 1.1.1 – Non-text Content
• WCAG 1.4.5 - Images of Text