Embedded Files
Accessibility for Academics
Reasons to Optimize Images for Accessibility
Reasons to Optimize Images for Accessibility
Another useful tool and probably more used than video are images.
Students that have difficulty seeing may not get the full impact of an image that other students do. And, particularly for students that make use of screenreaders, they may miss out on important insight that the image gives to the lesson. Finally, maybe you linked to the image from another website. Often, these sites tend to change and update, which can break the link. This can then make it so students, in general, are not able to see the image at all.
What's the Solution?
What's the Solution?
The solution for making images more accessible and longer lasting is alt-text. Short for "Alternative Text", alt-text allows you to describe the image without it showing up. Nearly all browsers support alt-text.
An example is the picture on the right. On some browsers, you can hover your cursor over the image and see the alternative text.
The image below, which is "broken", also had alt-text, allowing you to still understand what the image was trying to convey.
When do I use Alt-Text?
When do I use Alt-Text?
Here's the general rule of thumb: If you are using the image to make a point or describe something, it should get alt-text.
However, if you are using the image for decorative purposes only, then you do not have to create alt-text for it. An example is when we used the question mark image on the last page. We don't really need alt-text on it because the image itself does not really do much-- it simply denotes a "Did you Know?" space and is otherwise decorative. Users that are hard of seeing would never have known it was there.
Using Alt-Text on Images on...
Using Alt-Text on Images on...
**Note: all videos below have both Transcripts and Close Captions, as well as related text instructions.
D2L
D2L
Anywhere you can type or add an image on a D2L Tool (like descriptions of Course Activities, designing Quiz questions or Discussions, etc.) you can add alt-text to an image.
Find and click on the Image button in the toolbar.
Then click on My Computer.
Click on Upload.
Navigate to the appropriate image.
D2L will give you a pop-up automatically to insert alt-text or to say that it is decorative.
Click on OK.
For images already in the D2L Text area:
Click on the image.
In the toolbar that appears, click on the image icon.
Put your alt-text in the Alternative Description text box.
Click on Save.
Google Sites
Google Sites
Click on the image. NOTE: you may need to click on the image twice, first to select the image and again to get the toolbar pop-up.
Click on the three vertical dots.
Choose Alt text.
Type in your alternative text in the text box provided.
WordPress
WordPress
**This is assuming you have access to the WordPress "backend"/Site dashboard
Go to the site dashboard.
Go to the Media Library.
Click on the image that you want to add alt-text to.
In the appropriate text box, add your alternative text.
Click on the X in the upper-right corner.
Microsoft Word
Microsoft Word
Right-click on the image.
In the menu that appears, click on Format Picture...
Choose the Layout and Properties icon, the second image from the left.
Then choose Alt Text.
Give your image a title and provide your alternative text.
Google Docs
Google Docs
**This will work for Google Slides and some other Google Products too.
Insert your Image into your Doc
Right-click on it and choose Alt Text in the menu that appears
Alternatively, you can click on the image and use the Windows shortcut CTRL+ALT+Y or the Mac shortcut CMD+ALT+Y
Type your alt-text into the Description textbox. You may leave the Title blank, though it may be useful for quickly ID'ing the image later.
Special Note on PDF's
Special Note on PDF's
In general, if you are creating PDF's for your class, you should be using Microsoft Word as your starting point and then export the document as PDF. Alt-text for images should be created at this step in the process.
However, you may sometimes find that you have scanned in an image from a textbook that does not describe the image well. In this case, you will have to manually add alt-text to the PDF. The process is as follows:
Open the PDF in the paid version of Adobe Acrobat Reader
Go through the PDF and add labels to images
Open the right-hand sidebar and select the tag to do this
Find the Accessibility Toolset
Add alt-text to the labels
Tips for Writing Alt-Text
Tips for Writing Alt-Text
It is often difficult to convey the meaning of an image. There are, however, some useful tips:
Focus on what the image represents and how it fits into your overall presentation.
Be concise. In general, a single sentence (5-7 words) should suffice but you can use another if needed.
If you find that two sentences are not enough or you want to provide more context to the image, you may want to caption your image in addition to the alt-text. However, you may then want to re-consider if the image is needed at all. We will only go over the most used software and tools. The same process from one of these can be used to provide a caption in other software or tool as well (ex. like creating a table with two rows, adding your image to the top row and captions to the bottom row).
You do not have to say "image of". Most screenreaders will inform the user what it is reading the alt-text of (ex, in the case of the above tutorials, NVDA stated "Graphic" before saying the alt-text of the image).
Page updated
Report abuse