Add alt text to images

In this Article

• Add alt text to an image in the editor
• Add alt text to a navigation dropdown image
• Add alt text in Resources' quick action panel
• Write meaningful image descriptions
• Examples of effective Alt Text
• Ensure ADA compliance by requiring alt text

Alternative text (alt text) is required on images to provide a written description of the image and to meet current accessibility standards. The images on your site, whether they are decorative or have important content, need to be accessible to all users. Some users may be visiting your site with assistive technology, such as a screen reader, or they may be visiting the site with limited internet connection. In all cases, alt text will help them experience your site to the fullest.

Add alt text to an image in the editor

1. If you are inserting a new image, click the Insert Image icon.

   

2. For an existing image, right click on the image and select the Image Settings link.

     

3. In the Image Properties settings, find the “Alternative text” field and input your image description.

   

4. Save the Image Properties settings, save the Content element, and publish the page.

Add alt text to a navigation dropdown image

1. On the given landing page, click the Page Settings gear icon.

   

2. Click the Nav Info Tab and find the “Thumbnail Alt text” field. This field only appears after you have added a Page Thumbnail.

   

3. Enter your alt text, then save and publish the page.

Add alt text in Resources' quick action panel

Best practice: while uploading media into Resources, easily pop open the quick actions panel to add your alt text to images in a super efficient way!

Writing meaningful image descriptions

Alt text should describe the meaning of your image rather than its actual appearance. In order for the text to be more effective to your users, it is important to follow some basic guidelines.

• Write alt text before choosing an image: Define what you would like the image to convey and how it fits into the page before you select the image.

• Keep descriptions as short as possible: Use text that represents the content and function of the image with concise language. Keep your description to no more than two sentences (125 characters or fewer).

• Let users know the image is decorative/unimportant: If the image is not important to the page content, you can enter “Decorative Image” (without the quotes) into the field.

• Note the surrounding context: Add in language that explains what the image represents to the page. This is especially true if the image has text or contains important words.

• Inform users about images that link away from the page: If you decide to apply a link to an image, you will need to provide additional information in the alt text about what the link will do.

• Captioned images: If the image has a caption, you can link both the caption and the image and enter “Decorative Image” as the alt text. Example

Examples of effective Alt Text

alt=”Three students reading books in the school library”

alt=”Final sales and seasonal items”

Ensure ADA compliance by requiring alt text

Resources settings are available to help ensure ADA compliance on your site by requiring alt text in order for images to be shown on the site. There are separate toggles for Resource elements and the content editor. A warning box will display the number of images that will be affected by enabling the alt text requirement for Resource elements.