Difference between revisions of "Alt Text and Captioning"

From Help Wiki
Line 2: Line 2:
 
Why and Where to Provide Alt Text in your Web-based Content.
 
Why and Where to Provide Alt Text in your Web-based Content.
 
|content=
 
|content=
==Alt Text==  
+
==What is Alt Text?==  
 
Alt Text (or "Alternative Text") provides text-based descriptions of media content to aid people who are utilizing screen readers so that they can have a better understanding of and context for what that particular content is. A screen reader is an assistive technology available through a computer which can read digital content aloud to a user.
 
Alt Text (or "Alternative Text") provides text-based descriptions of media content to aid people who are utilizing screen readers so that they can have a better understanding of and context for what that particular content is. A screen reader is an assistive technology available through a computer which can read digital content aloud to a user.
  
  
===Alt Text in Canvas===
+
===How to include Alt Text in Canvas===
  
You can upload image files to your Canvas site from two locations, the '''Sidebar''', and the '''Canvas File page'''. Both options provide you with a space to provide Alternative Text to describe the content of the image you are adding to your site.
+
There are several ways to add image files to your Canvas site:
 +
* by using the '''Images''' tab in the Links-Files-Images sidebar (depending on browser window size, the sidebar may show at upper right or bottom of the page)
 +
* via the '''Embed Image''' button in the Rich Content Editor, and then the '''Canvas''' tab
 +
* at the '''Files''' page using drag-and-drop or selecting it from your computer
 +
* by uploading it to your own Canvas file storage
 +
* into a '''Module''' using the '''+''', '''Add''' and '''File''' option ('''AVOID''' this option as you will not be able to add alt text)
 +
 
 +
 
 +
But the only options which allow you to add Alt Text when adding the image are:
 +
* the '''Images''' tab in the Links-Files-Images sidebar
 +
* the '''Embed Image''' tool
 +
 
 +
If you add images using any of the other methods, you will need to add alt text when you insert the image into a page or activity.
  
  
 
====Adding Alt Text From the Sidebar====
 
====Adding Alt Text From the Sidebar====
Through the sidebar's '''Image tab''' you can upload image files from your computer and add alt text at the same time.
+
Through the sidebar's '''Images tab''' you can upload image files from your computer and add alt text at the same time.
 
[[File:Screen Shot 2018-04-17 at 2.54.36 PM.png|150px|thumbnail|center|Where you can insert Alt Text to your image from the sidebar]]
 
[[File:Screen Shot 2018-04-17 at 2.54.36 PM.png|150px|thumbnail|center|Where you can insert Alt Text to your image from the sidebar]]
  

Revision as of 10:02, 30 October 2018

Why and Where to Provide Alt Text in your Web-based Content.

What is Alt Text?

Alt Text (or "Alternative Text") provides text-based descriptions of media content to aid people who are utilizing screen readers so that they can have a better understanding of and context for what that particular content is. A screen reader is an assistive technology available through a computer which can read digital content aloud to a user.


How to include Alt Text in Canvas

There are several ways to add image files to your Canvas site:

  • by using the Images tab in the Links-Files-Images sidebar (depending on browser window size, the sidebar may show at upper right or bottom of the page)
  • via the Embed Image button in the Rich Content Editor, and then the Canvas tab
  • at the Files page using drag-and-drop or selecting it from your computer
  • by uploading it to your own Canvas file storage
  • into a Module using the +, Add and File option (AVOID this option as you will not be able to add alt text)


But the only options which allow you to add Alt Text when adding the image are:

  • the Images tab in the Links-Files-Images sidebar
  • the Embed Image tool

If you add images using any of the other methods, you will need to add alt text when you insert the image into a page or activity.


Adding Alt Text From the Sidebar

Through the sidebar's Images tab you can upload image files from your computer and add alt text at the same time.

Where you can insert Alt Text to your image from the sidebar

Canvas makes this easy by prompting you to include alt text in the file upload window's Alternative text field.

Remember to add the Alternative Text.


Alt Text From the Canvas File Page

Canvas provides a place to include Alt Text (Alternative Text), but you will need to enter it manually.

Default Alt Text (name of the image) Canvas automatically populates the "Alt text" field for an image with the name of the file as the alternative text, but using the name of the file is not the correct practice. Instead, please provide a brief description of the image as you would for someone who can not see it.

For instance, the file name of the image below is kids-tech-revised.jpg, which Canvas automatically enters in the Alt Text field.


Where to insert alt text


It is important to change the automated Alt Text to text which better describes the image. This will provide users who are utilizing screen readers a better understanding of and context for what that particular media content is.

kids-tech-revised.jpg

An example of appropriate Alt Text: One boy and two girls sitting on a couch with a smartphone, tablet, and laptop.


Note: Unlike uploading an image from the sidebar, when using the embed image feature you will not be prompted to input correct Alt Text, so it is important to pay attention to the automatically propagated Alt Text and change as needed.


Decorative Images

A Decorative Image is generally an unimportant graphic or design used only to embellish the page. If you think the image you are uploading is for decorative purposes only, check the Decorative Image box. This will allow those who are using screen readers to know it is for decoration only.

The Decorative Image Check Box

Alt Text in WordPress

Add alternative (Alt) text to images.

  1. In the Page or Post, click on the image once to highlight it.
  2. From the pop-up mini-menu, click on the Edit (pencil icon) button
  3. At the Image Details page, enter a description of the image in the Alternative Text field
  4. Click the blue Update button in the lower right corner to save.


The Edit Icon
Where to insert Alt Text


An example of appropriate Alt Text: An image of a Pallas Cat in black, white, and grey.


Video Captioning

Make sure that the video you link to or create includes captions or a transcript of the audio to assist screen readers.

To check if the YouTube video includes captioning, check the lower right-hand side of the screen for the CC icon.

NOTE: Make sure you check the accuracy of the captions on YouTube before you upload it to your site. YouTube includes automated captioning which can often be inaccurate in comparison to the actual audio.


Screenshot of Youtube Captioning