IMAGES AND ALT TEXT
ACCESSIBLE
FALL 2022 LUNCH AND LEARN #2
04
01
02
03
WHY?
ALT-TEXT
DESCRIPTIONS
CONTEXT
TABLE OF CONTENTS
Reasons for accessible images
When and how to use alt text
When and how to use descriptions
Examples of image accessibility scenarios
WHY?
ACCESSIBILITY
The Office for Civil Rights (OCR) at the U.S. Department of Education defines accessibility as meaning “when a person with a disability is afforded the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services as a person without a disability in an equally integrated and equally effective manner, with substantially equivalent ease of use.”
UNIVERSAL DESIGN
Universal Design is the design and composition of an environment so that it can be accessed, understood, and used to the greatest extent possible by all people regardless of their age, size, ability or disability.
FROM QM
Specific Standard 8.3: The course provides accessible text and images in files, documents, LMS pages, and web pages to meet the needs of diverse learners.
Guidance: The Specific Review Standard is met if the equivalent textual representations for images are located or linked within the course. The course provides alternatives to all images so that all learners have access to equivalent information. In instances in which alternative formats are provided, the general accuracy of the alternate content is verified.
IMAGES
Two basic guidelines for accessible media:
ACCESSIBLE IMAGES
ALT-TEXT
Used by screen-readers
DESCRIPTIONS
Used in-text to convey the same information
ADJACENT PAGE
Needed complex images require more description
ALT-TEXT
ALT-TEXT IS MEANT TO CONVEY THE WHY.
GOOD ALT-TEXT
EXAMPLE
Alt-text with no context:
Two people standing on a van.
Alt-text on a page about vacation:
Two traveling students stand on top of a van.
Alt-text on a page about van living:
Two remote workers stand on top of their van.
HOW DO WE ADD ALT-TEXT IN CANVAS?
ALT-TEXT IN CANVAS
ALT-TEXT IN CANVAS
ALT-TEXT IN CANVAS
ALT-TEXT IN CANVAS
DESCRIPTIONS
COMPLEX IMAGES NEED DESCRIPTIONS.
GOOD DESCRIPTIONS
EXAMPLE
Here’s a caption for this image:
In this painting, the artist Emanuel Leutze used light, color, form, perspective, proportion, and motion to create the composition.
What type of alt-text could be used here?
Depends on the context.
EXAMPLE
Check out the Image Description link beneath the chart.
Let’s see what it links to.
EXAMPLE
Notice it conveys the same information in a different way.
HOW DO WE ADD DESCRIPTIONS IN CANVAS?
ADD DESCRIPTIONS IN CANVAS
Remember: the goal is not always a description of the image but to convey the information.
CONTEXT
WHAT ABOUT ON QUIZZES?
EXAMPLE
Here are some examples from Maury Wrightson’s recently QM-reviewed GOL.105 course.
Alt-Text for the image:
"Minerals that is slightly shiny and does not appear to have clean fracture lines. Part of the mineral appears dark purple, part appears light green, and part appears white.”
EXAMPLE
Here are some examples from Maury Wrightson’s recently QM-reviewed GOL.105 course.
Alt-Text for the image:
Play audio description of the image in the file attached below
WHEN IS IT DECORATIVE?
EXAMPLE
Here is an example from Wesley’s CST.100 course.
In Announcements, Bitmojis or gifs can be useful to build presence or gain attention.
Since this image has no content use, it is considered “decorative.”
WHAT IF MY IMAGE IS A LINK?
EXAMPLE
Here is an example from the GCC Course Template.
Each of these icons have been updated to say “Link to ….” to meet accessibility needs.
When images are a link, it is best to state what the image links to rather than describe the image.
WHAT IF I TEACH STEM?
RESOURCES
Working in STEM Courses can provide unique challenges.
Here are two resources to help:
Effective Practices for Description of Science Content
QUESTIONS?
iss@germanna.edu
Schedule an appointment!
CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon and infographics & images by Freepik.
RESOURCES
(WAI), W. (2022). Complex Images. Retrieved 13 September 2022, from https://www.w3.org/WAI/tutorials/images/complex/#example-1-description-containing-structured-information
Effective Practices for Description of Science Content within Digital Talking Books. (2022). Retrieved 14 September 2022, from https://www.wgbh.org/foundation/ncam/guidelines/effective-practices-for-description-of-science-content-within-digital-talking-books
Understanding the Definition of Accessibility. (2022). Retrieved 13 September 2022, from https://www.ace-ed.org/understanding-the-definition-of-accessibility/
WebAIM: Alternative Text. (2022). Retrieved 13 September 2022, from https://webaim.org/techniques/alttext/#complex
Write good Alt Text to describe images. (2022). Retrieved 13 September 2022, from https://accessibility.huit.harvard.edu/describe-content-images