Search

Ajax and Accessibiity

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    Ajax and Accessibiity - Presentation Transcript

    1. Merging Ajax and Accessibility Mark Meeker The Rich Web Experience Vienna,VA September 4-6, 2008
    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. 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. Ajax is Everywhere http://blaugh.com/2006/08/21/ajax-makes-everything-better/
    6. Scope
    7. Scope • Blind, low vision, color blindness • Limited mobility • Learning disabilities • Deaf, hearing impaired
    8. Scope • Screen readers • Braille displays • Screen magnification • Keyboard only navigation • Speech recognition
    9. Universality
    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. Progressive Enhancement
    12. Progressive Enhancement • Content is king!
    13. Progressive Enhancement • Content is king! • Start with POSH - Plain Old Semantic HTML
    14. Progressive Enhancement • Content is king! • Start with POSH - Plain Old Semantic HTML • Semantic markup to supply meaning to content
    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. 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. Progressive Enhancement
    18. Progressive Enhancement HTML Content
    19. Progressive Enhancement HTML CSS Content Presentation
    20. Progressive Enhancement HTML CSS JS Content Presentation Behavior
    21. Progressive Enhancement HTML CSS JS Content Presentation Behavior o Frills” “N
    22. Progressive Enhancement HTML CSS JS Content Presentation Behavior ills” it Up” No Fr ress “ “D
    23. Progressive Enhancement HTML CSS JS Content Presentation Behavior Frills” s it Up” it Sing” “ No “D res “M ake
    24. Progressive Enhancement 1 2 3 4 HTML     CSS     JS    
    25. The Long Tail • Universality • Multiple Devices • Graded Browser Support • Search Engine Friendly
    26. Progressive Enhancement
    27. Progressive Enhancement 1 HTML  CSS  JS 
    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. Progressive Enhancement 2 HTML  CSS  JS 
    30. Progressive Enhancement 3 HTML  CSS  JS 
    31. Progressive Enhancement 4 HTML  CSS  JS 
    32. Select from known list: Free form input:
    33. 2 HTML  CSS  JS  4 HTML  CSS  JS 
    34. 2 HTML  CSS  JS  4 HTML  CSS  JS 
    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. 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. 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. Hijax Header Module 1 Rail Module 2 Footer
    39. Hijax Header Module 1 Rail Module 2 Footer noscript page transition
    40. Hijax Header Module 1 Rail Module 2 Footer noscript Login page Module transition
    41. Hijax Header Module 1 JS-Enabled Rail XHR Module 2 Footer noscript Login page Module transition
    42. Hijax Header Login Module Module 1 JS-Enabled Rail XHR Module 2 Footer noscript Login page Module transition
    43. JS-Enabled XHR no-script page transition
    44. Redundant Inputs
    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. Redundant Inputs http://netflix.com
    47. Redundant Inputs http://developer.yahoo.com/yui/examples/
    48. Linearization
    49. Linearization http://ebookers.com
    50. Linearization http://ebookers.com
    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. Linearization
    53. Linearization http://basecamphq.com
    54. Linearization http://basecamphq.com
    55. Focus
    56. Focus <input> <div> <a> vs. <td> <button> <img>
    57. Real Link? http://ebookers.com
    58. Real Checkbox? http://amazon.com
    59. Real Checkbox? 1 2 3 4 5 6 7 8 9 http://amazon.com
    60. Real Checkbox? 1 2 3 4 5 6 7 8 9 http://amazon.com
    61. Is that a button? http://apple.com
    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. Where to Next? http://facebook.com
    64. Updates
    65. Updates http://finance.yahoo.com/
    66. Updates http://finance.yahoo.com/
    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. Set Focus on Update? http://orbitz.com
    69. Set Focus on Update? http://orbitz.com
    70. Set Focus on Update? <div id=”tripcost” tabindex=\"-1\"> // trip cost markup </div> onclick: document.getElementById('tripcost').focus();
    71. Set Focus on Update? Screen Magnifiers?
    72. http://apple.com
    73. http://apple.com
    74. WAI-ARIA
    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. 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. 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. States • checked • disabled • readonly • expanded • valuemin, valuemax, valuenow
    79. ARIA
    80. ARIA <div role=\"dialog\" ... >
    81. ARIA
    82. ARIA <div role=\"dialog\" ... >
    83. ARIA
    84. ARIA <li role=\"treeitem\" aria-expanded=\"true\" ... >
    85. ARIA
    86. ARIA <div role=\"slider\" aria-valuemin=\"1\" aria-valuemax=\"5\" aria-valuenow=\"1”>
    87. ARIA
    88. ARIA <div role=\"region” aria-live=”polite” ... >
    89. Testing
    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. Testing Just Ask: Integrating Accessibility Throughout Design Shawn Lawton Henry http://www.uiaccess.com/accessucd/
    92. Testing http://developer.yahoo.com/yui/theater/
    93. Assistive Technologies JAWS: Freedom Scientific Window-Eyes: GW Micro ZoomText: Ai Squared
    94. Toolbars • Lists of headings • Text equivalents for images • Disable scripting, mouse events • Validation and testing tools • Zoom
    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. Color Contrast • Color Oracle: http://colororacle.cartography.ch/ • Colour Analyzer: http://juicystudio.com/services/colourcontrast.php
    97. Getting Started • Start with new features • Learn the patterns • Don’t make things worse • Apply lessons learned when re-factoring existing code
    98. Move away from: Making it accessible Move towards: Keeping it accessible
    99. “For most people, technology makes things easier. For people with disabilities, technology makes things possible.” - President’s Council on Disability
    100. Traffic Signs • Traffic sign images are from the Manual of Traffic Signs, by Richard C. Moeur • http://www.trafficsign.us
    101. Questions? • email: mark@markmeeker.com • blog: http://markmeeker.com • twitter: @meeker

    + Mark MeekerMark Meeker, 11 months ago

    custom

    1011 views, 0 favs, 0 embeds more stats

    Can\'t we all just get along? Introducing Ajax and more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1011
      • 1011 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 0
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved