Issue/Question
Under the Accessibility Final Checks, I receive the Critical Problem:
Images must have alternate text
Environment
Cause
Potential problems are either code that may cause errors or possible errors that cannot be automatically checked and require human review.
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.").
Avoid using images with text in them. If you must use an image with text, be sure that all text contained in the image is typed out in the description.
- Click Yellow Light Bulb to check out page.
- Click Edit tab.
- Click Edit button on the content area where the image identified in the source code section of the error is located.
- Edit Image and shorten alternative text.
- Save page.
- 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.
- Edit the Gallery asset on the page.
- In the top navigation, click Content > Assets for a list, then filter by name.
- Check out the asset and Edit.
- In the Images section, fill out the Caption field and add a meaningful description.
- Save gallery.
- Publish.