Merging Ajax and Accessibility

The Rich Web Experience - September, 2008

Transcript

1. The*Rich*Web*Experience* September,'2008 Mark*Meeker* MERGING AJAX -&- ACCESSIBILITY
2. “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee
3. What Changed?
4. • 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 Interaction Patterns
5. http://blaugh.com/2006/08/21/ajax-makes-everything-better/ Ajax is Everywhere
6. Myths
7. Screen readers don’t understand JavaScript. M Y T H Screen readers run on top of everyday browsers which are JavaScript enabled. F A C T
8. Supporting accessibility for Ajax just means having a <noscript /> state. M Y T H While there are many benefits to a site that works without scripting enabled, accessibility deals with many other areas. F A C T
9. Accessibility only benefits blind users. M Y T H Accessibility improvements are targeted towards and assist users with numerous disabilities (and even users without!). F A C T
10. Scope
11. Scope • Blind, low vision, color blindness • Limited mobility • Learning disabilities • Deaf, hearing impaired
12. Scope • Screen readers • Braille displays • Screen magnification • Keyboard only navigation • Speech recognition
13. Universality
14. 6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page. WCAG 1.0
15. • Content is king! • Start with POSH - Plain Old Semantic HTML • Semantic markup to supply meaning to content • Serve base content to everyone • Add presentation and behavior to enhance experience Progressive Enhancement
16. Progressive Enhancement HTML Content CSS Presentation JS Behavior “No Frills” “Dress it Up” “Make it Sing”
17. Progressive Enhancement 1 2 3 4 HTML CSS JS            
18. The Long Tail • Universality • Multiple Devices • Graded Browser Support • Search Engine Friendly
19. Progressive Enhancement
20. Progressive Enhancement 1 HTML  CSS  JS 
21. <img src=”/map/image” /> <ul> <li><a href=”/map/move?dir=n”>North</a></li> <li><a href=”/map/move?dir=e”>East</a></li> <li><a href=”/map/move?dir=s”>South</a></li> <li><a href=”/map/move?dir=w”>West</a></li> ... </ul> <ul> <li><a href=”/map/zoom?level=1”>Zoom Level 1</a></li> <li><a href=”/map/zoom?level=2”>Zoom Level 2</a></li> <li><a href=”/map/zoom?level=3”>Zoom Level 3</a></li> ... </ul>
22. Progressive Enhancement 2 HTML  CSS  JS 
23. Progressive Enhancement 3 HTML  CSS  JS 
24. Progressive Enhancement 4 HTML  CSS  JS 
27. Select from known list: Free form input:
29. 2 HTML  CSS  JS  4 HTML  CSS  JS 
30. • 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 Interaction Patterns
31. • 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 Interaction Patterns
32. Hijax • Term coined by Jeremy Keith • Bulletproof Ajax (http://bulletproofajax.com/) • Pull in portion of page via Ajax when XHR is supported • Re-use same portion when a full page refresh is required
33. Hijax Header Footer Rail Module 1 Login Module Module 2 JS-Enabled XHR noscript page transition Login Module
37. JS-Enabled XHR no-script page transition
40. Redundant Inputs
41. • Offer multiple input options • GUI input and keyboard input • Enhance visual cues with text-based cues • Look to desktop interfaces for patterns • Seek out CLI developers for testing Redundant Inputs
42. http://netflix.com Redundant Inputs
43. http://developer.yahoo.com/yui/examples/ Redundant Inputs
44. Linearization
45. Linearization http://ebookers.com
46. State/ Province Zip/Postal Code Examples No Yes United Kingdom, France, Germany Drop Down Yes United States, Canada, Australia Input Yes No No Ireland Linearization
47. Linearization
48. Linearization http://basecamphq.com
49. Focus
50. Focus vs. <input> <a> <button> <div> <td> <img>
51. Real Link? http://ebookers.com
52. http://amazon.com Real Checkbox?
53. http://amazon.com Real Checkbox? 1 2 3 4 5 6 7 8 9
54. http://amazon.com Real Checkbox? 1 2 3 4 5 6 7 8 9
55. http://apple.com Is that a button?
56. Tab Index Tab Index Focusable with mouse or element.focus() Navigable via tab key Not present Follows default behavior of element (only form controls and anchors receive focus) Follows default behavior of element > 0 Yes Tabindex value directly specifies where this element is positioned in the tab order. 0 Yes In tab order relative to element’s position in document -1 Yes Not in tab order. http://www.dojotoolkit.org/book/export/html/118
57. Where to Next? http://facebook.com
58. Updates
59. Updates http://finance.yahoo.com/
60. Updates http://finance.yahoo.com/
61. Updating the Buffer function prepareBuffer() { var objNew = document.createElement('p'); var objHidden = document.createElement('input'); objHidden.setAttribute('type', 'hidden'); objHidden.setAttribute('value', '1'); objHidden.setAttribute('id', 'virtualbufferupdate'); objHidden.setAttribute('name', 'virtualbufferupdate'); objNew.appendChild(objHidden); document.body.appendChild(objNew); } function updateBuffer() { var objHidden = document.getElementById('virtualbufferupdate'); if (objHidden) { if (objHidden.getAttribute('value') == '1') objHidden.setAttribute('value', '0'); else objHidden.setAttribute('value', '1'); } } http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php
62. Set Focus on Update? http://orbitz.com
63. <div id=”tripcost” tabindex="-1"> // trip cost markup </div> onclick: document.getElementById('tripcost').focus(); Set Focus on Update?
64. Set Focus on Update? Screen Magnifiers?
69. http://apple.com
70. WAI-ARIA
71. • <div> can be a button • <span> can be a slider • Need a better API • Leverage accessibility support in the OS Replicating the Desktop
72. • W3C Web Accessibility Initiative Accessible Rich Internet Applications • Adds hooks into accessibility API of the platform • Define Roles and States so scripts can interact with AT APIs • http://www.w3.org/WAI/ WAI - ARIA
73. • link • combobox, options • checkbox • radio, radiogroup • button • progressbar • slider • spinbutton • tree,treeitem • application • presentation • group • grid, gridcell • tab, tablist, tabpanel • list, listitem • menu, menubar • toolbar • alert Roles
74. States • checked • disabled • readonly • expanded • valuemin, valuemax, valuenow
75. ARIA <div role="dialog" ... >
76. ARIA <div role="dialog" ... >
77. ARIA <li role="treeitem" aria-expanded="true" ... >
78. ARIA <div role="slider" aria-valuemin="1" aria-valuemax="5" aria-valuenow="1”>
79. ARIA <div role="region” aria-live=”polite” ... >
80. Testing
81. • Do user testing with Assistive Technologies (AT) • Developers @#$% at testing interfaces • Test with AT to validate decisions • Test to make sure its usable Testing
82. Testing Just Ask: Integrating Accessibility Throughout Design Shawn Lawton Henry http://www.uiaccess.com/accessucd/
83. Testing http://developer.yahoo.com/yui/theater/
84. Assistive Technologies JAWS: Freedom Scientific Window-Eyes: GW Micro ZoomText: Ai Squared
85. • Lists of headings • Text equivalents for images • Disable scripting, mouse events • Validation and testing tools • Zoom Toolbars
86. Toolbars http://firefox.cita.uiuc.edu/ http://www.paciellogroup.com/resources/wat-ie-about.html http://www.paciellogroup.com/resources/wat-about.html
87. • Color Oracle: http://colororacle.cartography.ch/ • Colour Analyzer: http://juicystudio.com/services/colourcontrast.php Color Contrast
89. • Start with new features • Learn the patterns • Don’t make things worse • Apply lessons learned when re-factoring existing code Getting Started
90. Move away from: ! Making it accessible Move towards: Keeping it accessible
91. “For most people, technology makes things easier. For people with disabilities, technology makes things possible.” - President’s Council on Disability
92. • Traffic sign images are from the Manual of Traffic Signs, by Richard C. Moeur • http://www.trafficsign.us Traffic Signs
93. • slides: http://markmeeker.com/events/rwe2008 • email: mark@markmeeker.com • blog: http://markmeeker.com • twitter: @meeker Questions?