Tag: Images

Images in OmniUpdate

Oct 17, 2019 - 7:55 am GMT+0000

Images by default are inaccessible to those who cannot see them due to poor vision or blindness.

In general, images containing text should be avoided in favor of text alternatives to convey the same meaning. This is a legal requirement of the WCAG 2.0/2.1 specification.

Images Need Descriptions

Add Image pane in OmniUpdate showing Source and Description fields
  • We need to provide descriptions for anything that contains informative content.
  • Photos can be appropriate descripted using the Description field (pictured in preceeding photo), which contains a succinct description of the content of the image.
  • Keep in mind that we are just trying to convey the content of the image to the user and are not trying to overwhelm them with a wordy description.

Decorative Images

If for some reason an image must be added to the page and it does not require a description, if used for look or feel for example rather than contributing to the meaning of the page, we can give leave the Description field empty, which will tell screen readers to ignore it.

NOTE: Use caution with an empty description field. If there are words on the image, or the image links to another page, the Description field must not be empty.

Using Images in Canvas

Oct 17, 2019 - 5:07 am GMT+0000

Images are one of the most commonly used elements that are prone to errors when creating accessible Canvas content. By not taking the proper steps when adding images to a page, users of assistive technology may not be able to properly understand the purpose of the image and could misunderstand the content of the page as a result.

There is one key concept to understand when marking up images for accessibility in Canvas. Consider the following example page.

Canvas Images Example Page

The page shown is a mock English 100 course syllabus page with the course description and an image shown on the right side of the image. The image shown is not something that would add much meaning to the page. Should alternative text be provided for this image? The answer in this case is most likely “no,” since the image is being used as a “decorative image.” Decorative images will be completely hidden from screen reader users, so they will have no indication that an image is present on the page.

While the example used prior may be true for the ENGL 100 course, it is possible that in the context of an Art course, the alternative text may actually be necessary to understand the meaning since knowing information about the art itself might be the focus of a page.

Canvas’ built-in tools along with the accessibility checker help guide users to create the content accessibly. You can insert an image by navigating to “Embed Image” in the Rich Content Editor shown in the following image.

Location of Embed Image button in Canvas Rich Text Editor

Once you have pressed the Embed Image button, a window that assists you in adding the image to the page will pop up.

Canvas Embed Image Popup window with options for Alternative text and toggle for decorative images

You will have the option to choose the Image Source from either a URL, Canvas, or Flickr. Wherever possible, it is best practice to store the image in Canvas. If you use a URL that links to another website and that content is removed, the image will no longer display in your Canvas course.

Under the “Attributes” heading, the first option is to add Alt, or alternative, text. This must be added for all non-decorative images in Canvas. If you plan to mark the image as decorative, you can skip the alt text section and check the box title “Decorative Image.“

The last option allows you to specify the height and width of the image that you are adding, in pixels.

For adding complex images, such as charts and graphs, other approaches must be taken.