a11y goes to 11

A presentation at Fronteers 2011 in October 2011 in Amsterdam, Netherlands by Eric Eggert

Slide 1

a11y goes to 11 …using HTML5+ and CSS3+ by Eric Eggert @yatil / @webcontravelers

Slide 2

#a11yto11

Slide 3

2010 #fronteers10

Slide 4

Slide 5

Slide 6

2011 #fronteers11

Slide 7

a ccessibilit y accessibility 11

Slide 8

a ccessibilit y 11 accessi b ility

Slide 9

New exciting web technologies enable us to do more accessible web sites by doing less .

Slide 10

HTML4

Slide 11

HTML4

Slide 12

HTML5

Slide 13

We need to get rid of the dogmas.

Slide 14

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

Robust

Slide 16

Web fonts + readable by screen readers + resizable + easy to implement

di ! cult to read for mentally challenged people

slight performance penalty

Slide 17

Perceivable

Slide 18

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

Understandable

Slide 20

Audio & Video + HTML controls increase accessibility + adding subtitles is easy + users are in control of autoplay 1

multiple formats needed (ogg/webm + mp4) (1 Not yet implemented, but possible.)

Slide 21

Operable

Slide 22

It’s hard to reach Perfection and when you do, it is often destroyed by others.

Slide 23

@ScreenOrigami & @yatil We’ll help!

Slide 24

Screenshot a11yto11.com a11yto11.com

Slide 25

10 tips tailored to your web site Inexpensive

Slide 26

Slide 27

avoid the pitfalls

Slide 28

thank you! Follow us on twitter: @a11yto11 @ScreenOrigami & @yatil @webcontravelers