Accessibility Through Progressive Enhancement

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