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

Fronteers11 Jam Session: a11y goes to 11

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Fronteers11 Jam Session: a11y goes to 11

a11y goes to 11…using HTML5+ and CSS3+

by Eric Eggert @yatil / @webcontravelers

Page 2: Fronteers11 Jam Session: a11y goes to 11

#a11yto11

Page 3: Fronteers11 Jam Session: a11y goes to 11

2010#fronteers10

Page 4: Fronteers11 Jam Session: a11y goes to 11
Page 5: Fronteers11 Jam Session: a11y goes to 11
Page 6: Fronteers11 Jam Session: a11y goes to 11

2011#fronteers11

Page 7: Fronteers11 Jam Session: a11y goes to 11

accessibilityaccessibility

11

Page 8: Fronteers11 Jam Session: a11y goes to 11

accessibility!""#$$%b%&%'(11

Page 9: Fronteers11 Jam Session: a11y goes to 11

New exciting web technologies enable us to do moreaccessible web sitesby doing less.

Page 10: Fronteers11 Jam Session: a11y goes to 11

HTML4

Page 11: Fronteers11 Jam Session: a11y goes to 11

HTML4

Page 12: Fronteers11 Jam Session: a11y goes to 11

HTML5

Page 13: Fronteers11 Jam Session: a11y goes to 11

We need to get rid of the dogmas.

Page 14: Fronteers11 Jam Session: a11y goes to 11

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

Page 15: Fronteers11 Jam Session: a11y goes to 11

Robust

Page 16: Fronteers11 Jam Session: a11y goes to 11

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

- di!cult to read for mentally challenged people- slight performance penalty

Page 17: Fronteers11 Jam Session: a11y goes to 11

Perceivable

Page 18: Fronteers11 Jam Session: a11y goes to 11

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

Page 19: Fronteers11 Jam Session: a11y goes to 11

Understandable

Page 20: Fronteers11 Jam Session: a11y goes to 11

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.)

Page 21: Fronteers11 Jam Session: a11y goes to 11

Operable

Page 22: Fronteers11 Jam Session: a11y goes to 11

It’s hard to reach

Perfectionand when you do, it is often

destroyed by others.

Page 23: Fronteers11 Jam Session: a11y goes to 11

@ScreenOrigami & @yatil

We’ll help!

Page 24: Fronteers11 Jam Session: a11y goes to 11

Screenshot

a11yto11.com

a11yto11.com

Page 25: Fronteers11 Jam Session: a11y goes to 11

10 tips tailored to

your web site

Inexpensive

Page 26: Fronteers11 Jam Session: a11y goes to 11
Page 27: Fronteers11 Jam Session: a11y goes to 11

avoid the pitfalls

Page 28: Fronteers11 Jam Session: a11y goes to 11

thank you!Follow us on twitter:

@a11yto11

@ScreenOrigami & @yatil

@webcontravelers