Mat Marquis,

1. Accessibility
11
Wednesday, October 12

2. ccessibilit
A11 y
Wednesday, October 12

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

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

5. “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

6. Percentage of U.S. Population Suffering From:
Difficulty Seeing
http://www.census.gov 3.4%
Severe Difficulty Seeing
http://www.census.gov 0.8%
Internet Explorer 6
http://www.ie6countdown.com 1.4%
Wednesday, October 12

7. Percentage of U.S. Population Suffering From:
Difficulty Seeing
http://www.census.gov 3.4%
Severe Difficulty Seeing
http://www.census.gov 0.8%
Internet Explorer 6
http://www.ie6countdown.com 1.4%
Wednesday, October 12

8. Who is this for?
Wednesday, October 12

9. Wednesday, October 12

10. Wednesday, October 12

11. Wednesday, October 12

12. Wednesday, October 12

13. “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

14. Context
Wednesday, October 12

15. Context
Wednesday, October 12

16. Progressive Enhancement
WAI-ARIA
JavaScript
CSS
HTML
Content First
Wednesday, October 12

17. Progressive Enhancement
WAI-ARIA
JavaScript
CSS
HTML
Content First
Wednesday, October 12

18. Progressive Enhancement
WAI-ARIA
JavaScript
CSS
HTML
Content First
Wednesday, October 12

19. Progressive Enhancement
WAI-ARIA
JavaScript
CSS
HTML
Content First
Wednesday, October 12

20. Progressive Enhancement
WAI-ARIA
JavaScript
CSS
HTML
Content First
Wednesday, October 12

21. “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

22. “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

23. Semantic Markup
Wednesday, October 12

24. 0 100
Wednesday, October 12

25. <input type="number" name="widget" min="0" max="100" value="0" />
0 100
Wednesday, October 12

26. <label for="widget">Freeze-Ray Completion Percentage</label>
<input type="number" name="widget" id="widget"
min="0"
max="100"
value="80"
/>
Wednesday, October 12

27. Freeze-Ray Completion Percentage
0
Wednesday, October 12

28. <div class="slider">
<a href="#" class="slider-handle"></a>
</div>
Wednesday, October 12

29. <div class="slider">
<a href="#" class="slider-handle" style="left: 80%;"></a>
</div>
Wednesday, October 12

30. Freeze-Ray Completion Percentage
0
Wednesday, October 12

31. Freeze-Ray Completion Percentage
50
0
Wednesday, October 12

32. <label for="widget">Freeze-Ray Completion Percentage</label>
<input type="number" name="widget" id="widget"
min="0"
max="100"
value="80"
/>
<div class="slider">
<a href="#" class="slider-handle"></a>
</div>
Wednesday, October 12

33. <label for="widget">Freeze-Ray Completion Percentage</label>
<input type="number" name="widget" id="widget"
min="0"
max="100"
value="80"
/>
Wednesday, October 12

34. <div class="percent-slider">
<label for="widget">Freeze-Ray Completion Percentage</label>
<input type="number" name="widget" id="widget"
min="0"
max="100"
value="80"
/>
</div>
Wednesday, October 12

35. .ui-slider label,
.ui-slider input {
position: absolute;
left: -9999px;
}
Wednesday, October 12

36. <div class="percent-slider">
<label for="widget">Freeze-Ray Completion Percentage</label>
<input type="number" name="widget" id="widget"
min="0"
max="100"
value="80"
/>
</div>
Wednesday, October 12

37. WAI-ARIA*
*Web Accessibility Initiative - Accessible Rich Internet Applications
Wednesday, October 12

38. WAI-ARIA*
*Web Accessibility Initiative - Accessible Rich Internet Applications
Wednesday, October 12

39. ARIA Attributes
landmark
"banner" "main" "navigation"
role
"slider" "tabs"
state
"aria-expanded" "aria-checked"
Wednesday, October 12

40. ARIA Attributes
landmark
"banner" "main" "navigation"
role
"slider" "tabs"
state
"aria-expanded" "aria-checked"
Wednesday, October 12

41. <div class="slider">
<a href="#" class="slider-handle" style="left: 80%;"></a>
</div>
“Number link.”
Wednesday, October 12

42. <div role="application" class="percent-slider">
<a href="#" class="slider-handle" style="left: 80%;"
role="slider"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="80"
aria-valuetext="80%">
</a>
</div>
“Slider control: eighty percent. Use arrows to move handle.”
Wednesday, October 12

43. <div role="application" class="percent-slider">
<a href="#" class="slider-handle" style="left: 80%;"
role="slider"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="80"
aria-valuetext="80%">
</a>
</div>
“Slider control: eighty percent. Use arrows to move handle.”
Wednesday, October 12

44. AWESOME
Wednesday, October 12

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