Accessibility Through Progressive Enhancement

Transcript

1. Accessibility 11 Wednesday, October 12
2. A ccessibilit y 11 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. 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
7. 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
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 Content First HTML CSS WAI-ARIA JavaScript Wednesday, October 12
17. Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October 12
18. Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October 12
19. Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript Wednesday, October 12
20. Progressive Enhancement Content First HTML CSS WAI-ARIA JavaScript 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. 0 100 <input type="number" name="widget" min="0" max="100" value="0" /> 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. 0 Freeze-Ray Completion Percentage 50 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