Why build accessible websites?
• Because we’re decent human beings.
• Why wouldn’t we?
• What are you, some kind of jerk?
• C’mon, man.
• C’mon.
Wednesday, October 12
Slide 4
Slide 4 text
Why build accessible websites?
• Because we’re decent human beings.
• Why wouldn’t we?
• What are you, some kind of jerk?
• C’mon, man.
• C’mon.
Wednesday, October 12
Slide 5
Slide 5 text
The power of the Web is in its universality.
Access by everyone regardless of disability is an
essential aspect.
Tim Berners-Lee
“
Wednesday, October 12
Slide 6
Slide 6 text
Difficulty Seeing
http://www.census.gov
Severe Difficulty Seeing
http://www.census.gov
Internet Explorer 6
http://www.ie6countdown.com
1.4%
3.4%
0.8%
Percentage of U.S. Population Suffering From:
Wednesday, October 12
Slide 7
Slide 7 text
Difficulty Seeing
http://www.census.gov
Severe Difficulty Seeing
http://www.census.gov
Internet Explorer 6
http://www.ie6countdown.com
1.4%
3.4%
0.8%
Percentage of U.S. Population Suffering From:
Wednesday, October 12
Slide 8
Slide 8 text
Who is this for?
Wednesday, October 12
Slide 9
Slide 9 text
Wednesday, October 12
Slide 10
Slide 10 text
Wednesday, October 12
Slide 11
Slide 11 text
Wednesday, October 12
Slide 12
Slide 12 text
Wednesday, October 12
Slide 13
Slide 13 text
Around 10 percent of the world’s population, or 650
million people, live with a disability. They are the
world's largest minority.
The United Nations
http://www.un.org/disabilities/default.asp?id=18
“
Wednesday, October 12
Slide 14
Slide 14 text
Context
Wednesday, October 12
Slide 15
Slide 15 text
Context
Wednesday, October 12
Slide 16
Slide 16 text
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
Slide 17
Slide 17 text
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
Slide 18
Slide 18 text
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
Slide 19
Slide 19 text
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
Slide 20
Slide 20 text
Progressive Enhancement
Content First
HTML
CSS
WAI-ARIA
JavaScript
Wednesday, October 12
Slide 21
Slide 21 text
We need to make smarter content,
not smarter containers.*
Stephanie Rieger
http://twitter.com/stephanierieger
“
* We’re gonna make smarter containers, too.
Wednesday, October 12
Slide 22
Slide 22 text
We need to make smarter content,
not smarter containers.*
Stephanie Rieger
http://twitter.com/stephanierieger
“
* We’re gonna make smarter containers, too.
Wednesday, October 12
Slide 23
Slide 23 text
Semantic Markup
Wednesday, October 12
Slide 24
Slide 24 text
0 100
Wednesday, October 12
Slide 25
Slide 25 text
0 100
Wednesday, October 12
Slide 26
Slide 26 text
Freeze-Ray Completion Percentage
Wednesday, October 12
Slide 27
Slide 27 text
Freeze-Ray Completion Percentage
0
Wednesday, October 12
Slide 28
Slide 28 text
Wednesday, October 12
Slide 29
Slide 29 text
Wednesday, October 12
Slide 30
Slide 30 text
Freeze-Ray Completion Percentage
0
Wednesday, October 12
Slide 31
Slide 31 text
0
Freeze-Ray Completion Percentage
50
Wednesday, October 12
Slide 32
Slide 32 text
Freeze-Ray Completion Percentage
Wednesday, October 12
Slide 33
Slide 33 text
Freeze-Ray Completion Percentage
Wednesday, October 12
WAI-ARIA*
*Web Accessibility Initiative - Accessible Rich Internet Applications
Wednesday, October 12
Slide 38
Slide 38 text
WAI-ARIA*
*Web Accessibility Initiative - Accessible Rich Internet Applications
Wednesday, October 12
Slide 39
Slide 39 text
ARIA Attributes
landmark
"banner" "main" "navigation"
role
"slider" "tabs"
state
"aria-expanded" "aria-checked"
Wednesday, October 12
Slide 40
Slide 40 text
ARIA Attributes
landmark
"banner" "main" "navigation"
role
"slider" "tabs"
state
"aria-expanded" "aria-checked"
Wednesday, October 12
Slide 41
Slide 41 text
“Number link.”
Wednesday, October 12
Slide 42
Slide 42 text
“Slider control: eighty percent. Use arrows to move handle.”
Wednesday, October 12
Slide 43
Slide 43 text
“Slider control: eighty percent. Use arrows to move handle.”
Wednesday, October 12
Slide 44
Slide 44 text
AWESOME
Wednesday, October 12
Slide 45
Slide 45 text
Resources
Designing with Progressive Enhancement
Building the Web that Works for Everyone
http://wil.to/a11y/g
http://wil.to/a11y/
http://twitter.com/wilto
Wednesday, October 12