Introduction to Alternative Text

Introduction to Alt Text and
Accessibility
Digital Accessibility Community of Practice
08/11/2021 https://matthewdeeprose.github.io/altext.html 1
Much more
material available
in the slide deck.

Let’s start with some polls
• Do you know what alt
text is?
• Do you know how to add
alt text in the essential
tools for your role?
• Rate your competence in
writing effective alt text.

What is alt text?
• Abbreviation of 'alternative text'.
• Alt text is the written copy that appears in place of an
image on a webpage.
• The 2019 WebAIM Million analysis found that missing
alt-text was the second most common accessibility
failing. So why, given its importance, is alt-text often
so badly implemented?

What is alt text? (2)
image on a webpage.
failing. So why, given its importance, is alt-text often
so badly implemented?

What is alt text? (3)
image on a webpage.
failing.

What is alt text used for? (1)
There are three main uses:
1. to enhance accessibility for users of screen readers.
2. Alt text will be displayed in place of an image if an
image file cannot be loaded.
3. Alt text provides better image context/descriptions
to search engine crawlers, helping them to index an
image properly. (SEO)

2. in place of an image if an image file cannot be
loaded or is not wanted.
3. Alt text provides better image context/descriptions
to search engine crawlers, helping them to index an
image properly. (SEO)

Example where images are not shown
Chrome browser
Lynx browser
https://www.southampton.ac.uk/student-life/campuses/highfield

2. in place of an image if an image file cannot be
loaded or is not wanted.
3. for search engine crawlers, helping them to index
an image properly. (SEO)

What recommendations are there?
The Web Content Accessibility Guidelines require 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.

Success Criterion 1.1.1 (1)
(Level A)
All non-text content that is
presented to the user has
a text alternative that
serves the equivalent
purpose, except for...
•Controls, Input
•Time-Based Media
•Tests
•Sensory content
•Captcha
•Decoration, Formatting,
Invisible
https://www.w3.org/TR/WCAG21/#non-text-content

Success Criterion 1.1.1 (but) (1)
For all of these, accessible
alternatives are still
required.
The following hidden
slides have more
information.
•Controls, Input
•Time-Based Media
•Tests
•Sensory content
•Captcha
•Decoration, Formatting,
Invisible

Success Criterion 1.1.1
(Level A)
a text alternative that serves
the equivalent purpose,
except for...
Controls, Input
If non-text content is a
control or accepts user input,
then it has a name that
describes its purpose. (Refer
to Success Criterion 4.1.2 for
additional requirements for
controls and content that
accepts user input.)

Success Criterion 1.1.1 Controls, Input
If non-text content is a
control or accepts user
input, then it has a name
that describes its purpose.

More developer resources at the end of the slide
deck

Success Criterion 1.1.1: Time-Based Media
(Level A)
except for...
Time-Based Media
If non-text content is time-
based media, then text
alternatives at least provide
descriptive identification of
the non-text content. (Refer
to Guideline 1.2 for
additional requirements for
media.)

Success Criterion 1.1.1 - Tests
(Level A)
Test
If non-text content is a test
or exercise that would be
invalid if presented in text,
then text alternatives at
least provide descriptive
identification of the non-
text content.

Success Criterion 1.1.1 - Sensory Content
(Level A)
Sensory
If non-text content is
primarily intended to
create a specific sensory
experience, then text
alternatives at least
provide descriptive
identification of the non-
text content.

Success Criterion 1.1.1 - Captcha
(Level A)
except for...
Captcha
…text alternatives that
identify and describe the
purpose of the non-text
content are provided, and
alternative forms of
CAPTCHA using output
modes for different types of
sensory perception are
provided …

Success Criterion 1.1.1 - Decoration, Formatting,
Invisible
(Level A)
Decoration, Formatting,
Invisible
If non-text content is pure
decoration, is used only
for visual formatting, or is
not presented to users,
then it is implemented in a
way that it can be ignored
by assistive technology.

Can I avoid using alt text? (1)
• Decorative images can be marked as such and
therefore do not need alt text.
• These could be included as background CSS images.
• Consider whether they are ‘repetitive clutter’.
In Office tick
“mark as decorative”
In HTML use alt="" You still have to
do “something”.

Can I avoid using alt text? (2)
• In web sites, these could be included as background CSS
images, particularly if they are on every page.

Can I avoid using alt text?
• In web sites, these could be included as background CSS
images particularly if they are on every page.

Writing alt text

It’s not easy, nor “black and white”
No alt text Has alt text
Appropriate
alt text

Levels of alt text
No alt text.
Has alt text
/ marked as
decorative.
Appropriate
alt text.

Writing alternative text - strategies
"If I could not use an image, what text would I put in its
place?"
“If I were describing the image over the phone to
someone, what would I say?”
https://webaim.org/techniques/alttext/

Writing alternative text, another analogy (2)
‘Knightmare’ tv-
series.
‘Zork’ text adventure
game (1980)

Writing alternative text, another tip (2)
https://veroniiiica.com/2021/02/11/seven-myths-about-alt-text/
Imagine bringing up the image in
conversation: what details should be
mentioned so that someone who isn’t
looking at the image can still understand
it?

A note on Breakout activities
• We’ll share a PowerPoint
file.
• Use the notes section of
the file.

A note on Breakout activities (2)
file.
the file.
Breakout slides:
https://go.soton.ac.uk/dkd

file.
the file.
Breakout slides:

• Find your group’s section
in the notes and fill in the
answers you agree upon.
Breakout slides:

What’s the difference between captions and
alternative text?
• Captions give a general
idea of what the image is
about, but they do not
describe it in detail. May
include an image
attribution or a title.
Breakout slides:

What’s the difference between captions and
alternative text?
• Captions give a general
idea of what the image is
about, but they do not
describe it in detail. May
include an image
attribution or a title.
•Alt text describes exactly
what can be seen in an
image.
Breakout slides:

Break out activity 1
• Using your creativity,
write a caption for this
graph.
• Write some alt text for
this graph.
Breakout slides:

What’s the difference between a caption and alt text?
(2) (1/2) (1/2)
• Captions give a general idea
of what the graph is about,
but they do not describe it
in detail.
• Number of deaths per
thousand of ‘flu in
Southampton in 1918.
• Average cost (in £
thousands) of a family
home in Cornwall in 1975.
Breakout slides:

(3) (1/2)
in detail.
Breakout slides:

(1) (1/2)
in detail.

(1)
• Alt text describes exactly
image:
“Graph with months of the
year along the X axis and
figures from 16.0 to 19.0 in
increments of 0.5 along the y
axis. The line starts from just
above 16.0 in January to
almost 19.0 in December.
The line is particularly steep
between June and October.”
Breakout slides:

(2)
• Alt text describes exactly
image:
“Graph with months of the
year along the X axis and
figures from 16.0 to 19.0 in
increments of 0.5 along the y
axis. The line starts from just
above 16.0 in January to
almost 19.0 in December.
The line is particularly steep
between June and October.”

How much can I include in alt text?
• WCAG Guidelines do not cover this.
• For SEO, Google counts a maximum of 16 words
(approximately 125 characters).
• You should use as much text as is necessary to be
effective.

How much can I include in alt text? (2)
effective.
SEO = Search Engine Optimisation

How much can I include in alt text? (3)
effective.

Why is context important? Abigale Stangl, Ph.D
“…people who are blind or have low vision want image
descriptions that are responsive to where they
encounter the image…
…In other words, people want different content for the
same image depending on where they find it.”
https://www.microsoft.com/en-us/research/blog/alt-text-that-informs-meeting-the-needs-of-people-who-
are-blind-or-low-vision/

A Context Example(1) (1) Imagine how the alt text of this image
would vary based on the following contexts.

A Context Example(2)(1) In an article about business news.

A Context Example((13 1) In a dating profile.

A Context Example((14 1) In a post about the new chair of an equality
forum.

Breakout exercise 2
• In your groups write alternative text that suits the
contexts identified for the following image.
• We’ve added a note on each slide to tell you where to
start. It doesn’t matter if you don’t finish.
Breakout slides:

Context Example (2) An article about Building 32.
Group 1 Start Here
Breakout slides:

Context Example (3) An article about changes to the operation
of traffic lights on campus.
Group 2 Start Here
Breakout slides:

Context Example (4) An article the dangers of crossing the street
when it may not be safe to do so.
Group 3 Start Here
Breakout slides:

Context Example 5 (4) An article the benefits of tree-lined
avenues.
Group 4 Start Here
Breakout slides:

The importance of emotion
A good alt text can conjure up wonderfully stimulating mental
images. A friendly smile is the same in print, photo or wax crayon.
Whether you listen to an image or see it, the emotional response is
the key factor.
Leonie Watson, W3C Advisory Board
https://tink.uk/text-descriptions-emotion-rich-images/

But…
“activating your emotion centre isn't suitable for all
types of content. Examples … are academic articles,
educational materials, or content which requires
intense system II thinking (analyses, coding, facts)…”
@shexec32

Worked example

Worked Example (2)

Worked Example (3)(3)

Worked Example (4)

Worked Example (5)

Worked Example 75)

Worked Example (6)

Worked Example (7)

Using emotions
Watch Writing Good Alt
Text - HTTP 203 for more.

Why is context important? (1)
• For example, if a photo of a person appeared in a news story, people might
want a description that includes details about the setting of the image to give
a sense of place. But if a photo of a person appeared on a social media or
dating website, people might want increased details about that person’s
appearance, including some details that may be subjective and/or sensitive,
such as race, perceived gender, and attractiveness. One participant mentioned
that knowing the race and gender of people in photos of board members on
an employer/employment website might help them understand whether the
company values a diverse workplace. These latter examples illustrate practical
and ethical challenges for emerging AI systems, such as whether AI systems
can—or should—be trained to provide subjective judgments or information
about sensitive demographic attributes.

“Person, Shoes, Tree. Is the Person Naked?” What
People with Vision Impairments Want in Image
Descriptions.
• https://www.microsoft.com/en-
us/research/publication/person-shoes-tree-is-the-
person-naked-what-people-with-vision-impairments-
want-in-image-descriptions/

Tips for writing good alt text
• https://bighack.org/how-to-write-better-alt-text-
descriptions-for-accessibility/

Personal experiences – Sassy Wyatt (1)
“If you were to close your eyes,
or… become visually impaired or
blind, and someone was
describing a picture to you: it’s
likely that you would want as
much description as you could
possibly ask for… it may take you…
longer to write the alt text
descriptions… but… it makes such
a difference to… people like me
who are visually impaired and use
screen readers.”

Personal experiences – Sassy Wyatt (2)
“Sitting at a wooden bench style
table, Sassy and Grant both smile
towards the camera. In between
them, with Grant’s arm around
her, Ida has her front paws up on
the bench, with her nose straining
towards the top of the table. In
the background, through the clear
plastic of the gazebo style
covering, the blue water of the
River Dart is visible, with small
boats upon it.”

Further strategies to consider?
• Describe what is in the
foreground first?
• Describe the most
important part of the
image first?
•Ignore any content that is
blurred due to depth of
field?
•State that more detail is
in the article? For
example a data table.

Breakout 3
• We’ve provided a range of different images for you to
discuss your approaches to using alternative text with
the image within your groups.
• When we come back, we’ll ask you to share what you
consider to be the challenges when writing alt text for
an image even when you know the context.
Breakout slides:

Context:
The introduction of a new bus
route for unilink.

Context:
The importance of
companionship.

Context:
Going back to school during a
pandemic.

Context:
Using video game style maps
for real world locations.

Context:
Data visualisation.

Context:
The effects of urban living on
human behaviour.

Context:
An article about the history
of University education in
Europe.

Context:
Continuous improvement.

Context:
How “home comforts” have
changed in the West over the
last fifty years.

Context:
Past visions of the future of
education.

Context:
The importance of critical
thinking.

Context:
Staying warm in winter.

Context:
Complexity in modern
society.

Context:
Customer feedback.

Context:
Spring in the city.

Context:
Christmas celebrations at the
University of Southampton

Context:
A graphic used in a
newsletter created in Sway.

Context:
Online shopping page for
University of Southampton
clothing.

Context:
Making time for yourself.

Context:
Computer workstations on
campus.

Context:
Disaster recovery planning.

Context:
Political dissent.

Reflections
• What were the challenges when writing alt text for an
image even when you know the context?

Checking for Alt text on our web pages
Tota11y
• https://khan.github.io/tota11y
Bookmarklet that adds a
number of Accessibility Testing
Tools.
• Includes a “screen reader
wand” to reveal what a screen
reader would say.
• And annotates images without
alt text.

Checking for Alt text on our web pages (2)
Accessibility Insights
• https://accessibilityinsigh
ts.io/en/downloads/
• Browser plugin
• Identifies many
accessibility issues
including missing alt text.

MS Office Accessibility checker

MS Office Accessibility checker (2)

MS Office Accessibility checker (3)

Alt text for Charts
• If the chart is crucial to
understanding, provide a
textual alternative:
• Use an alt text containing
the information you would
use if describing the graph
to a colleague over the
phone.
• Provide the data in an
accessible table.
• Provide a longer textual
description within the
article if appropriate.
https://accessibility.psu.edu/images/charts/

Alt text for Documentation Screen Captures
• Don’t use a screenshot as
the only method of
explanation.
•If the documentation
itself explains what is in
the screenshot then a
short piece of alt text is
appropriate.
https://accessibility.psu.edu/images/docscreencaptures/

Documentation / Screen Captures – bad practice
Alt=“Blackboard
Discussion Board options”
Text:
Tick the boxes as shown
here.

Documentation / Screen Captures – good practice
Alt=“Blackboard Discussion
Board options”
Text:
1. Tick the following options:
1. Allow members to Create
New Threads
2. Allow File Attachments
3. Allow…
2. Do not tick:
1. ….

Alt text for Flowcharts/Concept Maps
• Provide a written way of
expressing the same
information.
• Often an ordered list is
appropriate.
•Keep the alt text short.
https://accessibility.psu.edu/images/flowcharts/

Alt text for Maps
• If a map is being used to
provide directions to a
location, then make
sure text based
directions are also
included.
https://accessibility.psu.edu/images/maps/

Alt text for Math Equations
• Screen readers can
understand MathJax.
• TeX in Blackboard
produced graphics with
automatically generated
alternative text.
•LaTeX is not supported by
screen readers but could
be converted to TeX or
MathJax.
https://accessibility.psu.edu/math/

Example of TeX in Blackboard
Alternative text
“cube root of 8 equals 8 to the
power of 1 third end exponent
equals 2”

Alt text for Long Descriptions
• To properly describe an
image may require a long
description.
•Include a short summary
in the ALT text which
directs users to a long
text description which
fully explains the image.
https://accessibility.psu.edu/images/longdescription/

Alt text for memes
“I prefer to have only enough
information to get the joke. I don’t
need a ton of unnecessary
information irrelevant to the
purpose of the meme. If it’s a
famous person, I like for that to be
included too. Same goes for if it’s
a meme of a famous cartoon
character.
If the person’s body
language/facial expression
contributes to the overall humor
of the joke, that could be
important to include as well.” *
More reading
• Making Memes Accessible
• ALT Text Examples
• How to write alt text for memes
* https://www.reddit.com/r/Blind/comments/iwcnye/alt_text_for_memes/

Worked example – memes
Toddler clenching fist in
front of smug face.
Overlaid text on top: Was
a bad boy all year. Overlaid
text on bottom: Still got
awesome presents from
Santa.
[“Success kid” meme]

Use in Office
https://support.microsoft.com/en-us/topic/everything-you-need-to-know-to-write-effective-alt-text-df98f884-
ca3d-456c-807b-1a1fa82f5dc2

Use in Wordpress
Once an image has been
added to the page, it is
‘disconnected’ from the
media library. This means
that when you change the
alt text on either one, it
won’t be updated on the
other.

Use in SharePoint
•Add image
•Choose Edit web part
•Add Alternative Text

Anything else to be aware of? (1)
• Most alt text is not spell-checked.

Anything else to be aware of? (3)
• Most alt text is not spell-checked.
• Don’t start alt text with ‘picture of’ or ‘image of’,
unless that is a useful part of the description (e.g.
‘pencil sketch of…’, ‘painting of...’)

Decision trees
• Diagram center has a
image sorting decision
tree.*
• Web Accessibility
Tutorials has an alt
decision tree.**
* https://poet.diagramcenter.org/images/decision_tree_flow_chart.jpg
** https://www.w3.org/WAI/tutorials/images/decision-tree/

Practicing online
• The POET Training Tool provides interactive exercises
to help write effective image descriptions
https://poet.diagramcenter.org/

Conclusion
• There’s lots more to alternative text than you might
have considered before.
• This slide deck has 140+ slides of content, much more
than we have covered today.

Web Content Accessibility Guidelines relating to
alt text
• WCAG 1.1.1 Non-text Content:
https://www.w3.org/TR/WCAG22/#text-alternatives
• Understanding Success Criterion 1.1.1: Non-text Content:
https://www.w3.org/WAI/WCAG22/Understanding/non-
text-content.html
• How to meet 1.1.1: Non-text Content:
https://www.w3.org/WAI/WCAG21/quickref/#non-text-
content

Further sources of information
• Alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
• Image tips and tricks https://www.w3.org/WAI/tutorials/images/tips/
• Write good Alt Text to describe images https://accessibility.huit.harvard.edu/describe-content-images
• Image ALT Text https://accessibility.psu.edu/images/alttext/
• Writing good text alternatives https://archive.is/jOh80
• Best Practices for Accessible Images https://www.csun.edu/universal-design-center/best-practices-accessible-images
• How to Design Great Alt Text: An Introduction https://www.deque.com/blog/great-alt-text-introduction/
• Accessible Images https://webaim.org/techniques/images/
• Back to the Basics: Alternative Text https://webaim.org/blog/alternativetext/
• Accessibility: Image Alt text best practices https://support.siteimprove.com/hc/en-gb/articles/115000013031-Accessibility-Image-Alt-text-
best-practices
• How to add alt text and why it’s so important! https://www.thinkingoutloud-sassystyle.com/how-to-add-alt-text-and-why-its-so-important/
• You’re using alt text wrong – you just can’t see it https://www.rocketmill.co.uk/youre-using-alt-text-wrong-you-just-cant-see-it
• How to Write More Effective Alt Text https://www.youtube.com/watch?v=YU8b4bpEEag

Developers corner

Where can alternative text be used in HTML? 1)
• Image tags (required).
• Area tags.
• Input tags.
See https://www.w3schools.com/tags/att_alt.asp and https://en.wikipedia.org/wiki/Alt_attribute for more
information

Where can alternative text be used in HTML? 2)
• Area tags (required).
• Input tags.
information

Where can alternative text be used in HTML? (3)
• Area tags (required).
• Input tags (required for input type="image").
information

Area tags example
<h1>The map and area elements</h1>
<p>Click on the computer, the phone, or the cup of coffee to go to
a new page and read more about the topic:</p>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"
width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone"
href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>
Example from https://www.w3schools.com/tags/att_alt.asp

Figcaption
• Is not a replacement for alt-text.
• Has varying support from assistive technology

Recommended Figcaption pattern
<figure aria-label="Figcaption content here.">

<figcaption>
Figcaption content here.
</figcaption>
</figure>
https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

Figcaption pattern: worked example
<figure aria-label="The University of Southampton campus looks particularly
wonderful in the spring and summer. Photo Credit: Sofia Bazzini">
<img src="campus-15.jpg" alt="A Bright sunny day. In the foreground are
flowers with white petals and yellow stamens. Surrounded by trees, the Hartley
Library, a large red brick multi-storey structure, is in the background. A few
people can be seen in the background on the right. On the left numerous
parked bicyles.">
<figcaption>The University of Southampton campus looks particularly
wonderful in the spring and summer.
<br />Photo Credit: <a href="http://www.sofiabazzini.com/about/">Sofia
Bazzini</a>.</figcaption>
</figure>
https://mle.southampton.ac.uk/bb/access/example/figcaption/index.html

Figcaption pattern: worked example (2)

Longdesc (1)
• A mechanism to provide a longer and more detailed
description, usually located in a separate file.
• Can only be accessed by screen readers.
More information at
https://www.d.umn.edu/itss/training/online/images/long_h
ow/
Video example at
https://www.youtube.com/watch?v=fd3olXFKT3o

Longdesc (2)
More information at
https://www.d.umn.edu/itss/training/online/images/long_h
ow/
Video example at
https://www.youtube.com/watch?v=fd3olXFKT3o

Longdesc (3)
More information at:
https://www.d.umn.edu/itss/training/online/images/long_how/
Video example at: https://www.youtube.com/watch?v=fd3olXFKT3o

Longdesc support (1)
• Limited support on mobile devices.
• Variable support across mix of browsers and screen
readers.
• See https://webaim.org/techniques/alttext/longdesctestcases.htm

readers.
• See https://webaim.org/techniques/alttext/longdesctestcases.htm

readers.
• Read https://webaim.org/techniques/alttext/longdesctestcases.htm

Longdesc example
<img
longdesc="graph-LD.html"
alt="Line graph of the number of subscribers"
src="graph.png">
https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

What can be used in HTML?
• Based on the intended behaviour for Text Alternative
Computation the precedence for calculating a text
alternative should be:
• aria-labelledby
• aria-label
• alt
• title

Use in HTML (3)
• It’s an attribute, not a
tag.
• Introduced in HTML 2 in
1995.
• Since HTML 4.01 (1999)
is required for img and
area tags.
ALT text to use in place of the referenced image resource, for example due to processing constraints or user preference.

Use in HTML
tag.
1995.
• Since HTML 4.01 (1999)
area tags.
https://www.ietf.org/rfc/rfc1866.txt

Use in HTML (2)
tag.
1995.
• Since HTML 4.01 (1999)
area tags.
https://www.ietf.org/rfc/rfc1866.txt
https://www.w3.org/TR/html401/struct/objects.html#h-13.8

HTML example
<img alt="In the sky flies a red flag with a white
cross whose vertical bar is shifted toward the
flagpole."
src="http://upload.a.org/wikipedia/commons/thumb
/8/83/Dannebrog.jpg/180px-Dannebrog.jpg">
https://en.wikipedia.org/wiki/Alt_attribute

Decorative examples: alt=“”
img.articleImage {
width: 20%;
float: right;
margin: 10px;
border: 2px solid white;
border-radius: 10px;
}
<img class="articleImage" src="wkp0xb38hz951.jpg" alt="">

Decorative examples: using CSS background
.decorativeImage {
width: 20%;
height: 230px;
float: right;
margin: 10px;
border: 2px solid white;
border-radius: 10px;
background-size: cover;
background-repeat: no-repeat;
}
div#bench {
background-image: url("wkp0xb38hz951.jpg");
}
<div id="bench" class="decorativeImage"></div>

What about title?
• General recommendation
is not to use the title
attribute.
• If you have to use title,
keep content the same as
alt.
https://www.a11yproject.com/posts/2013-04-22-title-attributes/

What about title? (2)
<img alt=“In the sky flies a red flag with a white
cross whose vertical bar is shifted toward the
flagpole.”
title=“In the sky flies a red flag with a white cross
whose vertical bar is shifted toward the flagpole.”
src=“http://upload.a.org/wikipedia/commons/thumb
/8/83/Dannebrog.jpg/180px-Dannebrog.jpg”>

Introduction to Alternative Text

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to Introduction to Alternative Text

Similar to Introduction to Alternative Text (20)

More from Matthew Deeprose

More from Matthew Deeprose (12)

Recently uploaded

Recently uploaded (20)

Introduction to Alternative Text

Editor's Notes