Ajax and Accessibiity

2,363
-1

Published on

Can\'t we all just get along? Introducing Ajax and making a site accessible each present their own unique challenges to development teams. Most see these as being in direct competition with each other. But, by embracing some new development approaches they can end up being complementary. We will look at how best to tackle making Ajax-based features accessible and point out some of the added benefits that come with taking such approaches.

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

No Downloads
Views
Total Views
2,363
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ajax and Accessibiity

  1. 1. Merging Ajax and Accessibility Mark Meeker The Rich Web Experience Vienna,VA September 4-6, 2008
  2. 2. “ The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” - Tim Berners-Lee
  3. 3. What Changed?
  4. 4. Interaction Patterns • Filters • Rating Widgets • Transitions • Sliders • Auto-complete • Micro-content • Calendar Pickers • Auto-fill • Collapse • Expand / Collapse • Drag and Drop • Inline Validation • Lightboxes • Zoom • Yellow Fade • Navigation • Auto Update • Auto Refresh • Hover • Carrousel • Tabs • Inline edit
  5. 5. Ajax is Everywhere http://blaugh.com/2006/08/21/ajax-makes-everything-better/
  6. 6. Scope
  7. 7. Scope • Blind, low vision, color blindness • Limited mobility • Learning disabilities • Deaf, hearing impaired
  8. 8. Scope • Screen readers • Braille displays • Screen magnification • Keyboard only navigation • Speech recognition
  9. 9. Universality
  10. 10. WCAG 1.0 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.
  11. 11. Progressive Enhancement
  12. 12. Progressive Enhancement • Content is king!
  13. 13. Progressive Enhancement • Content is king! • Start with POSH - Plain Old Semantic HTML
  14. 14. Progressive Enhancement • Content is king! • Start with POSH - Plain Old Semantic HTML • Semantic markup to supply meaning to content
  15. 15. Progressive Enhancement • Content is king! • Start with POSH - Plain Old Semantic HTML • Semantic markup to supply meaning to content • Serve base content to everyone
  16. 16. Progressive Enhancement • 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
  17. 17. Progressive Enhancement
  18. 18. Progressive Enhancement HTML Content
  19. 19. Progressive Enhancement HTML CSS Content Presentation
  20. 20. Progressive Enhancement HTML CSS JS Content Presentation Behavior
  21. 21. Progressive Enhancement HTML CSS JS Content Presentation Behavior o Frills” “N
  22. 22. Progressive Enhancement HTML CSS JS Content Presentation Behavior ills” it Up” No Fr ress “ “D
  23. 23. Progressive Enhancement HTML CSS JS Content Presentation Behavior Frills” s it Up” it Sing” “ No “D res “M ake
  24. 24. Progressive Enhancement 1 2 3 4 HTML     CSS     JS    
  25. 25. The Long Tail • Universality • Multiple Devices • Graded Browser Support • Search Engine Friendly
  26. 26. Progressive Enhancement
  27. 27. Progressive Enhancement 1 HTML  CSS  JS 
  28. 28. <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>
  29. 29. Progressive Enhancement 2 HTML  CSS  JS 
  30. 30. Progressive Enhancement 3 HTML  CSS  JS 
  31. 31. Progressive Enhancement 4 HTML  CSS  JS 
  32. 32. Select from known list: Free form input:
  33. 33. 2 HTML  CSS  JS  4 HTML  CSS  JS 
  34. 34. 2 HTML  CSS  JS  4 HTML  CSS  JS 
  35. 35. Interaction Patterns • Filters • Rating Widgets • Transitions • Sliders • Auto-complete • Micro-content • Calendar Pickers • Auto-fill • Collapse • Expand / Collapse • Drag and Drop • Inline Validation • Lightboxes • Zoom • Yellow Fade • Navigation • Auto Update • Auto Refresh • Hover • Carrousel • Tabs • Inline edit
  36. 36. Interaction Patterns • Filters • Rating Widgets • Transitions • Sliders • Auto-complete • Micro-content • Calendar Pickers • Auto-fill • Collapse • Expand / Collapse • Drag and Drop • Inline Validation • Lightboxes • Zoom • Yellow Fade • Navigation • Auto Update • Auto Refresh • Hover • Carrousel • Tabs • Inline edit
  37. 37. 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
  38. 38. Hijax Header Module 1 Rail Module 2 Footer
  39. 39. Hijax Header Module 1 Rail Module 2 Footer noscript page transition
  40. 40. Hijax Header Module 1 Rail Module 2 Footer noscript Login page Module transition
  41. 41. Hijax Header Module 1 JS-Enabled Rail XHR Module 2 Footer noscript Login page Module transition
  42. 42. Hijax Header Login Module Module 1 JS-Enabled Rail XHR Module 2 Footer noscript Login page Module transition
  43. 43. JS-Enabled XHR no-script page transition
  44. 44. Redundant Inputs
  45. 45. Redundant Inputs • 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
  46. 46. Redundant Inputs http://netflix.com
  47. 47. Redundant Inputs http://developer.yahoo.com/yui/examples/
  48. 48. Linearization
  49. 49. Linearization http://ebookers.com
  50. 50. Linearization http://ebookers.com
  51. 51. Linearization State/ Zip/Postal Examples Province Code No Yes United Kingdom, France, Germany Drop Down Yes United States, Canada, Australia Input Yes No No Ireland
  52. 52. Linearization
  53. 53. Linearization http://basecamphq.com
  54. 54. Linearization http://basecamphq.com
  55. 55. Focus
  56. 56. Focus <input> <div> <a> vs. <td> <button> <img>
  57. 57. Real Link? http://ebookers.com
  58. 58. Real Checkbox? http://amazon.com
  59. 59. Real Checkbox? 1 2 3 4 5 6 7 8 9 http://amazon.com
  60. 60. Real Checkbox? 1 2 3 4 5 6 7 8 9 http://amazon.com
  61. 61. Is that a button? http://apple.com
  62. 62. Tab Index Focusable with mouse or Tab Index Navigable via tab key element.focus() Follows default behavior of Follows default behavior of Not present element (only form controls element and anchors receive focus) Tabindex value directly >0 Yes specifies where this element is positioned in the tab order. In tab order relative to 0 Yes element’s position in document -1 Yes Not in tab order. http://www.dojotoolkit.org/book/export/html/118
  63. 63. Where to Next? http://facebook.com
  64. 64. Updates
  65. 65. Updates http://finance.yahoo.com/
  66. 66. Updates http://finance.yahoo.com/
  67. 67. 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
  68. 68. Set Focus on Update? http://orbitz.com
  69. 69. Set Focus on Update? http://orbitz.com
  70. 70. Set Focus on Update? <div id=”tripcost” tabindex=quot;-1quot;> // trip cost markup </div> onclick: document.getElementById('tripcost').focus();
  71. 71. Set Focus on Update? Screen Magnifiers?
  72. 72. http://apple.com
  73. 73. http://apple.com
  74. 74. WAI-ARIA
  75. 75. Replicating the Desktop • <div> can be a button • <span> can be a slider • Need a better API • Leverage accessibility support in the OS
  76. 76. WAI - ARIA • 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/
  77. 77. Roles • link • application • combobox, options • presentation • checkbox • group • radio, radiogroup • grid, gridcell • button • tab, tablist, tabpanel • progressbar • list, listitem • slider • menu, menubar • spinbutton • toolbar • tree,treeitem • alert
  78. 78. States • checked • disabled • readonly • expanded • valuemin, valuemax, valuenow
  79. 79. ARIA
  80. 80. ARIA <div role=quot;dialogquot; ... >
  81. 81. ARIA
  82. 82. ARIA <div role=quot;dialogquot; ... >
  83. 83. ARIA
  84. 84. ARIA <li role=quot;treeitemquot; aria-expanded=quot;truequot; ... >
  85. 85. ARIA
  86. 86. ARIA <div role=quot;sliderquot; aria-valuemin=quot;1quot; aria-valuemax=quot;5quot; aria-valuenow=quot;1”>
  87. 87. ARIA
  88. 88. ARIA <div role=quot;region” aria-live=”polite” ... >
  89. 89. Testing
  90. 90. Testing • Do user testing with Assistive Technologies (AT) • Developers @#$% at testing interfaces • Test with AT to validate decisions • Test to make sure its usable
  91. 91. Testing Just Ask: Integrating Accessibility Throughout Design Shawn Lawton Henry http://www.uiaccess.com/accessucd/
  92. 92. Testing http://developer.yahoo.com/yui/theater/
  93. 93. Assistive Technologies JAWS: Freedom Scientific Window-Eyes: GW Micro ZoomText: Ai Squared
  94. 94. Toolbars • Lists of headings • Text equivalents for images • Disable scripting, mouse events • Validation and testing tools • Zoom
  95. 95. Toolbars http://firefox.cita.uiuc.edu/ http://www.paciellogroup.com/resources/wat-ie-about.html http://www.paciellogroup.com/resources/wat-about.html
  96. 96. Color Contrast • Color Oracle: http://colororacle.cartography.ch/ • Colour Analyzer: http://juicystudio.com/services/colourcontrast.php
  97. 97. Getting Started • Start with new features • Learn the patterns • Don’t make things worse • Apply lessons learned when re-factoring existing code
  98. 98. Move away from: Making it accessible Move towards: Keeping it accessible
  99. 99. “For most people, technology makes things easier. For people with disabilities, technology makes things possible.” - President’s Council on Disability
  100. 100. Traffic Signs • Traffic sign images are from the Manual of Traffic Signs, by Richard C. Moeur • http://www.trafficsign.us
  101. 101. Questions? • email: mark@markmeeker.com • blog: http://markmeeker.com • twitter: @meeker

×