Images Must Have Alternate Text

Issue/Question

Under the Accessibility Final Checks, I receive the Critical Problem: 

Images must have alternate text

Environment

• Web CMS

Cause

Final Checks evaluate all the code on a page and detect accessibility issues not meeting WCAG 2.0 (Level AA) standards. 

It detected the page contains an image missing an alternative description. Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.

Resolution

Add an alternative description to all images on the page. Image alt descriptions should be less than approximately 125 characters while remaining as descriptive as possible. 

Rather than a short description like "students walking," describe the entire scene (ex., "Two WKU students walking through a shaded part of main campus on a sunny day.").

1. Click  Yellow Light Bulb to check out page.
2. Click  Edit tab.
3. Click  Edit button on the content area where the image identified in the source code section of the error is located.
4. Edit Image and shorten alternative text.
5. Save page.
6. Click the Publish button to run the accessibility final check again. When the issue is resolved it will no longer display in the accessibility check.

Galleries

Example - Source Code:<img class="d-block img-fluid mx-auto" src="https://www.wku.edu/ldp_gallery/.private_ldp

If the source of the image contains the class and src in the source code, this means there is a Gallery Asset on the page containing images that are missing the alt description. Ensure all images have the caption field completed under the Images section.

1. Edit the Gallery asset on the page.
   1. In the top navigation, click Content > Assets for a list, then filter by name.
2. Check out the asset and Edit.
3. In the Images section, fill out the Caption field and add a meaningful description.
4. Save gallery.
5. Publish.