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

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

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

Page 1: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Principles of Accessible Web Design

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

Page 2: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

(Almost.)

Everyone here is disabled.

(Or will be at some time.)

Page 3: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although
Page 4: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

“People need not be limited by physical

handicaps as long as they are not disabled

in spirit.”

Page 5: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different input mechanisms

Page 6: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different input mechanisms

Page 7: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different input mechanisms

Page 8: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different input mechanisms

Page 9: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different input mechanisms

Page 10: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different input mechanisms

Page 11: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different input mechanisms

Page 12: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different output mechanisms

Page 13: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different output mechanisms

Page 14: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different output mechanisms

Page 15: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different output mechanisms

Page 16: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different output mechanisms

Page 17: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Different output mechanisms

Page 18: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although
Page 19: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

We don’t need special websites for people with special

requirements.

Page 20: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Have you ever forgotten to buy new batteries for

your mouse?

Page 21: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although
Page 22: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although
Page 23: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although
Page 24: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although
Page 25: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

Accessible websites help everyone.

Page 26: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although
Page 27: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

We are designing the web for our

future selves.

Page 28: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 29: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 30: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 31: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 32: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 33: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 34: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

0 25 50 75 100

14-19

20-29

30-39

40-49

50-59

60+

19982008

Page 35: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

What can we do?

Page 36: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

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: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

POSH5 & POUR

Page 38: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

POSH5 & POURPlain Old Simple HTML5

Page 39: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

POSH5 & POURPlain Old Simple HTML5

Perceivable, Operable, Understandable, Robust

Page 40: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

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

Page 41: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

HTML5Includes many accessibility features (although others claim otherwise).

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

Page 42: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

WCAG2Is the spec for accessible web content.

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

Page 43: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

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

PerceivableOperableUnderstandableRobust

Page 44: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

And now: Sharky

mail: [email protected] twitter: @yatil

Page 45: Principles Accessible Web Design · Eric Eggert aka. @yatil — Fronteers Jam Session — Amsterdam (Almost.) Everyone here is disabled. ... Includes many accessibility features (although

And now: Sharky

mail: [email protected] twitter: @yatil