Module on accessible images. Learn what makes images accessible through examples and nonexamples.

1. Photo by r.nial.bradshaw - Creative Commons Attribution License https://www.flickr.com/photos/33227787@N05 Created with Haiku Deck

2. WCAG 2.0 Success Criteria
Guideline 1.1.1 - All non-text content that is presented to the user has a text
alternative that serves the equivalent purpose. (Level A)
Guideline 1.4.5 - If the technologies being used can achieve the visual
presentation, text is used to convey information rather than images of text
except for customizable and essential images. (Level AA)
Guideline 1.4.9 - Images of text are only used for pure decoration or where a
particular presentation of text is essential to the information being conveyed.
(Level AAA)

3. Images: The Good and The Bad
● The Good - Images can enhance comprehension.
● The Bad - Images that have missing, incorrect, or poor
alternative text are commonly found on the Web.

4. What is alternative text?
(a.k.a. ALT-text)
Alternative text is text associated with an image that serves the same purpose
and conveys the same essential information as the image.
Alternative text is:
● the 1st principle of Web accessibility.
● a text string of up to 125 characters, (10 words or less is recommended--
some say no more than 5 words) enclosed in quotation marks.
● one of the most difficult to properly implement.

5. What are the functions
of ALT-text?
● It is an alternative to an image, a bit of text that people who use
screen readers will “see” instead of the image.
● It is displayed in place of an image in browsers if the image file is
not loaded or when the user has chosen not to view the images.
● Provides a semantic meaning and description to an image which
can be read by search engines or be used to later determine the
content of the image from page context alone.

6. What is a screen reader?
A screen reader is a software application that attempts to identify and
interpret what is being displayed on the screen (or, more accurately, sent to
standard output, whether a video monitor is present or not). This interpretation
is then re-presented to the user with text-to-speech, sound icons, or a Braille
output device. Screen readers are a form of assistive technology (AT)
potentially useful to people who are blind, visually impaired, illiterate or learning
disabled, often in combination with other AT, such as screen magnifiers.
Source: http://en.wikipedia.org/wiki/Screen_reader

7. What is it like to “read” images with a screen reader?
JAWS (Job Access with Speech) Screen Reader (1:22)
Hear an example of a screen
reader and images.

8. What images need ALT-text?
● symbols
● image map regions
● animations
● scripts
● images used as list bullets, spacers, graphical buttons,
etc.

9. Does every image need ALT-text?
YES--even if it means leaving it blank!

10. How do you leave an ALT-text blank?
Leave nothing inside of the quotation marks.
Example: ALT = “”

11. Why is it necessary to leave an ALT-text blank?
Leaving a blank, or null, ALT-text lets a screen reader know
that an image is there, that it is purely decorative, and to
skip it.

12. Why does every image need ALT-text?
● Every image needs the ALT-text attribute to do
something, or nothing.
● If left unchanged, a string of unnecessary text may
be read by a screen reader.
● Images without ALT-text will typically be skipped by a
screen reader.

13. To Use or Not to Use ALT-Text
Simply Stated
Step 1: Decide if the image presents content.
Step 2: Decide if the image has a function.
If YES to Step 1 AND/OR Step 2, use ALT-text.

14. If an image presents content...
convey the content.
Rather than providing what the image looks like,
ALT-text should convey the content of the image.

15. CONTENT Images

16. If an image presents a function...
convey the function.
Rather than providing what the image looks like,
ALT-text should convey what the function of the image does.

17. FUNCTIONAL Images

18. What if an image does not present content
or function?
Answer: Leave the ALT-text empty (i.e. ALT = “”)
● This is true for decorative images that are used to enhance the
mood of a document, but not to convey actual information.
● Decorative images can include toolbars, clip art, photographs to
add color, and repetitions of a logo.

19. DECORATIVE Images

20. Images that CONTAIN WORDS
If an image contains words important to the reader's
understanding, the alternative text should contain those
words.

21. Examples of Images with WORDS

22. Rule of Thumb
When writing ALT-text, think about information
you would include
over a telephone.

23. The ALT-text attribute SHOULD...
● be accurate and equivalent in presenting the same content and
function of the image.
● be as succinct as possible.
● not be redundant or provide the same information as text within the
context of the image.
● not use the phrases "image of ..." or "graphic of ..." to describe the
image.

24. Here’s a quick recap...
Web Accessibility: Images require alt-text (3:43)

25. How do I add ALT-text?
Learn how to add ALT-text
in Microsoft Office.

26. Now, add ALT-text!
On your own . . .
Apply what you learned about adding ALT-text
to an image in a MS Word document.

27. Appropriate Alternative Text
Ready to test your ALT-text skills? Relax!
Appropriate alternative text is often
a matter of personal interpretation.
Use your best judgment!

28. Checkpoint #1
Let’s see if you’ve got it!
The following scenarios use examples and nonexamples
to present an experienced interpretation.
Note: Not all scenarios are covered.

29. Scenario:
The image is purely decorative.
ALT-text
ALT = “”
Answer
YES!
Why is the ALT-text correct?
Go to the next slide for the answer.

30. Scenario:
The image is purely decorative.
ALT-text
ALT = “”
Answer
YES!
Explanation: Decorative images should have a blank ALT-text.
ALT = “” (quotation marks with no spaces)

31. Scenario:
The caption is sufficiently descriptive.
ALT-text
ALT =
“Abraham Lincoln”
Answer
NO!
Abraham Lincoln
Why is the ALT-text incorrect?
Go to the next slide for
an explanation.

32. Scenario:
The caption is sufficiently descriptive.
ALT-text
ALT =
“Abraham Lincoln”
Answer
NO!
Abraham Lincoln
Explanation: The ALT-text provides
the same information as the text within
the context of the image.
Correction: ALT = “”

33. Scenario:
Accepted credit cards
ALT-text
ALT =
“credit card logos”
Answer
NO!
Why is the ALT-text incorrect?
Go to the next slide for an explanation.

34. Scenario:
Accepted credit cards
ALT-text
ALT =
“credit card logos”
Answer
NO!
Explanation: ALT-text is not equivalent to the function.
Correction: ALT = “MasterCard and VISA credit cards accepted”

35. Scenario:
A video icon is used to provide a link to a video,
“Why Accessibility Matters.”
ALT-text
ALT =
“Why Accessibility
Matters video”
Answer
YES!
Why is the ALT-text correct?
Go to the next slide for an explanation.

36. Scenario:
A video icon is used to provide a link to a video,
“Why Accessibility Matters.”
ALT-text
ALT =
“Why Accessibility
Matters video”
Answer
YES!
Explanation: ALT-text provides content and function of the image.

37. Scenario:
A photograph to show what Hawaii’s flag looks like
ALT-text
ALT =
“The canton contains the Union
Flag of the United Kingdom on the
top, left quarter. The field is
composed of eight horizontal
stripes following the sequence:
white, red, blue, etc.”
Answer
YES!
Why is the ALT-text correct?
Go to the next slide for an explanation.

38. Scenario:
A photograph to show what Hawaii’s flag looks like
ALT-text
ALT =
“The canton contains the Union
Flag of the United Kingdom on the
top, left quarter. The field is
composed of eight horizontal
stripes following the sequence:
white, red, blue, etc.”
Answer
YES!
Explanation: ALT-text is accurate and equivalent
to the content and function of the image.

39. Scenario:
The caption is sufficiently descriptive.
ALT-text
ALT = “”
Answer
YES!
King Kamehameha the Great
Why is the ALT-text correct?
Go to the next slide for
an explanation.

40. Scenario:
The caption is sufficiently descriptive.
ALT-text
ALT = “”
Answer
YES!
King Kamehameha the Great
Explanation: The caption
of the image is sufficient.
Adding ALT-text
would be redundant.

41. Scenario:
An image with important text
ALT-text
ALT =
“Prototyping collaboration and
workflow for designers. Try it
free.”
Answer
YES!
Why is the ALT-text correct?
Go to the next slide for an explanation.

42. Scenario:
An image with important text
ALT-text
ALT =
“Prototyping collaboration and
workflow for designers. Try it
free.”
Answer
YES!
Explanation: ALT-text contains words
important to the reader’s understanding.

43. Scenario:
The image is purely decorative.
ALT-text
ALT =
“smiley face
with two thumbs up”
Answer
NO!
Why is the ALT-text incorrect?
Go to the next slide for the answer.

44. Scenario:
The image is purely decorative.
ALT-text
ALT =
“smiley face
with two thumbs up”
Answer
NO!
Explanation: ALT-text is decorative.
Correction: ALT-text = “”

45. Scenario:
A functional image of a printer
ALT-text
ALT =
“image of a printer”
Answer
NO!
Why is the ALT-text incorrect?
Go to the next slide for the answer.

46. Scenario:
A functional image of a printer
ALT-text
ALT =
“image of a printer”
Answer
NO!
Explanation: Never use “image of” in ALT-text. Also, the ALT-text does
not convey the function.
Correction: ALT-text = “send to printer”

47. Scenario:
Location of a news story
ALT-text
ALT =
“Capitol Dome in neo Classical
style. Dome is white, circular
with narrow windows on many
levels, and pillars on the
lowest level.”
Answer
NO!
Why is the ALT-text incorrect?
Go to the next slide for
an explanation.

48. Scenario:
Location of a news story
ALT-text
ALT =
“Capitol Dome in neo Classical
style. Dome is white, circular
with narrow windows on many
levels, and pillars on the
lowest level.”
Answer
NO!
Explanation: ALT-text does
not convey the content or function
of the image.
Correction: The Capitol
in Washington D.C.

49. Checkpoint #2
TRY IT OUT HERE!
Add ALT-text to an image in Google Slides,
select (click on) the image > Format tab > Alt text
Instructions:
1. Upload an image and add ALT-text to the Sandbox.
2. Identify the scenario.
3. Write your first name.

50. Checkpoint #3
Take the post-test for Access 2: Images.

51. The End
Great job!