Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Rich Internet Applications Accessible Through jQuery

3,005 views

Published on

Making Rich Internet Applications Accessible Through jQuery

Published in: Technology
  • Be the first to comment

Making Rich Internet Applications Accessible Through jQuery

  1. 1. Making Rich Internet Applications Accessible Through jQuery Chris Blouch, AOL Hans Hillen, TPG March 26, 2010
  2. 2. Who is doing the work AOL and TPG teamed up to advance accessibility of dynamic web applications. This project is also supported by AEGIS. CSUN March 26 2010 Page 2
  3. 3. jQuery jQuery is a JavaScript library which makes it easier for developers to implement rich internet applications. Smooths browser differences and minimizes code required to build functionality. Changing: <div id="slider-range"></div> CSUN March 26 2010 Page 3
  4. 4. jQuery Into this: <div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-range"><div style="left: 15%; width: 45%;" class="ui-slider-range ui-widget-header"></div><a style="left: 15%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a><a style="left: 60%;" class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a></div> Rendering as: CSUN March 26 2010 Page 4
  5. 5. Usage widespread aol.com facebook.com amazon.com google.com bankofamerica.com ibm.com bbc.co.uk mlb.com bestbuy.com mozilla.org businessweek.com netflix.com cbs.com nbc.com dell.com technorati.com digg.com twitter.com CSUN March 26 2010 Page 5
  6. 6. Root issue AT on top of DOM insufficient to parse piles of DIVs and SPANs into usable widgets Four core fixes ARIA Keyboard control Focus management Linearized DOM CSUN March 26 2010 Page 6 6
  7. 7. Solutions ARIA Obvious Add and maintain proper roles, states to add semantics and metadata CSUN March 26 2010 Page 7 7
  8. 8. Solutions Keyboard Control DHTML Style Guide dev.aol.com/dhtml_style_guide Basis for W3C’s ARIA best practices www.w3c.org/WAI/PF/aria-practices#aria_ex CSUN March 26 2010 Page 8 8
  9. 9. Solutions Focus Management Give the user a hint that new content has been injected without a page refresh (Ajax, DHTML) CSUN March 26 2010 Page 9 9
  10. 10. Solutions Linearized DOM Ensure that adjacent objects on the display are adjacent in the DOM. CSUN March 26 2010 Page 10 10
  11. 11. Next layer problem All technically possible but requires awareness and somewhat specialized skills/testing to implement Means - most developers will not do it Solution: Roll accessibility development effort into common JS widget libraries CSUN March 26 2010 Page 11 11
  12. 12. Which library? There are many libraries out there such as MooTools, Dojo, jQuery, Prototype, YUI etc. Developers use these libraries to avoid reinventing the wheel over and over Want to focus effort on a library which has the largest use and mindshare CSUN March 26 2010 Page 12 12
  13. 13. Website usage trends.builtwith.com/javascript/JQuery CSUN March 26 2010 Page 13 13
  14. 14. Job queries www.indeed.com/jobtrends?q=dojo %2C+jQuery%2C+YUI&l= CSUN March 26 2010 Page 14 14
  15. 15. Search trends google.com/trends?q=jquery+javascript %2C+prototype+javascript%2C+dojo+javascript %2C+mootools+javascript%2C+yui+ javascript&ctab=0&geo=all&date=all&sort=0 CSUN March 26 2010 Page 15 15
  16. 16. Which library? jQuery seemed to be the obvious leader Internal AOL research led to the same conclusion and standardization on jQuery for all future site development Smaller libraries Faster execution Less code to write CSUN March 26 2010 Page 16 16
  17. 17. Which widgets? jQuery has a large ecosphere with about 3000 plugins jQueryUI is migrating high quality widgets from the ecosphere to the core code library Focus on making jQueryUI accessible. CSUN March 26 2010 Page 17 17
  18. 18. Roles TPG - Implementing fixes to jQueryUI 1.9 codebase branch AOL - Rolling accessible jQueryUI into consumer facing products AEGIS - Providing resources and guidance to advance this effort CSUN March 26 2010 Page 18
  19. 19. Work completed Initital evaluation of jQueryUI widgets found issues with high contrast mode, ARIA attributes and keyboard controls. Hans Hillen has been making changes to these widgets and checking in code to the 1.9 branch of jQueryUI. 1.8 branch released Tuesday so our code will be out in the next public release. CSUN March 26 2010 Page 19 19
  20. 20. Work completed In particular, we’ve addressed: Accordion Progress Bar Date Picker Slider Dialog Work work commencing on: Spinner Carousel Tab Panel Tree View CSUN March 26 2010 Page 20
  21. 21. DEMOS CSUN March 26 2010 Page 21
  22. 22. jQuery Resources Here are the links Hans mentioned at the end of the presentation: jQuery Home: http://jquery.com/ Project Source: http://github.com/jquery/jquery-ui/ jQuery UI and & Planning Wiki: http://wiki.jqueryui.com/ jQuery UI Tickets: http://dev.jqueryui.com/report jQuey UI Accessibility Discussion Group: http://groups.google.com/group/jquery-a11y CSUN March 26 2010 Page 22

×