Images Must Have Alternate Text

Issue/Question

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

Images must have alternate text

Environment

  • Omni CMS

Cause

Potential problems are either code that may cause errors or possible errors that cannot be automatically checked and require human review.

Omni CMS 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.
  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.

 

Details

Article ID: 3882
Created
Thu 11/18/21 12:58 PM
Modified
Wed 12/6/23 1:40 PM

Related Articles (3)

Instructions for adding a slider (carousel image gallery) to the top of a page above the page's title and content in the new Site Template.
Instructions for creating a grid gallery asset in Omni CMS.
Instructions for using the accessibility check feature of final checks when publishing a page.