Presented at WordCamp DFW on October 4, 2014.

1. People
First
Accessibility
Considera4ons
for
Theme
Developers
WordCamp
DFW
October
4,
2014

2. Trisha
Salas
WordPress
Developer
trishacodes
trishasalas
trishasalas

3. Which
Path
Do
you
Choose?

4. Jus4n
used
to
be
extremely
ac4ve
kid

5. He
used
to
ride
his
bike
all
over
town,
only
stopping
long
enough
to
do
cool
tricks.

6. His
vision
loss
occurred
over
a
period
of
6
weeks.
He
lost
most
of
his
central
vision
and
put
his
bike
away.

7. Op4c
Neuropathy
of
Unknown
Origin.
Age
15

8. A
few
years
later
he
picked
up
his
bike
again
and
he
now
rides
some
with
a
‘seeing
eye
friend.’
He
spends
a
lot
of
4me
on
the
internet
learning
about
BMX,
photography,
backpacking
and
all
the
adventurous
things
he’s
doing
and
would
love
to
do
more
of.

9. Web
Accessibility
makes
a
real
difference
in
the
lives
of
people
with
disabili4es.

10. What
is
Accessibility?
Accessibility
is
all
about
our
ability
to
engage
with,
use,
par4cipate
in,
and
belong
to,
the
world
around
us.

11. The
power
of
the
Web
is
in
its
universality.
Access
by
everyone
regardless
of
disability
is
an
essen:al
aspect.
Tim
Berners-­‐Lee,
W3C
Director
and
inventor
of
the
World
Wide
Web

12. Why
Accessibility
is
Important
• 246,000,000
visually
impaired
• 39,000,000
legally
blind
• 275,000,000
deaf
&
hard
of
hearing
That’s
560
million
total!!
To
put
this
in
perspec4ve,
the
en4re
popula4on
of
the
United
States
is
315,000,000.

13. What’s
with
all
the
acronyms?
WCAG
2.0
A11y
Sec4on
508
WAI-­‐ARIA

14. WCAG
2.0
Web
Content
Accessibility
Guidelines
(WCAG)
is
developed
through
the
W3C
process
in
coopera4on
with
individuals
and
organiza4ons
around
the
world,
with
a
goal
of
proving
a
single
shared
standard
for
web
content
accessibility
that
meets
the
needs
of
individuals,
organiza4ons,
and
governments
interna4onally.
For
a
short
summary
of
the
WCAG
2.0
guidelines,
see
WCAG
2.0
at
a
Glance.

15. Sec4on
508
In
1998,
Congress
amended
the
Rehabilita4on
Act
of
1973
to
require
Federal
agencies
to
make
their
electronic
and
informa4on
technology
(EIT)
accessible
to
people
with
disabili4es.
Sec4on
508
was
enacted
to
eliminate
barriers
in
informa4on
technology,
open
new
opportuni4es
for
people
with
disabili4es,
and
encourage
development
of
technologies
that
will
help
achieve
these
goals.
www.sec4on508.gov/Sec4on-­‐508-­‐Of-­‐The-­‐Rehabilita4on-­‐Act

16. A11y
Accessibility
is
ogen
abbreviated
as
the
numeronym
a11y,
where
the
number
11
refers
to
the
number
of
lehers
omihed.
This
parallels
the
abbrevia4ons
of
interna4onaliza4on
and
localiza4on
as
i18n
and
l10n
respec4vely.
hhps://en.wikipedia.org/wiki/Computer_accessibility

17. WAI-­‐ARIA
The
Web
Accessibility
Ini:a:ve
-­‐
Accessible
Rich
Internet
Applica:ons
Suite,
defines
a
way
to
make
Web
content
and
Web
applica4ons
more
accessible
to
people
with
disabili4es.
It
especially
helps
with
dynamic
content
and
advanced
user
interface
controls
developed
with
Ajax,
HTML,
JavaScript,
and
related
technologies.
hhp://www.w3.org/WAI/intro/aria.php

18. Who
Does
Accessibility
Benefit?
• Blind
• Low-­‐vision
• Deaf
&
hard
of
hearing
• Color
blind
• Cogni4ve
impairments
• Mobility
impairments
• Mobile
devices
• Brightly
lit
rooms
• Older
Users

19. Accessibility
Benefits
Everyone!
Not
everyone
who
is
disabled
has
been
disabled
forever
or
will
remain
disabled.
A
website
that
is
accessible
for
the
disabled
ogen
gains
the
benefit
of
becoming
easier
to
use
for
everyone
Overview
of
web
accessibility
for
older
users
hhp://www.w3.org/WAI/intro/wai-­‐age-­‐literature.php
Web
Content
Accessibility
and
Mobile
Web:
Making
a
Website
Accessible
Both
for
People
with
Disabili4es
and
for
Mobile
Devices
hhp://www.w3.org/WAI/mobile/overlap

20. Accessibility
Benefits
Everyone!
Not
everyone
who
is
disabled
has
been
disabled
forever
or
will
remain
disabled.
Overview
of
web
accessibility
for
older
users
Web
Content
Accessibility
and
Mobile
Web:
Making
a
Website
Accessible
Both
for
People
with
Disabili4es
and
for
Mobile
Devices

21. Keyboard
Naviga4on

22. A
simple
test
you
can
do
is
this:
Unplug
your
mouse
and/
or
turn
off
your
trackpad
1.
Can
you
interact
with
all
controls,
links,
and
menus
using
only
the
keyboard?
2. Can
you
see
what
item
has
focus
at
all
4mes?
3. Does
the
visual
focus
order
match
the
intended
interac4on
order?
The
6
Simplest
Web
Accessibility
Tests
Anyone
Can
Do

23. Is
your
theme
accessible-­‐ready?

24. 13
Of
the
2,764
themes
in
the
WordPress.org
theme
repository
only
13
are
accessbile-­‐ready.
(10-­‐4-­‐2014)

25. Theme
Review
Handbook
• Headings
• Link
Text
• Controls
• Keyboard
• Naviga4on
• Contrasts
• Skip
Links
• Forms
• Images
• Media
hhps://make.wordpress.org/themes/handbook/guidelines/accessibility/

26. Headings
• Use
a
reasonable
heading
structure
-­‐
including
the
use
of
heading
elements
for
page
sub-­‐sec4ons.
• Do
not
use
text
formanng,
such
as
font
size
or
bold
to
give
the
visual
appearance
of
headings
-­‐
use
actual
heading
-­‐
You
can
use
css
to
change
the
appearance
of
your
text
• Heading
elements
for
structure
MAY
be
posi4oned
off-­‐
screen
as
long
as
this
is
not
at
the
expense
of
providing
good,
visual,
structure.

27. Link
Text
• Avoid
repe44ve
non-­‐contextual
text
strings
such
as
‘read
more…’
• The
core-­‐defined
‘read
more’
links
fall
under
this
guideline
Use
Filters

28. Keyboard
Naviga4on
• Provide
visual
keyboard
focus
highligh4ng
in
naviga4on
menus,
for
form
fields,
submit
buhons
&
text
links.
• Naviga4on
by
keyboard
should
also
be
intui4ve
and
effec4ve.
POTENTIAL
PROBLEMS
• Something
other
than
a
link
or
form
control
(such
as
a
<div>
or
<span>)
is
programmed
with
scrip4ng
to
perform
an
ac4on.
• Scripted
elements
• Lengthy
naviga4on
(use
skip
links)

29. Controls
Using
These:
<buhon>
<input>
<a>
will
ensure
na4ve
keyboard
accessibility
and
interac4on
with
screen
reader
accessibility
APIs.

30. Contrasts
Color
contrasts
for
plain
text
should
be
within
the
level
AA
contrast
ra4o
(4.5:1)

31. Skip
Links
Include
a
mechanism
that
enables
users
to
navigate
directly
to
content
or
naviga4on
on
entering
any
given
page.

32. Forms
Comment
Forms
Must:
• Have
appropriate
field
labels
• All
content
within
form
tags
MUST
be
explicitly
associated
to
a
form
control
• Errors
or
confirma4ons
MUST
be
perceivable
If
you
are
using
the
default
WordPress
comment
or
search
forms,
these
pass
the
accessibility-­‐ready
criteria.

33. Images
• Decora4ve
images
must
be
included
using
CSS
•
Incorporate
an
appropriate
alt
ahribute
or
the
means
for
an
end
user
to
provide
one.
SEE
webaim.org/techniques/alhext/

34. Media
• Media
resources
must
NOT
auto
start
or
change
without
user
ac4on
as
a
default
configura4on
• This
includes
resources
such
as
audio,
video,
or
image/
content
sliders
and
carousels.
In
general,
media
resources
of
this
nature
are
likely
to
fall
under
the
plugin
territory
guidelines,
and
will
not
be
allowed
in
your
theme.
If
you
have
a
conforming
usage,
however,
these
rules
will
apply.

35. At
Google
Pihsburgh
for
an
accessibility
meetup.
Extremely
eye-­‐
opening.

36. Not
Allowed
• Any
posi4ve
tabindex
ahribute.
• The
inclusion
of
the
accesskey
ahribute.
• Spawning
new
windows
or
tabs
without
warning
the
user.

37. Low
Vision
–
Don’t
Do
This
• hhp://youtu.be/HoHnqruA5bg
• hhp://youtu.be/bIW3POa9D-­‐o
• hhp://youtu.be/oklmoixpjI0
The
video
clips
from
the
presenta4on
are
on
Youtube
at
the
links
above.

38. Books
A
Web
for
Everyone
Accessibility
Handbook

39. Thank
You!
Ques4ons?