Joe Ortenzi @wheelyweb takes us through basic inclusive design principles to make our WordPress sites a better experience for those with disabilities but which will also make the web a better experience for all. #wcsyd

1. Joe
Ortenzi
@wheelyweb
typingthevoid.com
WordCamp
Sydney
July
20,
2012

2. ¡ First
website
was
in
1996
§ which
was
c#%p
¡ Learned
PHP
/MySQL
&
built
bespoke
CMSs
§ which
was
hard!
¡ So
I
started
hacking
WordPress
¡ Developer,
Interactive
Developer,
Tech
Director,
Technologist,
PM,
Producer
Auditor,
Interaction
Designer...
¡ and
now
...

3. NOW,
I’m
a...

4. 4

5. DUDE!
THAT’S
UX!
5

6. TELL
ME
ABOUT
INCLUSIVE 6

7. 7

8. 8

9. 9

10. ¡ For
them
§ Includes
people
with
a
disability
in
your
plans
§ Includes
seniors
in
your
audience
§ Accepts
temporary
conditions
among
your
visitors–
sprains,
lighting,
crowds,
noise
¡ For
you
§ Improves
SEO
and
usability
§ Happier
users,
easier
to
comment
and
share
§ More
visitors!

11. 11

12. 12

17. ...as
these
guys
found
out!

18. “The UN Convention on Rights of Persons with
Disabilities (2008) declares that Disability is a
human rights issue and not a matter of discretion.
The UN Convention affirms that all persons with
all types of disabilities must enjoy all human rights
and fundamental freedoms. The outcomes of the
project are designed to uphold and promote the
human rights of disabled people as enshrined in
national and international law.”
18

19. ¡ 1
in
5
Australians
have
a
disability
(ABS)
¡ Vision
§ Colour
blindness,
low
vision,
acute
blindness
¡ Hearing
§ Clarity,
frequency,
volume
¡ Physical
§ Limited
fine
control,
slow
reaction
time,
grip/hold
¡ Literacy,
Cognition
§ Reading
or
unfamiliar
language
§ Distractibility,
memorability,
dyslexia

20. OK,

21. ¡ Web
Content
Accessibility
Guidelines
§ version
2.0!
¡ Perceivable
¡ Operable
¡ Understandable
¡ Robust

22. 22

23. WCAG 2.0 Map
1.3.1 Info and relationships
1.3.2 Meaningful Sequence
1.3.3 Sensory characteristics 2.1.3 Keyboard
A 1.4.1 Use of Colour 2.1.1 Keyboard
(No exception)
AAA
1.4.2 Audio Control
A 2.1.2 No Keyboard Trap
A
1.2.1 Audio-only and Video Only 2.2.1 Timing Adjustable
(Pre-recorded) 2.2.2 Pause, Stop, Hide
1.3 1.4.3 Contrast (Minimum)
A
1.2.2 Captions (Pre-recorded) Adaptable 1.4.4 Resize Text
1.2.3 Audio Description A 1.4.5 Images of Text 2.1
AA Keyboard 2.2.3 No Timing
Accessible 2.2.4 Interruptions
1.2.4 Captions (live) 2.2
1.2 1.4 2.2.5 Re-authenticating
1.4.6 Contrast (Enhanced) Enough time
1.2.5 Audio Description
AA Time Based Distinguishable
1.4.7 Low or No Background Audio
AAA
Media
1.4.8 Visual Presentation
1.4.9 Images of text (No exception)
1.2.6 Sign Language
Perceivable AAA 2.3.1 Three Flashes or
1.2.7 Audio Description (Extended) Below Threshold
1.2.8 Full text alternative Operable
A
Operable: User interface 2.3
1.2.9 Live Audio-only AAA components and navigation Seizures
must be operable.
2.3.2 Three Flashes
1.1 AAA
Text Alternatives
Perceivable: Information and
user interface components 2.4.8 Location
2.4
must be presentable to users 2.4.9 Link Purpose (Link Only)
Navigable
1.1.1 Non-text Content in ways they can perceive. 2.4.10 Section Headings
A AAA
2.4.5 Multiple Ways
3.1.1 Language of Page
WCAG 2.0 2.4.1 Bypass Blocks
2.4.2 Page Titled
2.4.6 Headings and Labels
2.4.7 Focus Visible
A 2.4.3 Focus Order
AA
2.4.4 Link Purpose (In Context) A
3.1.2 Language of Parts
AA
Understandable: Information and
3.1 the operation of user interface
Readable must be understandable. Robust: Content must be robust
3.1.3 Unusual Words enough that it can be interpreted
3.1.4 Abbreviations reliably by a wide variety or user
3.1.5 Reading Level agents, including assistive
3.1.6 Pronunciation AAA technologies.
Understandable
3.3.2 Labels or Instruction
A Robust
3.2.1 On Focus WCAG 2.0 Map Key
3.2.2 On Input 3.2 4.1
A Predictable Compatible
3.3 Principle
3.3.3 Error Suggestion
Input Assistance
3.3.4 Error Prevention
3.2.3 Consistent Navigation (Legal, Financial Data)
AA AA Guideline
4.1.1 Parsing
4.1.2 Name, Role, Value
3.2.5 Change on request
3.3.5 Help A A Success Criteria
3.3.6 Error Prevention (All)
AAA AAA
Visual map of Web Content Accessibility Guidelines 2.0
Designed by Stamford Interactive www.stamfordinteractive.com.au
Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
Based on World Wide Web Consortium documentation available at www.w3.org/TR/WCAG20
WCAG 2.0 Map V1.4 © 2012 Stamford Interactive
23

24. OK,

25. ¡ What
does
it
look
like
with
CSS
styles
off?
¡ Is
the
reading
order
logical?
¡ <body>
§ <h1>
§ <p><strong></strong><em></em></p>
▪ <h2>
▪ <h3>
¡ Include
a
“Skip
to
Content”
link
above
all
content

26. logo skip
to
content
search
content
starts
here
Title
Cras
justo
odio,
dapibus
ac
facilisis
in,
egestas
eget
quam.
Praesent
commodo
cursus
magna,
vel
scelerisque
nisl
consectetur
et.
Cras
justo
odio,
dapibus
ac
facilisis
in,
egestas
eget
quam.
Etiam
porta
sem
malesuada
a
non
.
Duis
mollis,
est
non
commodo
luctus,
nisi
erat
porttitor
ligula,
eget
lacinia
odio
sem
nec
elit.
Donec
ullamcorper
nulla
non
metus
auctor
fringilla.
Curabitur
blandit
tempus
porttitor.
Lorem
ipsum
dolor
sit
amet,
consectetur
adipiscing
elit.
Heading
2
Cras
justo
odio,
dapibus
ac
facilisis
in,
egestas
eget
quam.
Praesent
commodo
cursus
magna,
vel
scelerisque
nisl
consectetur
et.
Cras
justo
odio,
dapibus
ac
facilisis
in,
egestas
eget
quam.
Heading
3
Cras
justo
odio,
dapibus
ac
facilisis
in,
egestas
eget
quam.
Praesent
commodo
cursus
magna,
vel
scelerisque
nisl
consectetur
et.
Cras
justo
odio,
dapibus
ac
facilisis
in,
egestas
eget
quam.
Etiam
porta
sem
malesuada
magna
mollis
euismod.
Donec
ullamcorper
nulla
non
metus
auctor
fringilla.
Vivamus
sagittis
lacus
vel
augue
laoreet
rutrum
faucibus
dolor
auctor.
Curabitur
blandit
tempus
porttitor.
Duis
mollis,
est
non
commodo
luctus,
nisi
erat
porttitor
ligula,
eget
lacinia
odio
sem
nec
elit.
Donec
ullamcorper
nulla
non
metus
auctor
fringilla.
Curabitur
blandit
tempus
porttitor.
Lorem
ipsum
dolor
sit
amet,
consectetur
adipiscing
elit.
26

27. ¡ <img
src=”/path/to/image.jpg”
alt=””
/>
international
cyclist,
Cadel
Evans,
dressed
in
cycle
gear,
riding
his
bike
against
a
leafy
background

28. 28

29. ¡ Go,
search,
comment,
next,
previous,
buy,
etc.
-­‐
avoid
using
images
for
these.
¡ <input type="submit" name="publish"
id="publish" value="publish" />
¡ <button type="button">Buy Me!</button>

30. ¡ Logo
¡ spacer
images
§ shame
on
you!
¡ does
not
convey
additional
meaning
ie:
“satisfaction
guaranteed
or
your
money
back”
§ double
shame
on
you!
§ may
the
ghost
of
clippy
have
mercy
on
you....

31. alt=“”
never
absent,
sometimes
empty
31

32. ¡ text
is
best
conveyed
as
text,
not
image
§ ..unless
it
is
your
logo
¡ otherwise,
use
font
substitution
§ cufon
§ @font-­‐face
§ Adobe
TtpeKit
§ SiFR

33. 33

34. ¡ Avoid
ALL
CAPS
¡ watch
font
size
¡ choose
font
sizes
that
can
scale
§ use
em,
en,
%,
not
pt
or
px
¡ Scale
your
containers
with
their
content

35. 35

36. ¡ Don’t
rely
on
colour
alone
to
convey
meaning

37. ¡ Full
text
version
of
all
dialogue
¡ Captions
timed
with
the
video
¡ Audio
descriptions
of
events
not
spoken
37

38. ¡ Accurate
text
equivalents
of
the
audio
or
video,
linked
to
next
to
the
vid/audio
¡ Captions
(text
of
the
audio
superimposed
on
the
video)
¡ Audio
descriptions
of
actions
not
conveyed
in
dialogue
or
word
People
with
low
vision
or
hearing
deserve
easy
access
to
you
content

39. 39

40. ¡ Use
the
<button>
or
<input
type=”button”>
¡ Ensure
all
form
fields
have
meaningful
labels
before
the
field.
¡ Return
focus
to
the
first
message
on
error
¡ Ensure
error
messages
are
available
to
keyboard-­‐navigating
users
¡ don’t
be
captured
by
CAPTCHA
!!

41. ¡ Completely
Automated
Public
Turing
test
to
tell
Computers
and
Humans
Apart
§ a.k.a.
bol1$@ks!
41

42. ¡ TextCAPTCHA
¡ The
last
letter
in
“unrolled”
is?
¡ 4
plus
two
is
what?
¡ Which
of
3,
twenty-­‐nine,
70,
46
or
65
is
the
lowest?
¡ I
have
two,
you
have
2.
How
many
is
that?
c/o:
textcaptcha.com/demo
42

43. ¡ Confusing:
§ To
read
more
about
awesome
polar
bear
disguises,
click
here.
§ To
find
out
the
47
ways
I
can
save
you
verbosity,
click
here.
¡ Better:
§ I
wrote
a
post
about
awesome
polar
bear
disguises.
§ I
spent
a
very
long
time
researching
the
47
ways
you
can
reduce
your
verbosity.

44. 44

45. ¡ check
your
HTML
is
well
formed
¡ make
sure
your
page
is
well
structured
¡ always
correctly
use
an
alt
tag
for
each
image
¡ avoid
text
displayed
as
images
¡ watch
your
font:
size,
case,
format,
weight.
¡ check
your
colours
don’t
impede
readability
¡ Ensure
your
forms
are
usable
by
keyboard
¡ Make
sure
your
link
text
is
meaningful
¡ ...and...
45

46. test!
...then
test
again...
46

47. ¡ Web
Accessibility
Checker
for
IE
¡ Web
Developer
Tool
(FF,
GC)
¡ Firebug
(FF,
GC)
¡ Fangs
(FF)
¡ Zoom
Text
(FF,
S)
¡ WAVE
¡ Juicy
Colour
Checker
(FF)
¡ Headings
map
(FF)
¡ Inspect
Element
(FF,
GC,
S)

48. WCAG
2.0:
http://www.w3.org/TR/WCAG20/
NVDA
(Non
Visual
Desk
Access):
http://www.nvda-­‐project.org/
Guide
to
the
Disability
Discrimination
Act:
http://www.hreoc.gov.au/disability_rights/dda_guide/dda_guide.htm
UN
Convention
on
the
Rights
of
Persons
with
a
Disability:
http://www.un.org/disabilities/default.asp?id=259
Web
Accessibility
National
Transition
Strategy:
http://www.finance.gov.au/publications/wcag-­‐2-­‐implementation/index.html
Webaim.com:
http://webaim.org/resources/designers/
Just
Ask:
Integrating
Accessibility
Throughout
Design
http://uiaccess.com/accessucd/
Dive
into
accessibility:
http://diveintoaccessibility.info/
AChecker:
http://achecker.ca/
Color
contrast
check:
http://www.snook.ca/technical/colour_contrast/colour.html
Colour
Contrast
Analyser
from
Paciello
Group:
http://www.paciellogroup.com/resources/contrast-­‐analyser.html
Chrometric
browser
–
simulates
several
vision
impairments:
http://enably.com/chrometric/

49. I’m
building
a
list
of
accessible,
inclusive
themes
and
plugins
for
WordPress,
as
well
as
tools,
almost
all
free,
to
help
assess
accessibility.
See
me
afterwards
if
you’d
like
to
be
updated
once
that
list
is
ready.
Joe
Ortenzi
@wheelyweb
typingthevoid.com/inclusive-­‐design
WordCamp
Sydney
July
20,
2012
49