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