We developers and designers are obsessed with getting our images “just right” before we display them to our users. We perfect their art direction, selecting images that set the right mood or convey the right information. We fine-tune their performance characteristics and ensure that we serve the right image for a multitude of devices. But what about users who can’t see our finely-tuned images or distinguish between the colors in our beautiful infographics? How do we ensure that our images are accessible so that everyone can experience your site to the fullest ? In this session, we’ll learn about the different types of visual, auditory, cognitive, and motor impairments that affect how users interact with images and other media, and we’ll cover practical techniques for ensuring that your images are accessible to everyone, regardless of how they experience the web.

1. Images for Everyone
Katie Sylor-Miller
Staff Software Engineer, Etsy

2. Etsy is a global marketplace where people around the world connect,
both online and offline, to make, sell and buy unique goods.

3. Photo by Callie Morgan on Unsplash
Art
direction

4. Photo by rawpixel.com on Unsplash
Multi-device
Performance

5. Photo by Piotr Wilk on Unsplash
We’re biased
by our
experience

6. What about people who
experience the web
differently than we do?

7. “Websites, tools, and technologies are
designed and developed so that people with
disabilities can use them.”
ACCESSIBILITY (a11y)
- W3C Web Accessibility Initiative

8. IMAGES FOR EVERYONE
Why?
Who?
How?

9. IMAGES FOR EVERYONE
Why?
Who?
How?

10. Empathy
Exercise
Glasses by PontiacDryGoods on Etsy

13. 57 M
19%
AMERICANS WITH A DISABILITY
UNITED STATES CENSUS REPORT, JULY 2012

14. 2016 2060
46 M
15%
AMERICANS OVER 65
JANUARY 2016 POPULATION REFERENCE BUREAU REPORT
98 M
24%
46 M
15% AMERICANS OVER 65
POPULATION REFERENCE BUREAU REPORT, JANUARY 2016
98 M
24%

15. THE AMERICANS WITH DISABILITIES ACT (ADA)
“No individual shall be discriminated against on
the basis of disability in the full and equal
enjoyment of the goods, services, facilities,
privileges, advantages, or accommodations of any
place of public accommodation”
- ADA Sec. 12182 (a)

16. Accessibility
Universal Design

17. Improving the experience
for people with disabilities
improves the experience
for everyone

18. IMAGES FOR EVERYONE
Why?
Who?
How?

19. Visual
Auditory
Motor
Cognitive
Vestibular disorders & seizures
TYPES OF IMPAIRMENTS

20. Visual
Auditory
TYPES OF IMPAIRMENTS

21. Vision loss
• Not just totally blind person using a screen reader!
• Spectrum of many types from partial to full vision loss.
• Refractive errors
• Glaucoma
• Cataracts
• Macular degeneration
• Diabetic retinopathy

22. simulator.seenow.org

27. Assistive technology (AT)
• Screen readers:
• JAWS, NVDA, VoiceOver, Talkback

29. Assistive technology (AT)
• Screen readers:
• JAWS, NVDA, VoiceOver, Talkback
• Screen magnifiers - ZoomText
• Dictation/speech recognition - Dragon
NaturallySpeaking
• Braille displays (but not all blind people read braille)

30. Visual
Auditory
TYPES OF IMPAIRMENTS

31. Hearing loss
• Again, a wide spectrum from Hard of Hearing (mild
to moderate hearing loss) to deaf (profound hearing
loss).
• Not all people with hearing loss speak sign language

32. Assistive technology
• Captioning and transcription
• Captioned telephone service (CTS)
• Video relay service
image via infoguides.rit.edu

33. IMAGES FOR EVERYONE
Why?
Who?
How?

34. ACCESSIBILITY TECHNIQUES
Standards & Guidelines
Markup
Images
Color
Video

35. ACCESSIBILITY TECHNIQUES
Standards & Guidelines
Markup
Images
Color
Video

36. Standards & Guidelines
• Section 508
• Government agencies and contractors,
educational institutions - 1998
• Web Content Accessibility Guidelines (WCAG 2.0)
• Developed by the W3C Web Accessibility
Initiative (WAI) - 2008
• Three levels of compliance - A, AA, AAA

37. Provide alternative ways
to access the information
in visual and auditory
content.

38. ACCESSIBILITY TECHNIQUES
Standards & Guidelines
Markup
Images
Color
Video

39. Semantic HTML

40. ARIA
• WAI-ARIA (Accessible Rich Internet Applications) -
Provides additional accessibility semantics to
assistive technology
• Roles
• States
• Properties

41. .screenreader-only {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Screenreader-only utility class

42. ACCESSIBILITY TECHNIQUES
Standards & Guidelines
Markup
Images
Color
Video

43. Every <img/> must
have an alt attribute,
even if it’s empty!

44. <img src=“https://img.etsystatic.com/il/5bca0f/868794171/il_340x270.868794171_42wp.jpg?version=0" />

45. Every <img/> must
have an alt attribute,
even if it’s empty!

46. Decorative
Functional
Informative
WHAT IS THE PURPOSE OF THIS IMAGE?

47. Decorative
Functional
Informative
WHAT IS THE PURPOSE OF THIS IMAGE?

48. Decorative images
• Provide no additional
information to the page and
function purely as visual
decoration.
• Background, spacer, and
header/hero images are usually
decorative.
• Always hide from screen readers

49. // images use empty alt text w/no space
<img src=“pretty-bg.jpg” alt=“”/>
// CSS background-image
.hero {
background-image: url(pretty-bg.jpg);
}
// svgs use aria-hidden
<svg aria-hidden=“true”>...</svg>
Hide decorative images & svgs

50. Decorative
Functional
Informative
WHAT IS THE PURPOSE OF THIS IMAGE?

51. Functional images
• Images that initiate an action.
• If it’s inside a <button>, <a>,
or other interactive element, it’s
probably functional.
• Always include text that
describes the action, not the
image itself

52. <button>
<img src=“magnifying-glass.png” alt=“” /> Search
</button>
<button>
<svg aria-hidden=“true”>…</svg> Search
</button>
Functional image with accompanying text
Search

53. <a href=“/“>
<img src=“logo.png” alt=“Etsy home” />
</a>
<a href=“/“ aria-label=“Etsy home”>
<svg aria-hidden=“true”>...</svg>
</a>
<a href=“/“>
<svg aria-hidden=“true”>…</svg>
<span class=“screenreader-only”>Etsy home</span>
</a>
Functional image without accompanying text

54. .icon {
font-family: ‘My Icon Font’;
}
.icon-right::after {
content: '▻'; // unicode &#x25BB;
}
<a href=“/”>Go home<i class=“icon icon-right”></i></a>
SR says: “Link, Go home, WHITE RIGHT-POINTING POINTER”
… About those icon fonts
Go home

55. .icon {
font-family: ‘My Icon Font’;
}
.icon-right::after {
content: '▻'; // unicode &#x25BB;
}
<a href=“/”>Go home
<i class=“icon icon-right” aria-hidden=“true”></i>
</a>
… About those icon fonts
Go home

56. Decorative
Functional
Informative
WHAT IS THE PURPOSE OF THIS IMAGE?

57. Informative images
• Images that provide information that is important for
a user to understand the content of the page.
• If an image’s information is also provided in the
surrounding text content, then it is decorative.
• Always provide a text alternative for informative
images to screen readers.
• Also benefits users on slow connections/with
disabled images, and has SEO benefits.

58. Example informative images

59. // Simple descriptions in alt attribute
<img alt=“Tweet-length description of the image content” />
// Complex descriptions add longdesc
<img alt=“Short description” longdesc=“#long-desc” />
...
<div id=“long-desc” class=“screenreader-only”>Long
description goes in here</div>
<img alt=“Short description” longdesc=“my-long-desc.html” />
Providing a text alternative

60. // title and desc elements
<svg role=“img” aria-labelledby=“unique-title unique-desc”>
<title id=“unique-title”>A short title</title>
<desc id=“unique-desc”>A longer description</desc>
</svg>
// aria-describedby
<svg role=“img” aria-describedby=“description”>…</svg>
<div id=“#description” class=“screenreader-only”>A longer
description</div>
SVG long descriptions !

61. <figure>
<img src=“cat.jpg” alt=“My cat Ike” />
<figcaption>
Ike sitting on my keyboard while I’m trying to work.
</figcaption>
</figure>
Use the <figure> element

62. // You can provide descriptive text inside of complex SVGs
// See https://css-tricks.com/accessible-svgs/
// Hide SVG and provide tabular data
<svg aria-hidden=“true”>..</svg>
<table class=“screenreader-only”>
[tabular data representation of the chart above]
</table>
SVG charts and graphs

63. Help!
How do I write a good
image description?

64. DON’T
Use “image of”,
“picture of”, “graphic
of” or “icon” - this is
redundant.
Describe what the
image is conveying:
content,
functionality,
purpose.
DO

65. DON’T
Keyword-stuff Keep alt text short.
DO

66. DON’T
Embed text in
images.
Use CSS to position
text over images only
if the visual contrast
is high enough
DO

69. ACCESSIBILITY TECHNIQUES
Standards & Guidelines
Markup
Images
Color
Video

70. Color blindness
• Deficiency in one or more cones that detect Red,
Blue and Green light.
• Red/Green is most common, then Blue/Yellow.
Complete color blindness is rare.
• Color blindness affects 8% of men, 0.5% of women

71. @JakeWouldSee

75. DON’T
Use color alone to
convey information.
Use text or another
visual indicator to
supplement color
differences.
DO

76. ACCESSIBILITY TECHNIQUES
Standards & Guidelines
Markup
Images
Color
Video

77. Captions
Transcripts
Audio Descriptions
VIDEOS

78. Captions
Transcripts
Audio Descriptions
VIDEOS

79. Closed captions
• Text representing the audio portion (spoken dialog
and background noises) of a video appears overlaid
onscreen.

80. How to add captions
• Consider hiring an interpreter and/or transcriptionist
for live events.
• Pay for a professional or DIY with tools on amara.org
or youtube.com
• But don’t rely solely on YouTube auto captioning!
Always have a human review.

81. // track element element
<video width=“640” height=“480” controls>
<source src=“my-video.mp4” type=“video/mp4” />
<track default src=“my-captions.vtt” kind=“captions”
srclang=“en”>
</video>
HTML5 video captions

82. WEBVTT
1
00:00:00.00 - -> 00:00:05.00 align:middle line:90%
Text to display
can be on multiple lines
2
00:00:05.00 - -> 00:00:08.031 align:left line:50%
- More text
[ non-verbal cues or sound effects ]
VTT caption format

83. Captions
Transcripts
Audio Descriptions
VIDEOS

84. Transcripts
• Same word-for-word content as captions with
additional information:
• speaker or character names, descriptions of
action, transcribed text, and visual information.
• Can be embedded in the page or link out to it
separately.
• No set format for transcripts (except for YouTube).

85. >> KATIE: Hi, my name is Katie and I love unicorns
>> MARTIN: What a surprise! I also love unicorns!
[KATIE and MARTIN High-five]
>> KATIE: Let’s celebrate by breaking out into song!
[music plays]
YouTube transcript format

86. Captions
Transcripts
Audio Descriptions
VIDEOS

87. Audio Descriptions
• A narrator describes visual information during
natural breaks in the audio track.

89. Audio Descriptions
• A narrator describes visual information during
natural breaks in the audio track.
• If all of the visual content is present in the video, you
don’t need descriptions.
• Not available in HTML5 video or YouTube, so include
it as a separate video.
• Final Cut Pro can export an audio track that is
recognized by QuickTime on Macs and iOS

90. Captions, transcripts
and descriptions
benefit everyone

91. IMAGES FOR EVERYONE
Why?
Who?
How?
What next?

92. Test your site
• Chrome dev tools Lighthouse audits
• aXe - open source browser extension, command-line
interface and CI test integration
https://www.axe-core.org/
• Koa11y - open source desktop app
http://open-indy.github.io/Koa11y/

93. Start with
semantic HTML

94. Give every <img/>
an alt attribute

95. Add captions,
transcriptions, and
audio descriptions to
your videos

96. Let’s care as much
about accessibility as
we do about
performance.

97. Learn more
• “Accessibility for Everyone” book by Laura Kalbag
• @A11yBay - Bay Area Accessibility and Inclusive
Design Meetup
• CSUN Assistive Technology Conference
• A11y Slack - https://web-a11y.herokuapp.com/

98. sylormiller.com/ic-a11y
@ksylor
Thank you!
98