Accessibility by Mat Marquis

1,846 views
1,790 views

Published on

Mat Marquis,

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,846
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Accessibility by Mat Marquis

  1. 1. Accessibility 11Wednesday, October 12
  2. 2. ccessibilit A11 yWednesday, October 12
  3. 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. 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. 5. “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-LeeWednesday, October 12
  6. 6. Percentage of U.S. Population Suffering From: Difficulty Seeing http://www.census.gov 3.4% Severe Difficulty Seeing http://www.census.gov 0.8% Internet Explorer 6 http://www.ie6countdown.com 1.4%Wednesday, October 12
  7. 7. Percentage of U.S. Population Suffering From: Difficulty Seeing http://www.census.gov 3.4% Severe Difficulty Seeing http://www.census.gov 0.8% Internet Explorer 6 http://www.ie6countdown.com 1.4%Wednesday, October 12
  8. 8. Who is this for?Wednesday, October 12
  9. 9. Wednesday, October 12
  10. 10. Wednesday, October 12
  11. 11. Wednesday, October 12
  12. 12. Wednesday, October 12
  13. 13. “Around 10 percent of the world’s population, or 650 million people, live with a disability. They are the worlds largest minority. The United Nations http://www.un.org/disabilities/default.asp?id=18Wednesday, October 12
  14. 14. ContextWednesday, October 12
  15. 15. ContextWednesday, October 12
  16. 16. Progressive Enhancement WAI-ARIA JavaScript CSS HTML Content FirstWednesday, October 12
  17. 17. Progressive Enhancement WAI-ARIA JavaScript CSS HTML Content FirstWednesday, October 12
  18. 18. Progressive Enhancement WAI-ARIA JavaScript CSS HTML Content FirstWednesday, October 12
  19. 19. Progressive Enhancement WAI-ARIA JavaScript CSS HTML Content FirstWednesday, October 12
  20. 20. Progressive Enhancement WAI-ARIA JavaScript CSS HTML Content FirstWednesday, October 12
  21. 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. 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. 23. Semantic MarkupWednesday, October 12
  24. 24. 0 100Wednesday, October 12
  25. 25. <input type="number" name="widget" min="0" max="100" value="0" /> 0 100Wednesday, October 12
  26. 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. 27. Freeze-Ray Completion Percentage 0Wednesday, October 12
  28. 28. <div class="slider"> <a href="#" class="slider-handle"></a> </div>Wednesday, October 12
  29. 29. <div class="slider"> <a href="#" class="slider-handle" style="left: 80%;"></a> </div>Wednesday, October 12
  30. 30. Freeze-Ray Completion Percentage 0Wednesday, October 12
  31. 31. Freeze-Ray Completion Percentage 50 0Wednesday, October 12
  32. 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. 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. 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. 35. .ui-slider label, .ui-slider input { position: absolute; left: -9999px; }Wednesday, October 12
  36. 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. 37. WAI-ARIA* *Web Accessibility Initiative - Accessible Rich Internet ApplicationsWednesday, October 12
  38. 38. WAI-ARIA* *Web Accessibility Initiative - Accessible Rich Internet ApplicationsWednesday, October 12
  39. 39. ARIA Attributes landmark "banner" "main" "navigation" role "slider" "tabs" state "aria-expanded" "aria-checked"Wednesday, October 12
  40. 40. ARIA Attributes landmark "banner" "main" "navigation" role "slider" "tabs" state "aria-expanded" "aria-checked"Wednesday, October 12
  41. 41. <div class="slider"> <a href="#" class="slider-handle" style="left: 80%;"></a> </div> “Number link.”Wednesday, October 12
  42. 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. 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. 44. AWESOMEWednesday, October 12
  45. 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/wiltoWednesday, October 12

×