Difference between revisions of "Alt Text and Captioning"

From Help Wiki
Line 33: Line 33:
 
#At the Image Details page, enter a description of the image in the Alternative Text field
 
#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.
 
#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.01 PM.png|300px|thumbnail|center|The Edit Icon ]]

Revision as of 12:10, 10 October 2017

Why and where to insert Alt Text in your Web Based Content.

Alt Text

Alt Text (or, Alternative Text) and captions provide a description of visual media (e.g. images, video) so that those who are using a screen reader can understand what the media is.


Alt Text In Canvas

Canvas provides a place to include alt 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 this is not the correct practice for providing alt text for an image.

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


Screenshot of where to insert Alt text

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.


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 and white.

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