How to Improve Your Project’s Accessibility Without Getting Frustrated
A presentation at UX Day Graz by Eric Eggert
H o w t o I m p r o v e Y o u r P r o j e c t’s A c c e s s i bil i t y Eric Eggert ee@w3.org • yatil W3C/Web Accessibility Initiative W i t h o u t
G e t t i n g
F r u s t r a t e d
– w3.org/accessibilit y The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing , movement , sight , and cognitive ability.
Ac c e ss i bil i ty : M a k e s u r e t h a t P e o p l e w i t h d i s a b i lit i e s
c a n e f f e c t i v e l y i n t e r a c t w i t h t h e W e b
– Aaron Gustafson (Foreword in: Sarah Horton. “A Web for Everyone.”) “On the web, every decision I make can have a profound effect on hundreds of thousands (if not millions) of people’s lives. I can make checking into a flight a breeze, or I can make it a living hell.
That’s a lot of power. And to quote Stan Lee: ‘With great power comes great responsibility. ’”
1 b i l l i o n P e r s o n s w i t h s o m e f o r m
o f d i s a b i lit y — WHO Report 2011
15% P e r s o n s w i t h s o m e f o r m
o f d i s a b i lit y — WHO Report 2011
@d s t o r e y
Q: H o w d o
P e o p l e W i t h D i s a b i lit i e s
U s e t h e w e b ?
B
r
o
w
s
e
r
W
e
b
C
o
n
t
e
n
t
B
r
o
w
s
e
r
W
e
b
C
o
n
t
e
n
t
A
s
s
ist
i
v
e
t
e
c
h
Z oo m
Pinc h Ou t b y Juli e Muckenstur m fro m th e Nou n Project
B r a i l l e
c u s t o m i z a t i o n s
C a p t i o n s
R
e
s
o
u
r
c
e
:
H
o
w P
e
o
p
l
e
w
i
t
h
D i s a b i lit i e s U s e t h e W e b w3.org/WAI/intro/people-use-web/
Q: A c c e s s i bil i t y s o u n d s
c o m p l i c a t e d.
Q: H o w d o I s t a r t w i t h
A c c e s s i bil i t y?
D e s i g n e r s C o n t e n t c r e a t o r s
D e vel o p e r s
R
e
s
o
u
r
c
e
:
T
i
p
s
f
o
r g
e
t
t
i
n
g s
t
a
r
t
e
d
w
i
t
h
w
e
b a
c
c
e
s
s
i
bil
i
t
y
w3.org/WAI/gettingstarted/tips/
Q: H o w d o I m a k e s u r e m y
w e b s i t e i s a c c e s s i b l e ?
R
e
s
o
u
r
c
e
:
W
e
b C
o
n
t
e
n
t
A
c
c
e
s
s
i
bil
i
t
y G
u
i
d
e
l
i
n
e
s
(W C A G ) 2.0 w3.org/TR/WCAG/
P
r
i
n
c
i
p
l
e
s
:
P
e
r
c
e
i
v
a
b
l
e
O
p
e
r
a
b
l
e
U n d e r s t a n d a b l e
R o b u s t
P e r c e i v a b l e: T e x t A l t e r n a t i v e s
<button title="Edit "> <span class="icon icon-pencil">
</span> </button>
<button title="Edit "> <span class="icon icon-pencil-kaput“>
</span> </button>
I m a g e S
R
e
s
o
u
r
c
e
:
I
m
a
g
e T
u
t
o
r
i
a
l
w3.org/WAI/tutorials/images/
R
e
s
o
u
r
c
e
:
W
e
b A
c
c
e
s
s
i
bil
i
t
y
T
u
t
o
r
i
a
l
s
w3.org/WAI/tutorials/
P a g e s t r u c t u r e (D r a f t) M e n u s (D r a f t) i m a g e s
T a b l e s
f o r m s c a r o u s e l s (D r a f t)
</aside>
V i sib l e t e x t l a b e l s
Edit
</button>
P e r c e i v a b l e: C o lor C o n t r a s t
O p e r a b l e : u s a b l e w i t h a K e y b o a r d
O p e r a b l e : P r o p e r h e a d i n g s
F l a b e l s
U n d e r s t a n d a b l e : P a g e l a n g u a g e
U n d e r s t a n d a b l e : C o n s ist e n t N a v i g a t i o n
R o b u s t : C o m p a t i bil i t y
Q: H o w d o I m a k e s u r e m y
B a c k e n d i s a c c e s s i b l e ?
R
e
s
o
u
r
c
e
:
A
u
t
h
o
r
i
n
g T
oo
l
s
A c c e s s i bil i t y G u i d e l i n e s
(A TAG ) 2.0 w3.org/TR/ATAG/
p a r t
A
:
M
a
k
e
t
h
e a
u
t
h
o
r
i
n
g t
oo
l
u
s
e
r
i
n
t
e
r
f
a
c
e a
c
c
e
s
s
i
b
l
e
p
a
r
t
B
:
S
u
p
p
o
r
t
th
e p
r
o
d
u
c
t
i
o
n
o
f
a c c e s s i b l e c o n t e n t
p a r t
A
:
M
a
k
e
t
h
e a
u
t
h
o
r
i
n
g t
oo
l
u
s
e
r
i
n
t
e
r
f
a
c
e a
c
c
e
s
s
i
b
l
e
p r i n c i p l e A.1 : A u t h o r i n g t oo l u s e r
i n t e r f a c e s f o l l o w
a p p l i c a b l e a c c e s s i bil i t y g u i d e l i n e s
p r i n c i p l e A .2 : E d i tin g-v i e w s a r e p e r c e i v a b l e
p r i n c i p l e A .3 : E d i tin g-v i e w s a r e O p e r a b l e
G u i d e l i n e A .3.1 : P r o v i d e k e y b o a r d a c c e s s
t o a u t h o r i n g f e a t u r e s
G u i d e l i n e A .3.2 : P r o v i d e a u t h o r s w i t h
e n o u g h t i m e
G u i d e l i n e A .3.4 : E n h a n c e n a v i g a t i o n a n d e d i tin g v i a c o n t e n t s t r u c t u r e
p r i n c i p l e A .4 : E d i tin g-v i e w s a r e u n d e r s t a n d a b l e
G u i d e l i n e A .4.1 : H e l p a u t h o r s a v o i d a n d c o r r e c t m i s t a k e s
G u i d e l i n e A .4.2 : D o c u m e n t t h e u s e r
i n t e r f a c e, i n c l u d i n g a l l a c c e s s i bil i t y f e a t u r e s
p a r t
B
:
S
u
p
p
o
r
t
th
e p
r
o
d
u
c
t
i
o
n
o f a c c e s s i b l e c o n t e n t
p r i n c i p l e B.1 : F u l l y a u t o m a t i c p r o c e s s es p r o d u c e a c c e s s i b l e c o n t e n t
p r i n c i p l e B.2 : A u t h o r s a r e s u p p o r t e d i n p r o d u c i n g a c c e s s i b l e c o n t e n t
G u i d e l i n e B .2.3 : A s s ist a u t h o r s w i t h m a nag i n g
a l t e r n a t i v e c o n t e n t f o r n on -t e x t c o n t e n t
G u i d e l i n e A .2.4 : A s s ist a u t h o r s w i t h
a c c e s s i b l e t e m p l a t e s
p r i n c i p l e B.3 : A u t h o r s a r e s u p p o r t e d i n
i m p r o v i n g t h e a c c e s s i bil i t y o f e x i s t i n g c o n t e n t
G u i d e l i n e B.3.1 : A s s ist a u t h o r s i n
c h e c k i n g f o r a c c e s s i bil i t y p r o b l e m s
G u i d e l i n e B.3.2 : A s s ist a u t h o r s i n
r e p a i rin g a c c e s s i bil i t y p r o b l e m s
p r i n c i p l e B.4 : A u t h o r i n g t oo l s p r o mot e a n d i n t e g r a t e t h e i r a c c e s s i bil i t y f e a t u r e s
Q: H o w d o I m a k e s u r e
t h a t t h e e x p e r i e n c e
i s
a c c e s s i b l e ?
Y o u a c h i E v e t h e b e s t
r e s u l t s w h e n …
A c c e s s i bil i t y i s
n o t a n a f t e r t h o u g h t
M a k e s t h e b a c k e n d e a s y t o u s e
N o n e e d t o
r e b u i l d
A c c e s s i bil i t y i s
a n o p p o r t u n i t y
R e a c h m o r e p e o p l e
m a k e s y o u r w e b s i t e e a s y (e r ) t o u n d e r s t a n d
c o n s ist e n t l a y o u t
H
N a v i g a t i o n
A c c e s s i bil i t y i s
A c r e a t i v e o u t l e t
P r o d u c e t h e b e s t
v i d e o p l a y e r U I
T a k e t h e a vai l a b l e d a ta an d do s o m e t h i n g n o o n e ex p e c t s
t h a n k y o u.
E r i c E g g e r t
W3C/W e b a c c e s s i bil i t y i nit i a t i v e
e
e
@w3.o
r
g
& @y
a
t
i
l
F
o
n
t
s: G
o
o
d
l
i
f
e
(S
a
n
s
C
o
n
d
e
n
s
e
d,
B
r
u
sh
,
S
e
r
i
f,
S
e
r
i
f B
o
l
d
),
A
l
e
o
, S
o
u
r
c
e
c
o
d
e
p
r
o
Note: The original title of this presentation used an ableist word. The title on the first slide has been changed to reflect this change in my awareness.
