Share
Embed
Slide 1
Slide 1 text
a11y goes to 11
…using HTML5+ and CSS3+
by Eric Eggert @yatil / @webcontravelers
Slide 2
Slide 2 text
#a11yto11
Slide 3
Slide 3 text
2010
#fronteers10
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
2011
#fronteers11
Slide 7
Slide 7 text
accessibility
accessibility
Slide 8
Slide 8 text
accessibility
b
11
Slide 9
Slide 9 text
New exciting web
technologies enable
us to do more
accessible
web sites
by doing less.
Slide 10
Slide 10 text
HTML4
Slide 11
Slide 11 text
HTML4
Slide 12
Slide 12 text
HTML5
Slide 13
Slide 13 text
We need to
get rid of
the dogmas.
Slide 14
Slide 14 text
Responsive Web
Design
+ universally works on every screen size
+ simplifies layout for users who need extremely
low screen resolutions (screen magnifying)
- di cult to implement if your project is complex
Slide 15
Slide 15 text
Robust
Slide 16
Slide 16 text
Web fonts
+ readable by screen readers
+ resizable
+ easy to implement
- di cult to read for mentally challenged people
- slight performance penalty
Slide 17
Slide 17 text
Perceivable
Slide 18
Slide 18 text
Forms
+ validation before sending means less errors
+ required, invalid and disabled visible to SR
+ input according to the type attribute
+ easy to implement
- own validation may interfere visually
- mind that post codes are not numbers
Slide 19
Slide 19 text
Understandable
Slide 20
Slide 20 text
Audio
&
Video
+ HTML controls increase accessibility
+ adding subtitles is easy
+ users are in control of autoplay1
- multiple formats needed (ogg/webm + mp4)
(1 Not yet implemented, but possible.)
Slide 21
Slide 21 text
Operable
Slide 22
Slide 22 text
It’s hard to reach
Perfection
and when you do, it is often
destroyed by others.
Image source: @marklad
Slide 23
Slide 23 text
@ScreenOrigami & @yatil
We’ll help!
Slide 24
Slide 24 text
Screenshot
a11yto11.com
a11yto11.com
Slide 25
Slide 25 text
10 tips tailored to
your web site
Inexpensive
Slide 26
Slide 26 text
avoid the pitfalls
Slide 27
Slide 27 text
thank you!
Follow us on twitter:
@a11yto11
@ScreenOrigami & @yatil
@webcontravelers