Fronteers Jam Session: Principles of Accessible Web Design

45
Principles of Accessible Web Design Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam

description

 

Transcript of Fronteers Jam Session: Principles of Accessible Web Design

Page 1: Fronteers Jam Session: Principles of  Accessible Web Design

Principles of Accessible Web Design

Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam

Page 2: Fronteers Jam Session: Principles of  Accessible Web Design

(Almost.)

Everyone here is disabled.

(Or will be at some time.)

Page 3: Fronteers Jam Session: Principles of  Accessible Web Design
Page 4: Fronteers Jam Session: Principles of  Accessible Web Design

“People need not be limited by physical

handicaps as long as they are not disabled

in spirit.”

Page 5: Fronteers Jam Session: Principles of  Accessible Web Design

Different input mechanisms

Page 6: Fronteers Jam Session: Principles of  Accessible Web Design

Different input mechanisms

Page 7: Fronteers Jam Session: Principles of  Accessible Web Design

Different input mechanisms

Page 8: Fronteers Jam Session: Principles of  Accessible Web Design

Different input mechanisms

Page 9: Fronteers Jam Session: Principles of  Accessible Web Design

Different input mechanisms

Page 10: Fronteers Jam Session: Principles of  Accessible Web Design

Different input mechanisms

Page 11: Fronteers Jam Session: Principles of  Accessible Web Design

Different input mechanisms

Page 12: Fronteers Jam Session: Principles of  Accessible Web Design

Different output mechanisms

Page 13: Fronteers Jam Session: Principles of  Accessible Web Design

Different output mechanisms

Page 14: Fronteers Jam Session: Principles of  Accessible Web Design

Different output mechanisms

Page 15: Fronteers Jam Session: Principles of  Accessible Web Design

Different output mechanisms

Page 16: Fronteers Jam Session: Principles of  Accessible Web Design

Different output mechanisms

Page 17: Fronteers Jam Session: Principles of  Accessible Web Design

Different output mechanisms

Page 18: Fronteers Jam Session: Principles of  Accessible Web Design
Page 19: Fronteers Jam Session: Principles of  Accessible Web Design

We don’t need special websites for people with special

requirements.

Page 20: Fronteers Jam Session: Principles of  Accessible Web Design

Have you ever forgotten to buy new batteries for

your mouse?

Page 21: Fronteers Jam Session: Principles of  Accessible Web Design
Page 22: Fronteers Jam Session: Principles of  Accessible Web Design
Page 23: Fronteers Jam Session: Principles of  Accessible Web Design
Page 24: Fronteers Jam Session: Principles of  Accessible Web Design
Page 25: Fronteers Jam Session: Principles of  Accessible Web Design

Accessible websites help everyone.

Page 26: Fronteers Jam Session: Principles of  Accessible Web Design
Page 27: Fronteers Jam Session: Principles of  Accessible Web Design

We are designing the web for our

future selves.

Page 28: Fronteers Jam Session: Principles of  Accessible Web Design

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 29: Fronteers Jam Session: Principles of  Accessible Web Design

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 30: Fronteers Jam Session: Principles of  Accessible Web Design

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 31: Fronteers Jam Session: Principles of  Accessible Web Design

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 32: Fronteers Jam Session: Principles of  Accessible Web Design

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 33: Fronteers Jam Session: Principles of  Accessible Web Design

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 34: Fronteers Jam Session: Principles of  Accessible Web Design

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 35: Fronteers Jam Session: Principles of  Accessible Web Design

What can we do?

Page 36: Fronteers Jam Session: Principles of  Accessible Web Design

Don’t use Flash.It isn’t working on most mobiles.

It isn’t „working“ on most PCs either.

It can be made accessible on Windows and IE only.

Page 37: Fronteers Jam Session: Principles of  Accessible Web Design

POSH5 & POUR

Page 38: Fronteers Jam Session: Principles of  Accessible Web Design

POSH5 & POURPlain Old Simple HTML5

Page 39: Fronteers Jam Session: Principles of  Accessible Web Design

POSH5 & POURPlain Old Simple HTML5

Perceivable, Operable, Understandable, Robust

Page 40: Fronteers Jam Session: Principles of  Accessible Web Design

POSH5Use the best HTML5 Element available for the task at hand.

Page 41: Fronteers Jam Session: Principles of  Accessible Web Design

HTML5Includes many accessibility features (although others claim otherwise).

It is not the spec to look to when searching for web accessibility techniques.

Page 42: Fronteers Jam Session: Principles of  Accessible Web Design

WCAG2Is the spec for accessible web content.

Provides an exhaustive list of techniques to make web content accessible.

Page 43: Fronteers Jam Session: Principles of  Accessible Web Design

http://www.w3.org/WAI/WCAG20/quickref/

PerceivableOperableUnderstandableRobust

Page 44: Fronteers Jam Session: Principles of  Accessible Web Design

And now: Sharky

mail: [email protected] twitter: @yatil

Page 45: Fronteers Jam Session: Principles of  Accessible Web Design

And now: Sharky

mail: [email protected] twitter: @yatil