Difference between revisions of "Alt Text and Captioning"
m (Carpenti moved page Alt Text and Captioning Within Canvas to Alt Text and Captioning) |
|||
(56 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{TwoColumn|lead= | {{TwoColumn|lead= | ||
− | Why and | + | Why and Where to Provide Alt Text in your Web-based Content. |
|content= | |content= | ||
− | Alt Text (or | + | ==What is Alt Text?== |
− | + | Alt Text (or "Alternative Text") is a brief text-based description of media content for people who are using screen readers so they can have an 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=== | |
− | Canvas | + | |
− | For instance, the file name of the image below is '''kids-tech-revised.jpg,''' which Canvas automatically enters in the Alt text field. | + | 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 | ||
+ | * AVOID adding image files into '''Modules''' as there is not a way to add alt text. | ||
+ | |||
+ | |||
+ | NOTE: The only options which allow you to add Alt Text when adding/uploading 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 can add alt text when you insert/embed the image into a page or activity (e.g. discussion, assignment, quiz). | ||
+ | |||
+ | |||
+ | ====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. | ||
+ | [[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]] | ||
+ | |||
+ | After you have selected the file for upload, you will need to include alt text in the file upload window's '''Alternative text''' field before you can click on the Upload button. | ||
+ | |||
+ | [[File:Screen Shot 2018-04-17 at 2.55.57 PM.png|150px|thumbnail|center|Remember to add the Alternative Text.]] | ||
+ | |||
+ | |||
+ | |||
+ | ====Adding Alt Text via the Embed Image Tool==== | ||
+ | When using the '''Embed Image''' tool in the Rich Content Editor, Canvas will automatically fill the "Alt text" field with the name of the file. | ||
+ | Given file names are not always the best means for describing an image, you may need to revise this information to a more appropriate description. | ||
+ | |||
+ | For instance, the file name of the image below is '''kids-tech-revised.jpg,''' which Canvas automatically enters in the "Alt text" field. | ||
− | |||
− | |||
[[File:Screen Shot 2017-03-14 at 12.08.14 PM.png|center|300px|thumbnail|Where to insert alt text]] | [[File:Screen Shot 2017-03-14 at 12.08.14 PM.png|center|300px|thumbnail|Where to insert alt text]] | ||
− | + | ||
+ | By changing the information from a file name to a brief description of the image, you will provide users who are utilizing screen readers a better understanding of, and context for, what that particular image content is. | ||
+ | |||
[[File:Kids-tech-revised.png|300px|thumbnail|center| kids-tech-revised.jpg]] | [[File:Kids-tech-revised.png|300px|thumbnail|center| kids-tech-revised.jpg]] | ||
− | '''An example of appropriate Alt | + | '''An example of appropriate Alt Text:''' One boy and two girls sitting on a couch with a smartphone, tablet, and laptop. |
+ | |||
+ | |||
+ | ===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. | ||
+ | |||
+ | [[File:Screen Shot 2018-04-19 at 1.48.33 PM.png|center|150px|thumbnail|The Decorative Image Check Box ]] | ||
+ | |||
+ | ===Alt Text in WordPress=== | ||
+ | |||
+ | '''Add alternative (Alt) text to images.''' | ||
+ | #In the Page or Post, click on the image once to highlight it. | ||
+ | #From the pop-up mini-menu, click on the Edit (pencil icon) button | ||
+ | #At the Image Details page, enter a description of the image in the Alternative Text field | ||
+ | #Click the blue Update button in the lower right corner to save. | ||
+ | |||
+ | |||
+ | |||
+ | [[File:Screen Shot 2017-10-10 at 12.57.01 PM.png|300px|thumbnail|center|The Edit Icon ]] | ||
+ | |||
+ | [[File:Screen Shot 2017-10-10 at 12.57.15 PM.png|300px|thumbnail|center|Where to insert Alt Text ]] | ||
+ | |||
+ | |||
+ | |||
+ | '''An example of appropriate Alt Text''': An image of a Pallas Cat in black, white, and grey. | ||
− | |||
===Video Captioning=== | ===Video Captioning=== | ||
Line 45: | Line 97: | ||
*[[Optical_Character_Recognition|Optical Character Recognition]] | *[[Optical_Character_Recognition|Optical Character Recognition]] | ||
====Canvas Accessiblility Checklist==== | ====Canvas Accessiblility Checklist==== | ||
− | *[[ | + | *[[Accessibility_Checklist|Accessibility Checklist]] |
− | *[[ | + | *[[Utilizing_Headings|Utilizing Headings ]] |
− | *[[ | + | *[[Inadequate_Color_Contrast|Inadequate Color Contrast]] |
− | *[[ | + | *[[Utilizing_Descriptive_Text|Utilizing Descriptive Text]] |
*[[Proper_List_Format| Proper List Format]] | *[[Proper_List_Format| Proper List Format]] | ||
− | *[[ | + | *[[Alt_Text_and_Captioning|Alt Text and Captioning ]] |
*[[Accessible_Video|Accessible Video]] | *[[Accessible_Video|Accessible Video]] | ||
*[[Create_an_Accessible_PDF|Create an Accessible PDF]] | *[[Create_an_Accessible_PDF|Create an Accessible PDF]] |
Latest revision as of 10:43, 30 October 2018
Why and Where to Provide Alt Text in your Web-based Content.
What is Alt Text?
Alt Text (or "Alternative Text") is a brief text-based description of media content for people who are using screen readers so they can have an 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
- AVOID adding image files into Modules as there is not a way to add alt text.
NOTE: The only options which allow you to add Alt Text when adding/uploading 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 can add alt text when you insert/embed the image into a page or activity (e.g. discussion, assignment, quiz).
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.
After you have selected the file for upload, you will need to include alt text in the file upload window's Alternative text field before you can click on the Upload button.
Adding Alt Text via the Embed Image Tool
When using the Embed Image tool in the Rich Content Editor, Canvas will automatically fill the "Alt text" field with the name of the file. Given file names are not always the best means for describing an image, you may need to revise this information to a more appropriate description.
For instance, the file name of the image below is kids-tech-revised.jpg, which Canvas automatically enters in the "Alt text" field.
By changing the information from a file name to a brief description of the image, you will provide users who are utilizing screen readers a better understanding of, and context for, what that particular image content is.
An example of appropriate Alt Text: One boy and two girls sitting on a couch with a smartphone, tablet, and laptop.
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.
Alt Text in WordPress
Add alternative (Alt) text to images.
- In the Page or Post, click on the image once to highlight it.
- From the pop-up mini-menu, click on the Edit (pencil icon) button
- At the Image Details page, enter a description of the image in the Alternative Text field
- Click the blue Update button in the lower right corner to save.
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.