Add alt text to images

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.

Adding alt text to an image in the editor

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

    image-icon-editor.png

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

      right-click-example.png

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

    image-properties-example.png

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

Adding alt text to a navigation dropdown image

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

     gear-icon.png

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

     nav-inage.png

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

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

students-reading.png

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

FinalSales.png

alt=”Final sales and seasonal items”

Was this article helpful?
18 out of 19 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.