Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility Through Progressive Enhancement

36386473ee7de091db26bd82f8d18ca8?s=47 Mat Marquis
October 13, 2011

Accessibility Through Progressive Enhancement

36386473ee7de091db26bd82f8d18ca8?s=128

Mat Marquis

October 13, 2011
Tweet

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