Your SlideShare is downloading. ×
0
Accessibility                            11Wednesday, October 12
ccessibilit                          A11 yWednesday, October 12
Why build accessible websites?      • Because we’re decent human beings.      • Why wouldn’t we?      • What are you, some...
Why build accessible websites?      • Because we’re decent human beings.      • Why wouldn’t we?      • What are you, some...
“The power of the Web is in its universality.      Access by everyone regardless of disability is an      essential aspect...
Percentage of U.S. Population Suffering From:      Difficulty Seeing      http://www.census.gov                           ...
Percentage of U.S. Population Suffering From:      Difficulty Seeing      http://www.census.gov                           ...
Who is this for?Wednesday, October 12
Wednesday, October 12
Wednesday, October 12
Wednesday, October 12
Wednesday, October 12
“Around 10 percent of the world’s population, or 650      million people, live with a disability. They are the      worlds...
ContextWednesday, October 12
ContextWednesday, October 12
Progressive Enhancement                          WAI-ARIA                         JavaScript                            CS...
Progressive Enhancement                          WAI-ARIA                         JavaScript                            CS...
Progressive Enhancement                          WAI-ARIA                         JavaScript                            CS...
Progressive Enhancement                          WAI-ARIA                         JavaScript                            CS...
Progressive Enhancement                          WAI-ARIA                         JavaScript                            CS...
“We need to make smarter content,      not smarter containers.*      Stephanie Rieger      http://twitter.com/stephanierie...
“We need to make smarter content,      not smarter containers.*      Stephanie Rieger      http://twitter.com/stephanierie...
Semantic MarkupWednesday, October 12
0            100Wednesday, October 12
<input type="number" name="widget" min="0" max="100" value="0" />           0                                             ...
<label for="widget">Freeze-Ray Completion Percentage</label>     	        <input type="number" name="widget" id="widget"  ...
Freeze-Ray Completion Percentage               0Wednesday, October 12
<div class="slider">     	        <a href="#" class="slider-handle"></a>     </div>Wednesday, October 12
<div class="slider">     	        <a href="#" class="slider-handle" style="left: 80%;"></a>     </div>Wednesday, October 12
Freeze-Ray Completion Percentage               0Wednesday, October 12
Freeze-Ray Completion Percentage               50               0Wednesday, October 12
<label for="widget">Freeze-Ray Completion Percentage</label>     <input type="number" name="widget" id="widget"           ...
<label for="widget">Freeze-Ray Completion Percentage</label>                <input type="number" name="widget" id="widget"...
<div class="percent-slider">                <label for="widget">Freeze-Ray Completion Percentage</label>                <i...
.ui-slider label,     .ui-slider input {                position: absolute;                left: -9999px;     }Wednesday, ...
<div class="percent-slider">                <label for="widget">Freeze-Ray Completion Percentage</label>                <i...
WAI-ARIA*                        *Web Accessibility Initiative - Accessible Rich Internet ApplicationsWednesday, October 12
WAI-ARIA*                        *Web Accessibility Initiative - Accessible Rich Internet ApplicationsWednesday, October 12
ARIA Attributes      landmark      "banner" "main" "navigation"      role      "slider" "tabs"      state      "aria-expan...
ARIA Attributes      landmark      "banner" "main" "navigation"      role      "slider" "tabs"      state      "aria-expan...
<div class="slider">                <a href="#" class="slider-handle" style="left: 80%;"></a>     </div>                  ...
<div role="application" class="percent-slider">     	        <a href="#" class="slider-handle" style="left: 80%;"         ...
<div role="application" class="percent-slider">     	        <a href="#" class="slider-handle" style="left: 80%;"         ...
AWESOMEWednesday, October 12
Resources                        Designing with Progressive Enhancement                        Building the Web that Works...
Upcoming SlideShare
Loading in...5
×

Accessibility by Mat Marquis

1,700

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,700
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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×