For training that enhances your effectiveness and inspires your students.

Formatting Images (Webpage/LMS)

Images need appropriate alternative text descriptions (ALT-Text) in order to be understood by users with vision impairment including those using screen readers.


Standard

  • Guideline 1.1-  Text Alternatives: Provide text alternatives for any non-text content:
    • 1.1.1 Non-text Content (Level A)
      • All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
      • Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt=””) or implemented as CSS backgrounds. All linked images have descriptive alternative text.
      • Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page

Example of Standard in Action

Every image worldmapwlinemust have an “alt" attribute within the HTML image tag; i.e. <alt=”World Map”>.  Some browsers will display the “alt tag” description when you move your mouse over the image.  If the image is merely decorative, then the null description <alt=””> is sufficient.

Otherwise the The description should typically:

  • Stay accurate and equivalent in presenting the content and function of the image.
  • Keep succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically no more than a few words are necessary, although a short sentence or two may be appropriate a times.
  • Uniquely describe the image for a better understanding of how it fits into the context.  
  • Eliminate the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph, chart or illustration, etc. is important to note, then it may be useful to include this in alternative text.

Example of Issue

A screen reader will skip over images that have no alternative text thus eliminating useful information to a reader who cannot visually decode images. Providing an effective text description depends on the image your are describing.

For example, a purely decorative image Small decorative gold bullet may not have any text associated since it conveys no meaning.

Scientific diagrams and images thumb filtration diagrammay require “concise and expert” text to accurately convey the meaning, including linking to another page with a more detailed explanation.

For a screen reader user, an image with no descriptive tag is equivalent to a sighted person seeing a black box.

black box - no alt tag

Locating the Issue in Your Course

You will want to look through your course for each page that has an image.  In order to test whether an image on a page is correctly labeled, you can either look at the HTML to make sure that a meaningful <alt = “descriptive text”> is associated with each image otherwise you can use the Web Accessibility Evaluation Tool (WAVE) to test the images on a page.

  • Go to the Web Accessibility Evaluation Tool (WAVE)
  • Copy and Paste the URL of the Web page that you want to test
  • Look for images and any associated text errors insufficient alt text  (insufficient alt text ) duplicate alt text (duplicate alt text) in the generated report

Resources to Align With Standard

WebAIM (Web Accessibility in Mind) provides web accessibility solutions to individuals with disabilities. Links provided will give you information about the different types of visual impairments, such as blindness, colorblindness and low vision and how to make the web more accessible to users with visual disabilities.

Links to Related Articles

Leave a Reply