To Use Alt(ernative) Text or Not to Use Alt(ernative) Text for Images
How to Write More Meaningful Alt Text

Patrick Patterson    
ppatter2@uoregon.edu
https://tinyurl.com/alt-text-gla


Overview
Background
Types of Images
Informative
Decorative
Examples of Images from Websites
Resources


Background
Web Content Accessibility Guidelines - WCAG 2.1
Perceivable
Guideline – Text Alternatives
Non-text Content - Level A


Web Content Accessibility Guidelines - WCAG 2.1
1. Perceivable Information and user interface components must be presentable to users in ways they can perceive. 

Guideline 1.1 – Text AlternativesProvide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

1.1.1 Non-text Content - Level A All non-text content that is presented to the user has a text alternative that serves the equivalent purpose….


What is alt Text?
Used to describe an image
<img src="images/lost_lake.jpg" alt="Aerial view of Lost Lake in the Adirondack Mountains" />


Questions to Consider
Why are you using the image?
What are you trying to communicate with it?


Types of Images
Informative
Decorative
Functional
Images of Text
Complex Images - Food Security Status of U.S. Households in 2020
Image Maps - Canada Province Example


Informative Images
Aerial view of Lost Lake in the Adirondack Mountains


Informative Image
A duck standing on a rock that is sticking out of the water


Decorative Images
<img src="images/decoration.png" alt=" " />


Decorative Image
The Book With No Pictures By B.J. Novak
This is a great book that will help you in thinking about the importance of using words to communicate your message without the use of pictures.


Example 1
alt="two student in the makerspace lab using a 3D printer"


Example 1 with Image and Content

alt="two student in the makerspace lab using a 3D printer"

Discover UO Libraries’ events, exhibits, and workshops! Whether you’d like to visit a pop-up exhibit in the Design Library, attend a virtual DREAM Lab workshop to learn how to make an interactive website, join the Data Services book club, explore a digital exhibition about ghosts and monsters in Japanese votive slips, or learn how to use a free citation manager for your research. We’ve got you covered!



Example 2
alt="parents"


Example 2 with Image and Content
And asking for help is the first step in supporting your loved one’s journey to health.

alt="parents"

Parents: it’s a challenge you can meet head on
Hearing that your child or loved one has diabetes can be a shock.  But after that shock wears off....

Image retrieved from https://www.diabetes.org/healthy-living/loved-ones-caregivers on 10-27-2021.


Example 3
alt="by anmakn, on Flickr"


Example 3 with Image and Content
If you want more specific research help or you have a question (simple or complex) please email me at....

alt="by anmakn, on Flickr"

"Untitled" (CC BY-NC-ND 2.0) by anmakn

Image retrieved from https://researchguides.uoregon.edu/oboe
on 10-27-2021.


Summary
Alt Text is required even if it has an empty value
Use a short phrase to describe an image
Context is important
Avoid
Image of
One word descriptions
Do Add
Purpose
Location


Resources
WCAG Guidelines - https://www.w3.org/WAI/standards-guidelines/wcag/

How to Meet WCAG (Quick Reference) - https://www.w3.org/WAI/WCAG21/quickref/

WebAim Alternative Text - https://webaim.org/techniques/alttext/

Deque University - https://dequeuniversity.com