One of the simplest ways to make information more accessible is to add alternative text (alt text for short). It’s brief descriptions of images for users who can’t see them. But what to write? This is a deep dive into writing alt text that is usable and useful. You’ll learn how the right words can make images speak clearly.
Updated for AccessU and AccessU Summit 2017
Construction Documents Checklist before Construction
Writing Great Alt Text
1. Writing great alt text
Whitney Quesenbery
Center for Civic Design
@civicdesign | @whitneyq | @awebforeveryone
https://www.slideshare.net/whitneyq/writing-great-alt-text-61826426
3. Alt text is...
A principle of accessibility
Web Content Accessibility Guidelines 2.0
Principle 1: Perceivable
Information and user interface components
must be presentable to users in ways they
can perceive.
4. Alt text is...
A requirement for accessibility
Web Content Accessibility Guidelines 2.0
Guideline 1.1 Text Alternatives: Provide
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.
6. Alt text is...
Part of appealing to all senses.
Images – alternative text
Video – captions and video descriptions action
Audio - transcripts
An accessible UX principle:
Accessible Media: Appeal to all Senses
A Web for Everyone by Sarah Horton and Whitney Quesenbery
http://rosenfeldmedia.com/books/a-web-for-everyone/
7. Because technology needs it
Screen readers (and other assistive
technology) can't interpret the meaning
of the image without it.
<img src="fb.jpg">
<img src="twitter.jpg">
<img src="li-logo-square.jpg">
<img src="g.jpg>
<img src="btn1875412.jpg"
8. Because people need it
People who use
screen readers
and other AT
When images are
missing or turned
off
For translations
Jacob Vishnu
MariaTrevor
Personas from A Web for Everyone by Sarah Horton and Whitney Quesenbery
http://rosenfeldmedia.com/books/a-web-for-everyone/resources/
10. Alt text is invisible content
It's hard to tell if it's good or bad...or
even it it's there.
Even bad alt text passes some
accessibility checkers.
Banner Ad
<img src="banner-ad-176987362334876292.jpg"
alt="banner-ad-176987362334876292.jpg">
11. The tools don't help
They ask for the information at the
wrong time, and in the wrong way.
Or they are tedious.
And repetitive.
12. Why isn't it an easy part of creating
content?
See the alt text
in context.
Have a sticky
window where
it's easy to edit
at any time
More ideas?
Jacob is working at a computer, using a Braille note
keypad. He has earphones on listening to something,
and has dark glasses.
Trevor sits...
14. The simplest guideline
Start with this question:
What information does this image
add?
Does the page make sense without
it?
What kind of information is it?
15. If the image contains
<img src="useless image" alt="">
Text Repeat the words
Visual information Explain it
Sensory information Describe it
Nothing new Ignore it
16. A simple decision tree
What is the role of the image?
Decorative? Use null alt text or CSS
Sensory? Write a descriptive identificaation
Informative?
No new info? Use null alt text
Simple or a link? Write short alt text
Complex image? Create long text
Section of the same page
Linked page
Longdesc
4 Syllables - http://www.4syllables.com.au/2010/12/text-alternatives-decision-tree/
17. Or, a detailed analysis
HTML5: Techniques for providing useful text alternatives (updated Sept 8, 2014)
http://rawgit.com/w3c/alt-techniques/master/index.html
18. On the HTML5 standards horizon:
<figure> and <figcaption>
Keeps the image, alt text, and
caption together
<figure><img src="castle-painting.jpg" alt="The castle
now has two towers and two walls.">
<figcaption>Oil-based paint on canvas. Eloisa Faulkner,
1756.</figcaption></figure>
Example from: http://rawgit.com/w3c/alt-techniques/master/index.html#m6
20. Know your audience
What knowledge or background do
they have?
What terminology will they know?
<img alt="Molecular structure of
diethyl diazenedicarboxylate">
21. Context, not just rules
What is the reader's goal?
How does the image fit into the
page?
What other information is around the
image?
22. What is noise? What is important?
1. Icons for categories
2. Bookmark
3. Hero image
4. Title
5. Description
23. Create a consistent 'voice'
Make the alt text part of the (stylistic)
voice of the site, in how images are
voiced (by assistive technology).
Functional?
Descriptive?
Emotional?
24. Consider the fox
What should the alt text for this image be?
Image Credit: J. and K. Hollingsworth/USFWS
25. What if we see it on this page?
The text on page shown in the image says
Red Fox (Vulpes vulpes)
Description
Red foxes are a rusty reddish color on the upper side of their body and tail. They have a white
underside, chin and throat. Their tail is very bushy with a characteristic white tip, and they have
prominent pointed ears. The backs of the ears, lower legs and feet are black. Other than the
common rusty red, red foxes have three different color variations: a black phase where they are
almost completely black, a silver phase in which they are black with silver-tipped hairs, and a
"cross" phase where individuals are reddish brown with a dark cross across their shoulders. Adults
typically stand 15 to 16 inches from the ground and are 35 to 41 inches in length. They can weigh
between 8 and 15 pounds.
27. Get the basics right
Repeat the text in the image.
Alt text: “Webcast. Applying 21st Century Toxicology to
Green Chemical and Material Design. September 20-21,
2011”
29. Identify the target of a link
Do these social media
images go to the
organizations' pages,
Or are they share links?
Alt text:
“UXPA group on Facebook”
"@UXPA_Int on Twitter"
"UXPA's LinkedIN profile"
30. Don't create noise
When images are used like a bullet,
they can have empty alt text.
If they are clickable make them part of
the text link.
31. Don't hide meaningful images
Is a profile photo part of the content?
<img alt="Photo of Caroline">
or
<img alt="Caroline Jarrett">
32. Don't hide information in the alt text
Caption: Red fox, credit: John & Karen Hollingsworth
Alt text: Red Fox as Sachuest Point NWR. Credit J and K
Hollingsworth
33. Captions & alt text work together
The caption:
“Figure 1. Meetings of the
branch of UXPA China in
Qingdao (photo by the
author)”
The alt text:
“A small group of people
around a table.”
34. Don't just repeat the same text
Caption and alt text both say:
Gerald Chan is an alumnus of the public health school,
having earned master’s and doctorate degrees in the 1970s
35. Managing the punchline
How do you manage
content where the text
and visuals work
together to make a
point readers can
discover?
36. Managing the punchline
Page title:
Rubes Cartoon: If you build it
Image and alt text:
A cat teacher gives a presentation
Caption/description:
“If you built it, they will come”
A cat teacher gives a presentation,
pointing to an illustration showing
how to construct a birdhouse
37. Consider the surrounding text
The caption:
“Figure 1: The ABC of research
methods”
The alt text:
“ABC diagram.”
or
"ABC diagram sketched on a
chalkboard.”
or
“A diagram sketched on a
chalkboard as a triangle. Top:
Attitude. Right: Behavior. Left:
Comprehension.
38. When the text is long...
Put the text on the
same page, and link
to it.
The alt text:
“Two personas"
The caption includes a link:
“Read the text in this image”
The text is in a box at the end
of the article.
The caption reads: Example snapshots of
personas demonstrate Spanish-speaking
users’ language needs and preferences, as
well as medical literacy, web skills, and
other relevant characteristics. Read the text
in this image."
The link points to a grey box below
39. When the information
is in a chart...
Combine the visual
chart with a data table.
The alt text:
"Bar chart of data in table below"
The title:
"More Education Means More
Money"
http://www.careerinfonet.org/finaidadviso
r/earnings.aspx?nodeid=21
41. How long should alt text be?
No more than a few words?
(WebAIM)
5-15 words?
(Many sources)
30-50 words (2-3 sentences)?
(W3C Draft)
42. Keep it concise
Focus on the important words
(no prizes for writing long prose).
Avoid noise words
"Image of.. "
"This is a..."
43. Be consistent
Each image, each page, each section
is all part of your site or app.
Use the same approach everywhere,
especially for functional elements:
Providing additional text
Locating explanatory text or data
Identifying figures in the text
44. Write the text, caption, alt text together
Hiding the image in the manuscript makes it
easier to visualize the flow of the words.
This is the text in the image:
...mall, we realized that even everyday items such as clothing and shoes would
also be bought in installments (see Figure 1). A light bulb went off for us—not
only was it common to pay in installments, but it applied to items we did not
expect, too.
Alt text: Picture of shoes with installment pricing sign
Figure 1. In a mall in Sao Paulo, our research team spotted more items sold in
installments than we initially expected. Notice that the installment price is
more visually prominent than the total price!
Add alt text to the writing workflow
45. This is change!
Admit it
Embrace it
Set a reasonable pace
Rome wasn't built in a day
(but if you don't start, you never get there)
46. Make the web
a better place.
Write some (great) alt text today!
Every time you do, an accessibility fairy
gets their wings.
47. Storytelling for User Experience
with Kevin Brooks
Global UX
with Daniel Szuc
A Web for Everyone
with Sarah Horton
http://rosenfeldmedia.com/books/a-web-for-everyone/
48. Get in touch!
Whitney Quesenbery
whitneyq@civicdesign.org
@whitneyq
http://civicdesign.org
@civicdesign
alt text is so simple that it's surprising how erratically it's implemented and how often it's only in places where it's not really needed.
"I know it's an ad because it reads all this junk to me"
They ask for the information at the wrong time, and in the wrong way.
Is is content or code? It's content inside code.
Web developers don't know what to write, because they may not even see the image.
Art directors may not know how the image will be used when they add it to the library
Back to our regularly scheduled programming – how to write alt text.
If you are looking for code examples, this is a great place.
figcaption will replace or work with alt text
few browsers support it yet
But today, I'd like to put aside the technical analysis a little bit, and just look at this from a writer's point of view. We'll start with some principles
If you are talking to chemists, the name of a compound may be all they need in the alt. But they would also know that DEADCAT is just slang for a group of compounds, and not unique. (This example came from a workshop, where one of the attendees managed an annual scientific report with hundreds of chemical diagrams in an appendix. He thought he would have to describe them. Even though the general public might read the report, they would be unlikely to read the appendix unless they had some chemical knowledge.)
Which of these things are important
Which should be voiced or described?
Well.... it's photo of a fox. A red fox. Looking over it's shoulder at the camera. What should we describe about this images?Fox
Red fox
Red fox at Sachuest Point National Wildlife Refuge
A red fox, standing alone on a pile of rocks, looks back at the camera.
Don't
Because this might mean "share on Facebook"
Don't need to say "Go to" because that's implied in the link
It's especially true when the thumbnail is a miniature version of the full illustration on the linked article.
Big debate on WebAIM about this – is this just noise, or meaningful.
On UXPA's magazine we went with the first option.
But I believe you should not "null" this image, as it is important to the sense of this profile page.
In this case, there is a caption that provides some of the information, but other useful information is hidden in the alt text, and some is duplicated
This is often a problem when images come from image libraries or other databases. This one is particularly bad because if it was just the alt text it would hide information.
The other mistake is to repeat the headline of the article in the image.
Is the image style important?
Alt text is too important to leave to random coding. Even if you write your own HTML, think about the alt text as you draft the article.
The nice thing is that each time you get it right, you add a tiny bit of goodness to the web