Web editing - How do I add alt text or caption my images?

Step-by-step instructions to add alt text and captions to images within the episerver CMS

Adding text to describe images and add context for website visitors is vitally important. It not only helps visually impaired website visitors, but it is also required by law. We believe in going above and beyond the letter of the law to improve our site content. One way we are doing that is by visibly displaying alt text for all users in the section just below an image, called the image description or photo caption.

For some background, alternative text, or alt text, is the text that is read aloud to visitors of the site who use a screen reader, either because of a visual impairment or for their preference. The alt text is meant to describe what the picture represents. We're aiming to push the alt text a step further and also convey why it's included in the page to provide additional context to readers.

With this method, visually-impaired visitors will see the alt text they need, and sighted visitors will see the alt text as a caption under the image. This implementation of Universal Design will tremendously improve our site's accessibility rating, as well as provide better content for all.

Adding alt text is not technically difficult. Coming up with the actual text can be a challenge, but it is also an important opportunity.

To add alt text to an image

  1. Open the editor and find an image that needs alt text (or one that you'd like to update) and either right click on it to choose the Image option
    Menu that appears when right-clicking an image in the editor
    or click on the image and choose the Insert/edit image button from the toolbar
    Selecting an image in the editor
  2. In the Image description field, type the information that you feel describes the photo and why it's included on the page
    Editor window showing where to place alt text for an image
  3. Click OK and publish your content.

Best practices

  • Image descriptions should be short, concise and to the point 
  • The text you enter will be read aloud to visitors that use a screen reader, and will be seen by visitors as a caption below the image
  • Ask yourself why you chose that particular picture. What value does it add to the page? What would a person miss out on by not seeing it?

These options will omit the visible caption on the page, but will include alt text for vision impaired readers.

  • If your image is a logo, end the image description with "logo". For example, "UWL University Communications logo". 
  • If you find that the visual caption of a particular image impedes the visual look of the page, end the image description with "(no caption)". For example, "Printer icon (no caption)".

What's with the blurry images and yellow outlines?

If you are logged into episerver and visit one of your pages and notice a blurry image, or you're in the editor and see a yellow outline around an image, these are signals that your image has improper alt text and needs to be fixed using the steps above.

Example of an image without alt text

See Also:

Keywords:alternative text, alt-text, cutline, image description, yellow outline, blurry image, blurred image, not valid   Doc ID:104718
Owner:Jake S.Group:UW-La Crosse
Created:2020-08-06 15:29 CDTUpdated:2022-10-20 09:37 CDT
Sites:UW-La Crosse
Feedback:  0   0