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

Accessibility Through Progressive Enhancement

Mat Marquis
October 13, 2011

Accessibility Through Progressive Enhancement

Mat Marquis

October 13, 2011
Tweet

More Decks by Mat Marquis

Other Decks in Technology

Transcript

  1. Accessibility
    11
    Wednesday, October 12

    View Slide

  2. A
    ccessibilit
    y
    11
    Wednesday, October 12

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  8. Who is this for?
    Wednesday, October 12

    View Slide

  9. Wednesday, October 12

    View Slide

  10. Wednesday, October 12

    View Slide

  11. Wednesday, October 12

    View Slide

  12. Wednesday, October 12

    View Slide

  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

    View Slide

  14. Context
    Wednesday, October 12

    View Slide

  15. Context
    Wednesday, October 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  23. Semantic Markup
    Wednesday, October 12

    View Slide

  24. 0 100
    Wednesday, October 12

    View Slide

  25. 0 100

    Wednesday, October 12

    View Slide

  26. Freeze-Ray Completion Percentage
    min="0"
    max="100"
    value="80"
    />
    Wednesday, October 12

    View Slide

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

    View Slide




  28. Wednesday, October 12

    View Slide




  29. Wednesday, October 12

    View Slide

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

    View Slide

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

    View Slide

  32. Freeze-Ray Completion Percentage
    min="0"
    max="100"
    value="80"
    />



    Wednesday, October 12

    View Slide

  33. Freeze-Ray Completion Percentage
    min="0"
    max="100"
    value="80"
    />
    Wednesday, October 12

    View Slide


  34. Freeze-Ray Completion Percentage
    min="0"
    max="100"
    value="80"
    />

    Wednesday, October 12

    View Slide

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

    View Slide


  36. Freeze-Ray Completion Percentage
    min="0"
    max="100"
    value="80"
    />

    Wednesday, October 12

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide




  41. “Number link.”
    Wednesday, October 12

    View Slide


  42. role="slider"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="80"
    aria-valuetext="80%">


    “Slider control: eighty percent. Use arrows to move handle.”
    Wednesday, October 12

    View Slide


  43. role="slider"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="80"
    aria-valuetext="80%">


    “Slider control: eighty percent. Use arrows to move handle.”
    Wednesday, October 12

    View Slide

  44. AWESOME
    Wednesday, October 12

    View Slide

  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

    View Slide