Difference between revisions of "Make images more accessible"

From EdTech Help
Line 30: Line 30:
 
[[File:Accessibility Checker.png|frame|center]]
 
[[File:Accessibility Checker.png|frame|center]]
  
You can double-check the accessibility of images embedded into the Rich Text Editor by clicking the Check icon.
+
You can double-check the accessibility of images embedded into the Rich Text Editor by clicking the '''Check Accessibility''' icon.
  
 
{{Template:Accessibility}}
 
{{Template:Accessibility}}

Revision as of 19:49, 30 August 2021

Some users will be unable to see images and/or comprehend what they are meant to convey. Alternative Text can help give context and meaning to an image.

When to Add Alternative Text Descriptions for Images

  • Simple image with "simple meaning" - Add descriptive alternative text of 10 to 169 characters as outlined below. The alternative text should describe the educational/informational purpose of the image.
  • Complex image with "rich meaning" - Add a paragraph above or below the image that goes into more detail. Some pointers, such as "Next image," or "Previous image," will help tie them together. If the image is referenced from elsewhere in the document, add a paragraph below it that can serve as a caption, and then refer to it. If the longer alternative text is not feasible, create a link to an external Web page that contains an appropriate description.
  • Decorative image - If the image is purely decorative or used for visual formatting, the alternative text description should be left blank to hide it from users of assistive technology.

Examples of Text Alternatives for Images

  • Alternative Text: “Scientist in a lab filling a vial with fluid”
  • Description in the text before or after the image: “The next/previous image shows a female forensic scientist who is filling a vial containing a small amount of blood with fluid to denature the sample as part of the process of the PCR analysis method of DNA profiling. In the background is a centrifuge, which will aid in the process of extracting the DNA from the sample of blood.”
  • Reference farther away in the body of the document: "... Figure 1.3 shows the correlation between the...." [Image] Figure 1.3

Steps to Add Alternative Text to a Newly Embedded Image

Steps to Add Alternative Text to a Newly Embedded Image.png
  1. If you do not already have an image embedded in the text box, click on the Image icon in the Rich Text Editor's toolbar to insert an image. The Image icon displays a picture that looks like a landscape, with mountains and a sun. For more information on adding an image, please see the article Embed an image in a text box.
  2. In the Image Properties dialog window, enter short, meaningful descriptive text in the Alternative Text box.
  3. Click OK to confirm the addition of the text.

Steps to Add Alternative Text to an Existing Image

Steps to Add Alternative Text to an Existing Image.png
  1. Click on the image you have embedded in the text box to select it.
  2. Click on the Image icon in the Rich Text Editor's toolbar. The Image icon displays a picture that looks like a landscape, with mountains and a sun.
  3. In the Image Properties dialog window, enter short, meaningful descriptive text in the Alternative Text box.
  4. Click OK to confirm the addition of the text.

Quick Check: Sakai's Accessibility Checker

Accessibility Checker.png

You can double-check the accessibility of images embedded into the Rich Text Editor by clicking the Check Accessibility icon.

More questions about Accessibility?


SAKAI logo2021.png

This page is adapted from an equivalent Sakai Community help article.

The original Sakai Community help article, unedited, is available at https://sakai.screenstepslive.com/s/sakai_help