Images For Everyone

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

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

Photo by Callie Morgan on Unsplash
Art
direction

Photo by rawpixel.com on Unsplash
Multi-device
Performance

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

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

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

IMAGES FOR EVERYONE
Why?
Who?
How?

Empathy
Exercise
Glasses by PontiacDryGoods on Etsy

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

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%

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)

Accessibility
Universal Design

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

IMAGES FOR EVERYONE
Why? 
Who?
How?

Visual
Auditory
Motor
Cognitive
Vestibular disorders & seizures
TYPES OF IMPAIRMENTS

Visual
Auditory
TYPES OF IMPAIRMENTS

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

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

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)

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

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

ACCESSIBILITY TECHNIQUES
Standards & Guidelines
Markup
Images
Color
Video

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

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

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

.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

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

Decorative
Functional
Informative
WHAT IS THE PURPOSE OF THIS IMAGE?

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

// 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

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

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

<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

.icon {
font-family: ‘My Icon Font’;
}
.icon-right::after {
content: '▻'; // unicode ▻
}
<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

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

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.

// 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

// 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 !

<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

// 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

Help!
How do I write a good
image description?

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

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

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

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

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

Captions
Transcripts
Audio Descriptions
VIDEOS

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

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.

// 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

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

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).

>> 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

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

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

Captions, transcripts
and descriptions
benefit everyone

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

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/

Give every <img/>
an alt attribute

Add captions,
transcriptions, and
audio descriptions to
your videos

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

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/

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

Images For Everyone

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Images For Everyone

Similar to Images For Everyone (20)

More from Cloudinary

More from Cloudinary (15)

Recently uploaded

Recently uploaded (20)

Images For Everyone