Accessible Pictures and Images
Pictures and images become accessible when you include alternative text, often shortened to alt-text. Without alt-text, students with visual impairments will not have access to the information found in pictures, images, charts, and graphs. Alt-text should be as descriptive as possible. How you add alt-text to an image will vary depending on the program you are using to create a resource.
In this chapter:
- Alt-text should not contain image names or file extensions
- Do not begin with “picture/image of” unless the format is particularly relevant to the meaning, i.e. sketch, diagram, photograph, etc.
- Alt-text should end with a full stop. This ensures that screen readers pause before reading the following sentence.
In some cases, you may add an image purely for aesthetic purposes to improve the look of a document or slide deck, and that image does not add any important meaning to the content (think background images). You can mark these images as “decorative” (when available as an option) instead of writing alt-text.
Images of text should be avoided as much as possible. Images of text are most frequently seen when documents are scanned and shared as either an image or a PDF. Articles, press releases, newsletters, etc. in PDF form are usually able to be read by screen readers. But sometimes, we have a resource that was scanned from an original document and although it is saved as a PDF, it’s stored as an image instead of text. In these cases, if you cannot find an alternative to the resource that is text based, you will need to provide an alternative means of access.
If you are considering using an existing PDF for your course and you aren’t sure whether it is accessible, you can try a couple of things. This example uses Adobe Acrobat Reader.
- Search for text. Open the PDF document. On your keyboard, press CTRL+F (Windows users) or Command+F (Mac users). This will open the Find option. Type a word that you know is in the document, and press enter to see if it can be found.
- Searchable text:
Screenshot of a PDF with searchable text in Adobe Acrobat Reader. Adobe product screenshot reprinted with permission from Adobe. - Non-searchable text:
Screenshot of a PDF with non-searchable text in Adobe Acrobat Reader. Adobe product screenshot reprinted with permission from Adobe.
- Searchable text:
- Test the Read Out Loud function. Watch the short screencast (1:11) to learn more about this tool in Adobe Acrobat Reader:
To view this screencast with captions, please see Adobe Acrobat Reader Read Out Loud – YouTube
Screencast “Adobe Acrobat Reader Read Out Loud” by Ashley Priest is licensed under CC BY-NC-SA 4.0.
For complex images like diagrams and charts, alt-text may not be enough to convey the information that you hope students will get from the resource. If the diagram or chart is an image, it won’t be accessible to those who use assistive technologies like screen readers, and you will need to provide a text alternative in addition to the alt-text. See the flowchart below as an example:
Although there is text on the image, it cannot be read by a screen reader and Blackboard Ally is unable to provide an alternative format. For flowcharts, alt-text and text alternatives should clearly describe the beginning point, progress, and conclusion. The text alternative for this flowchart could be:
Title: “Remote Teaching @ Georgian”
Chart begins: “Do you need to deliver a “lecture”?”
If “Yes” to delivering a lecture, then Q: “does it have to be live”?
- If “Yes” to live, then “Use WebEx”, then “Use Flipgrid, Blackboard discussion boards, journals, use Blackboard quizzes/short assignments to check on comprehension”
- If “No” to live, then “Use Screencast-o-Matic to create screencasts to post on Blackboard”, recommendation: post screencasts of recorded ‘lectures’ instead of delivering a live ‘lecture’ through WebEx
- then “Use Flipgrid, Blackboard discussion boards, journals, use Blackboard quizzes/short assignments to check on comprehension”, then dotted line to “use WebEx to provide individual or small group support”
- dotted line to “Use WebEx” “use interactive session to provide help, clarify, and support students”
If “No” to delivering a lecture, then “assign textbook readings; use YouTube, TED Ed, Khan Academic videos, or LinkedInLearning; create interactive lessons with H5P for Blackboard; use open educational resources (OERs)”, then dotted line to “use WexEx to provide individual or small group support”
You can attach the text alternative in a document instead of directly below the diagram or chart to save space and scrolling in your course. Just make sure that the document is saved with a meaningful name and that you make use of appropriate heading styles and list options. For this example, a meaningful name for the text alternative document might be “Text alternative for a decision flowchart for remote teaching”.
When writing alt-text for detailed images, such as infographics or graphs, try to provide the information that is conveyed in the image. Describing a chart as ‘A bar chart showing sales over time’, for example, would not be useful to someone who cannot see the details in the chart. Try to convey the insight; for example, ‘A bar chart showing sales over time. In July, sales for brand A surpassed sales for brand B and kept increasing throughout the year.’
Flow charts and infographics that are built within a word processor or presentation tool will be more accessible than an image or screenshot. Consider the use of ‘Smart art’ in PowerPoint to build visual representations that are accessible to screen-readers.
Watch this screencast (4:19) to learn how to add alt-text to pictures and images in a Microsoft Word document:
To view this screencast with captions, please see Accessible Microsoft Word Documents – Alt-text
Screencast “Accessible Microsoft Word Documents” by Ashley Priest is licensed under CC BY-NC-SA 4.0.
Watch this screencast (1:08) to learn how to add alt-text to pictures and images included in Microsoft PowerPoint slides:
To view this screencast with captions, please see Adding alt-text to images in Microsoft PowerPoint
Screencast “Adding alt-text to images in Microsoft PowerPoint” by Ashley Priest is licensed under CC BY-NC-SA 4.0.
Adding alt-text in Blackboard
There are two ways to add an image in Ultra, using either the attachment icon or the image icon in the toolbar. Either way, the principles of adding alt-text are the same. This screencast (3:31) will walk you through both options.
Screencast “Adding images and alt-text in Blackboard Ultra” by Ashley Priest is licensed under CC BY-NC-SA 4.0.
Attribution and References
Accessible Pictures and Images is a derivative of “Use of Images, Objects, and Non-Text Content [New Tab]” and “Accessibility in Blackboard Ultra [New Tab]” by the University of Lincoln, used under CC BY-NC-SA 4.0. Adaptations include the addition of software-specific screenshots and screencasts that demonstrate how to properly add alt text to images.
