Selfish Accessibility: How Supporting Others Helps Future You

Selfish
Accessibility
Presented
by
Adrian
Roselli
for
UX
Singapore
2014
#uxsg

About
Adrian
Roselli
• Co-‐wriDen
four
books.
• Technical
editor
for
two
books.
• WriDen
over
fiJy
arKcles,
most
recently
for
.net
Magazine
and
Web
Standards
Sherpa.
Great
bedKme
reading!

About
Adrian
Roselli
• Member
of
W3C
HTML
Working
Group,
W3C
Accessibility
Task
Force,
five
W3C
Community
Groups.
• Building
for
the
web
since
1994.
• Founder,
owner
at
Algonquin
Studios
(AlgonquinStudios.com).
• Learn
more
at
AdrianRoselli.com.
• Avoid
on
TwiDer
@aardrian.
I
warned
you.

What
is
a11y?
• A
numeronym
for
“accessibility”:
• The
first
and
last
leDer,
• The
number
of
characters
omiDed.
• Prominent
on
TwiDer
(character
restricKons):
• #a11y
• Examples:
• l10n
→
localizaKon
• i18n
→
internaKonalizaKon
Ain’t
language
funsies?

Accessibility
Gets
No
Respect
“Cyberspace”
(gray)
“Lime
Rickey”
(green)
“Online”
(blue)
In
fairness,
Sherman
Williams
needs
to
come
up
with
a
lot
of
color
names...

Accessibility
Gets
No
Respect
…however
I
think
the
team
could
have
done
beDer
than
this.

What
We’ll
Cover
• Boring
StaKsKcs
• How
to
Be
Selfish
• Basic
Tests
• Some
Techniques
• QuesKons
(ongoing!)
Work
with
me,
people.

Boring
StaKsKcs
1
of
4
secKons.

Any
Disability
• In
the
United
States:
• 10.4%
aged
21-‐64
years
old,
• 25%
aged
65-‐74
years
old,
• 50%
aged
75+.
• Includes:
• Visual
• Hearing
• Mobility
• CogniKve
hDp://www.who.int/mediacentre/factsheets/fs282/en/
hDp://www.disabilitystaKsKcs.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012

Vision
Impairments
• 285
million
worldwide:
• 39
million
are
blind,
• 246
million
have
low
vision,
• 82%
of
people
living
with
blindness
are
aged
50
and
above.
• 1.8%
of
Americans
aged
21-‐64.
• 4.0%
of
Americans
aged
65-‐74.
• 9.8%
of
Americans
aged
75+.

Hearing
Impairments
• 360
million
people
worldwide
have
disabling
hearing
loss.
• 17%
(36
million)
of
American
adults
report
some
degree
of
hearing
loss:
• 18%
aged
45-‐64
years
old,
• 30%
aged
65-‐74
years
old,
• 47%
aged
75+
years
old.
hDps://www.nidcd.nih.gov/health/staKsKcs/Pages/quick.aspx

Mobility
Impairments
• In
the
United
States:
• 5.5%
aged
21-‐64
years
old.
• 15.6%
aged
65-‐74
years
old.
• 32.9%
aged
75+.

CogniKve
Impairments
• Dyslexia,
• Dyscalculia,
• Memory
issues,
• DistracKons
(ADD,
ADHD),
• In
the
United
States:
• 4.3%
aged
21-‐64
years
old.
• 5.4%
aged
65-‐74
years
old.
• 14.4%
aged
75+.
hDp://www.disabilitystaKsKcs.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012&subBuDon=Get+HTML

How
to
Be
Selfish
2
of
4
secKons.

WebAIM’s
Hierarchy
for
MoKvaKng
Accessibility
Change
hDp://webaim.org/blog/moKvaKng-‐accessibility-‐change/

My
Hierarchy
for
MoKvaKng
Accessibility
Change
Is
beDer,
no?

Getng
Older
• Affects
(nearly)
everyone,
• Carries
risks
and
side
effects,
• Is
not
for
the
young.
I’m
sKll
experimenKng
with
it.

Accidents
• Broken
limbs,
• Eye
injuries,
• Hearing
injuries,
• Head
trauma.
All
of
these
have
happened
to
me,
mulKple
Kmes.

Let
Ideas
Compete
on
Flickr.

But
I’m
Invincible!
• MulK-‐tasking,
• Sunlight,
• EaKng
at
your
desk,
• No
headphones
handy,
• Content
is
not
in
your
naKve
language.
The
sun
is
trying
to
kill
me.

hDps://twiDer.com/aardrian/statuses/388733408576159744

Raul
Lieberwirth
on
Flickr.

World
Bank
Photo
CollecKon
on
Flickr.

Lars
KrisKan
Flem
on
Flickr.

Tech
Support
• Think
of
your
family!
• Think
of
your
Kme
spent
helping
them!
• Think
of
the
wasted
holidays!
This
is
why
we
hate
the
holidays.

The
Message
• SupporKng
accessibility
now
helps
to
serve
future
you.
There
is
no
try.

The
Message
• SupporKng
accessibility
now
helps
to
serve
future
you.
• SupporKng
accessibility
now
helps
injured
you,
encumbered
you.
There
is
no
try.

The
Message
• SupporKng
accessibility
now
helps
to
serve
future
you.
• SupporKng
accessibility
now
helps
injured
you,
encumbered
you.
• Getng
younger
developers
to
buy
in
helps
future
you
–
if
you
teach
them
well.
There
is
no
try.

Basic
Tests
3
of
4
secKons.

Click
on
Field
Labels
• When
you
click
label
text
next
to
a
text
box,
does
the
cursor
appear
in
the
field?
• When
you
click
label
text
next
to
a
radio
/
checkbox,
does
it
get
toggled?
• When
you
click
label
text
next
to
a
select
menu,
does
it
get
focus?
hDp://www.karlgroves.com/2013/09/05/the-‐6-‐simplest-‐web-‐accessibility-‐tests-‐anyone-‐can-‐do/

Unplug
Your
Mouse
• Turn
off
your
trackpad,
sKck,
trackball,
etc.
• Can
you
interact
with
all
controls
(links,
menus,
forms)
with
only
the
keyboard?
• Can
you
tell
which
item
has
focus?
• Does
the
tab
order
match
your
expectaKon?

Turn
off
Images
• Can
you
sKll
make
sense
of
the
page?
• Is
content
missing?
• Can
you
sKll
use
the
site?
• Is
your
alt
text
useful?

Turn
on
High
Contrast
Mode
• Windows
only.
• Background
images
and
colors
are
replaced.
• Text
colors
are
replaced.
• Does
this
make
your
site
unusable?
hDp://blog.adrianroselli.com/2012/08/css-‐background-‐images-‐high-‐contrast-‐mode.html

Turn
off
CSS
• Does
important
content
or
funcKonality
disappear?
• Do
error
messages
or
other
items
that
rely
on
visual
cues
make
sense?
• Is
content
sKll
in
a
reasonable
order?
• Do
any
styles
(colors,
text
effects,
etc.)
remain?

Test
for
Colorblindness/Contrast
• Is
there
enough
contrast?
• Are
hyperlinks,
menus,
etc.
sKll
visible?
• Tools:
• Chrome
Color
Contrast
Analyzer
• Lea
Verou’s
Contrast
RaKo
• WebAIM
Color
Contrast
Checker
• CheckMyColours.com
hDp://www.inpixelitrust.fr/blog/en/Kps-‐create-‐accessible-‐color-‐paleDe/
hDp://alistapart.com/blog/post/easy-‐color-‐contrast-‐tesKng

Look
for
CapKons
&
Transcripts
• Do
video/audio
clips
have
text
alternaKves?
• Are
links
to
closed-‐capKons
or
transcripts
built
into
the
player
or
separate
text
links?
• Is
there
an
audio
descripKon
available?
• Tools:
• Media
Access
Australia
YouTube
capKoning
tutorial,
Vimeo
capKoning
tutorial,
• Tiffany
Brown’s
WebVTT
tutorial,
• DIY
Resources
for
Closed
CapKoning
and
TranscripKon
from
3
Play
Media.
hDp://webaim.org/techniques/capKons/

hDps://www.youtube.com/watch?v=zCqN_cCLnnk

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
hDp://www.sitepoint.com/15-‐rules-‐making-‐accessible-‐links/

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
• Are
you
using
all-‐caps,
URLs,
emoKcons?

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
• Are
you
using
all-‐caps,
URLs,
emoKcons?
• Do
you
warn
before
opening
new
windows?

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
• Are
you
using
all-‐caps,
URLs,
emoKcons?
• Do
you
warn
before
opening
new
windows?
• Do
links
to
downloads
provide
helpful
info?

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
• Are
you
using
all-‐caps,
URLs,
emoKcons?
• Do
you
warn
before
opening
new
windows?
• Do
links
to
downloads
provide
helpful
info?
• Are
you
using
paginaKon
links?

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
• Are
you
using
all-‐caps,
URLs,
emoKcons?
• Do
you
warn
before
opening
new
windows?
• Do
links
to
downloads
provide
helpful
info?
• Are
you
using
paginaKon
links?
• Are
your
links
underlined
(or
otherwise
obvious)?

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
• Are
you
using
all-‐caps,
URLs,
emoKcons?
• Do
you
warn
before
opening
new
windows?
• Do
links
to
downloads
provide
helpful
info?
• Are
you
using
paginaKon
links?
• Are
your
links
underlined
(or
otherwise
obvious)?
• Is
there
alt
text
for
image
links?

Hyperlinks!
• Is
there
any
“click
here,”
“more,”
“link
to…”?
• Are
you
using
all-‐caps,
URLs,
emoKcons?
• Do
you
warn
before
opening
new
windows?
• Do
links
to
downloads
provide
helpful
info?
• Are
you
using
paginaKon
links?
• Are
your
links
underlined
(or
otherwise
obvious)?
• Is
there
alt
text
for
image
links?
• Is
the
link
text
consistent?

hDp://blog.adrianroselli.com/2014/03/i-‐dont-‐care-‐what-‐google-‐did-‐just-‐keep.html

Some
Techniques
4
of
4
secKons.

Checklist
• Accessibility
is
not
a
checklist.
hDp://accessibility.net.nz/blog/the-‐problems-‐with-‐ramps-‐blended-‐into-‐stairs/

Checklist
• Accessibility
is
not
a
checklist.
• Accessibility
is
an
ongoing
process.
Some
might
call
it
a
conKnuum.
Some.

Stairamp
hDp://accessibility.net.nz/blog/the-‐problems-‐with-‐ramps-‐blended-‐into-‐stairs/
Dean
Bouchard
on
Flickr

User
Stories
• Components:
• User,
• Outcome,
• Value.
• WriKng:
• As
user,
I
want
outcome.
• As
user,
I
want
outcome
so
that
value.
• In
order
to
get
value
as
user,
I
want
outcome.
How
to
Write
User
Stories
for
Web
Accessibility

Selfish
User
Stories
• As
a
user
on
a
sun-‐lit
pa=o,
I
want
to
be
able
to
read
the
content
and
see
the
controls.
Add
beer
and
as
a
user
I
may
have
trouble
focusing.

Selfish
User
Stories
• As
a
user
in
bed
with
a
sleeping
spouse,
I
want
to
watch
a
training
video
in
silence
so
that
I
can
get
caught
up
at
work.
As
a
user
who
doesn’t
want
to
get
punched
for
having
slacked
off
at
work.

Selfish
User
Stories
• In
order
to
click
links
as
a
user
with
no
elbow
room
in
coach
class
with
a
=ny
trackpad,
I
want
click
areas
to
be
large
enough
and
adequately
spaced.
As
a
user
in
coach
class
who
also
paid
too
much
for
the
drink
he’s
spilling
on
his
keyboard.

Selfish
User
Stories
• As
a
user
distracted
by
the
TV,
I
want
clear
headings
and
labels
so
that
I
don’t
lose
my
place.
As
a
user
who
really
should
be
finishing
his
work
in
the
office.

User
Stories
• Physical
Impairment
• As
a
keyboard-‐only
user,
I
want
to
be
able
to
use
the
en=re
applica=on.
This
includes
seeing
what
has
focus
and
not
getng
lost
in
off-‐screen
elements.

User
Stories
• Physical
Impairment
• As
a
keyboard-‐only
user,
I
want
to
be
able
to
use
the
en=re
applica=on.
• As
a
keyboard-‐only
user,
I
want
to
navigate
a
product
list
with
the
tab
key
so
that
I
can
find
the
right
op=on.
Arrow
keys
are
acceptable
as
well,
making
sure
that
it
is
clear
to
the
user.

User
Stories
• Physical
Impairment
• As
a
keyboard-‐only
user,
I
want
to
be
able
to
use
the
en=re
applica=on.
• As
a
keyboard-‐only
user,
I
want
to
navigate
a
product
list
with
the
tab
key
so
that
I
can
find
the
right
op=on.
• In
order
to
click
links
as
a
limited-‐mobility
user,
I
want
click
areas
to
be
large
enough
and
adequately
spaced.
Else
I
may
click
the
wrong
item
and
have
to
hit
the
back
buDon,
which
can
be
Kme
consuming.

User
Stories
• Visual
Impairment
• As
a
color
blind
user,
I
want
to
be
able
to
see
links
in
page
content.
Underlines
are
important,
but
users
also
like
to
know
what
they
clicked
already.

User
Stories
• Visual
Impairment
• As
a
color
blind
user,
I
want
to
be
able
to
see
links
in
page
content.
• As
a
low-‐vision
user,
I
want
to
zoom
the
page
so
that
I
can
read
the
content.
Without
the
text
overlapping
itself
or
every
other
item
on
the
page.

User
Stories
• Visual
Impairment
• As
a
color
blind
user,
I
want
to
be
able
to
see
links
in
page
content.
• As
a
low-‐vision
user,
I
want
to
zoom
the
page
so
that
I
can
read
the
content.
• In
order
to
use
the
site
as
a
blind
user,
I
want
to
use
a
screen
reader
to
navigate.
Good
headings,
clear
structure,
landmark
roles
to
jump
around
the
page.

User
Stories
• Hearing
Impairment
• As
a
low-‐hearing
user,
I
want
to
be
able
to
access
transcripts.
From
a
clear
link,
not
through
some
acrobaKcs
to
find
them.

User
Stories
• Hearing
Impairment
• As
a
low-‐hearing
user,
I
want
to
be
able
to
access
transcripts.
• As
a
low-‐hearing
user,
I
want
access
to
closed
cap=ons
so
that
I
can
use
training
videos.
Timed
to
match
the
video
is
important.

User
Stories
• Hearing
Impairment
• As
a
low-‐hearing
user,
I
want
to
be
able
to
access
transcripts.
• As
a
low-‐hearing
user,
I
want
access
to
closed
cap=ons
so
that
I
can
use
training
videos.
• In
order
to
par=cipate
in
a
webinar
as
a
deaf
user,
I
want
real-‐=me
cap=oning
or
transcripts.
This
can
be
tricky,
since
you’ll
need
to
have
a
resource
typing
in
real-‐Kme.

User
Stories
• CogniKve
Impairment
• As
a
user
with
a
ves=bular
disorder,
I
want
to
be
able
to
disable
parallax
scrolling.
But
you
don’t
just
use
it
for
no
reason,
right?

User
Stories
• CogniKve
Impairment
• As
a
user
with
a
ves=bular
disorder,
I
want
to
be
able
to
disable
parallax
scrolling.
• As
a
user
with
dyscalculia,
I
want
dis=nct
number
fields
for
each
block
of
digits
in
a
credit
card
number
so
that
I
can
purchase
a
product.
You
can
auto-‐detect
card
type.
Do
the
same
for
expiraKon
date.

User
Stories
• CogniKve
Impairment
• As
a
user
with
a
ves=bular
disorder,
I
want
to
be
able
to
disable
parallax
scrolling.
• As
a
user
with
dyscalculia,
I
want
dis=nct
number
fields
for
each
block
of
digits
in
a
credit
card
number
so
that
I
can
purchase
a
product.
• In
order
to
not
get
confused
on
pages
with
long
text
passages
as
a
user
with
dyslexia,
I
want
control
over
text
size,
spacing,
and/or
alignment.
At
the
very
least,
turn
of
jusKfied
text.

Personas
Adrian
• Works
when
he
should
be
relaxing,
relaxes
when
he
should
be
working.
• Lives
between
motorcycles.
• Works
late
at
night
with
the
TV
on.
• Uses
sub-‐Ktles
in
Ne}lix.
• Keeps
all
screens
as
dark
as
possible.
That
photo
is
from
official
ID.

Personas
Book
Excerpt:
A
Web
for
Everyone,
by
Sarah
Horton,
Whitney
Quesenbery

Manifesto
for
Accessible
UX
• Coming
Soon!
(The
Paciello
Group)
• Looking
to
these
examples:
• Lean
UX
Manifesto
• Manifesto
for
Agile
SoMware
Development
• UK
Gov.
Data
Services
Design
Principles
Watch
this
space:
hDp://www.paciellogroup.com/blog/2014/08/developing-‐a-‐manifesto-‐for-‐accessible-‐ux/

Accessible
Design
Maturity
ConKnuum
• Coming
Soon!
(The
Paciello
Group)
• VariaKon
on
Jess
McMullin’s
Rough
Design
Maturity
ConKnuum:
1. No
Conscious
Design,
2. Style,
3. FuncKon
and
Form,
4. Problem
Solving,
5. Framing.
Watch
this
space:
hDp://www.paciellogroup.com/blog/2014/06/accessibility-‐maturity-‐conKnuum/

QuesKons
This
isn’t
a
secKon,
you
should
have
been
asking
all
along.

Resources
• Web
Accessibility
and
Older
People:
Mee=ng
the
Needs
of
Ageing
Web
Users
hDp://www.w3.org/WAI/older-‐users/Overview.php
• Easy
Checks
-‐
A
First
Review
of
Web
Accessibility
hDp://www.w3.org/WAI/eval/preliminary
• How
People
with
Disabili=es
Use
the
Web:
Overview
hDp://www.w3.org/WAI/intro/people-‐use-‐web/
Overview.html
In
addiKon
to
the
gems
I’ve
sprinkled
throughout.

Resources
• 2.11
ARIA
Role,
State,
and
Property
Quick
Reference
hDp://www.w3.org/TR/aria-‐in-‐html/#aria-‐role-‐
state-‐and-‐property-‐quick-‐reference
• 2.12
Defini=ons
of
States
and
Proper=es
(all
aria-‐*
a^ributes)
hDp://www.w3.org/TR/aria-‐in-‐html/#definiKons-‐of-‐
states-‐and-‐properKes-‐all-‐aria-‐-‐aDributes
In
addiKon
to
the
gems
I’ve
sprinkled
throughout.

Resources
• a11yTips
hDp://dboudreau.tumblr.com/
• How
to
Write
User
Stories
for
Web
Accessibility
hDp://www.interacKveaccessibility.com/blog/how-‐
write-‐user-‐stories-‐accessibility-‐requirements
• Book
Excerpt:
A
Web
for
Everyone
hDp://uxmag.com/arKcles/book-‐excerpt-‐a-‐web-‐for-‐
everyone
In
addiKon
to
the
gems
I’ve
sprinkled
throughout.

Selfish
Accessibility
Presented
by
Adrian
Roselli
for
UX
Singapore
2014
Slides
from
this
talk
will
be
available
at
hDp://rosel.li/uxsg
My
thanks
and
apologies.

Selfish Accessibility: How Supporting Others Helps Future You

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (9)

Similar a Selfish Accessibility: How Supporting Others Helps Future You

Similar a Selfish Accessibility: How Supporting Others Helps Future You (20)

Más de ux singapore

Más de ux singapore (20)

Último

Último (20)

Selfish Accessibility: How Supporting Others Helps Future You