Strategies for Accessibility

Chicago Web Conf - September, 2011

Transcript

1. Chicago'Web'Conf' September,'2011 Mark'Meeker' @meeker STRATEGIES FOR ACCESSIBILITY
4. “ ” -Tim Berners-Lee The primary design principle underlying the Web’s usefulness and growth is universality. The Web should be usable by people with disabilities. It must work with any form of information, be it a document or a point of data, and information of any quality—from a silly tweet to a scholarly paper. And it should be accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large.
6. http://arstechnica.com/old/content/2008/08/target-to-pay-6-million-to-settle-site-accessibility-suit.ars
7. Progressive Enhancement
8. Interaction Patterns • Filters • Transitions • Auto-complete • Calendar Pickers • Collapse • Drag and Drop • Lightboxes • Yellow Fade • Auto Update • Hover • Tabs • Rating Widgets • Sliders • Micro-content • Auto-fill • Expand / Collapse • Inline Validation • Zoom • Navigation • Auto Refresh • Carrousel • Inline edit
9. Barriers http://www.flickr.com/photos/goldfishsnaps/2830876853/
10. ‣ Blind ‣ Low-vision ‣ Colorblind ‣ Deaf ‣ Hearing impared ‣ Motor disability ‣ Cognitive disability ‣ Situational Barriers
11. http://www.flickr.com/photos/funnyunc/2670987928/
14. Users will never use your site in the way you expect them to.
15. Tools ‣ Screen readers ‣ Jaws ‣ Window-Eyes ‣ NVDA ‣ VoiceOver
16. ‣ Screen readers ‣ Screen magnifiers ‣ Braille displays ‣ Voice recognition software ‣ keyboard (no mouse) ‣ Head wand Tools
18. Screen readers do not understand JavaScript.
19. Screen readers do not understand JavaScript.
20. Support accessibility for Ajax features just means having a <noscript> state.
21. Support accessibility for Ajax features just means having a <noscript> state.
22. Accessibility only benefits users who are blind.
23. Accessibility only benefits users who are blind.
24. Accessibility is a subset of usability.
25. Accessibility is a subset of usability.
26. http://www.flickr.com/photos/82046831@N00/514212023/ Approaches
27. Semantic Markup
29. http://joshduck.com/periodic-table.html
31. apple.com
32. apple.com
34. 1 2 3 4 5 6 7 8 9
35. 1 2 3 4 5 6 7 8 9
36. http://tv.yahoo.com
37. http://tv.yahoo.com
40. <label>
41. <label for=”firstname”>First Name:</label> <input type=”text” id=”firstname” name=”firstname” /> <label>First Name: <input type=”text” id=”firstname” name=”firstname” /> </label>
42. Design
43. display: none visibility: hidden Hiding Content
44. orbitz.com
45. .offscreen { position:absolute; left:-9999px; } Hiding Content
47. http://www.checkmycolours.com/
48. http://css-tricks.com/829-removing-the-dotted-outline/
49. a { outline: 0; } Please don’t do this...
50. Focus
52. vs. <input> <a> <button> <div> <td> <img>
54. www.orbitz.com
55. facebook.com
56. facebook.com
57. facebook.com
58. facebook.com
59. facebook.com
60. facebook.com
61. facebook.com
62. facebook.com
63. facebook.com
66. yammer.com
67. yammer.com
68. yammer.com
69. yammer.com
70. facebook.com
71. facebook.com
72. facebook.com Access Keys - <ESC>
73. Linearization
74. http://apple.com
75. ebookers.com
76. ebookers.com
77. yahoo.com
78. Redundant Inputs
80. netflix (circa 2008)
81. netflix (circa 2008)
82. WAI-ARIA
83. facebook.com <div role="dialog" ... >
84. yahoo.com <div role="region” aria-live=”polite” ... >
85. Getting Started
86. ‣ Start with new features ‣ Learn the patterns ‣ Don’t make things worse Getting Started
87. ‣ Minimize the pain ‣ Make the steps clear ‣ Consider the context ‣ Consistency Getting Started credit: Peter Wallack
88. ‣ http://simplyaccessible.com/ ‣ http://webstandardssherpa.com/ ‣ http://www.uiaccess.com/justask/ ‣ http://developer.yahoo.com/yui/theater/ ‣ http://www.w3.org/TR/WCAG/ Resources