Making Rich Internet Applications Accessible Through jQuery
5 likes1,332 views
The document discusses efforts by AOL and TPG to improve the accessibility of rich internet applications through jQuery. They found that while assistive technologies can parse basic DOM elements, they are insufficient for complex dynamic widgets. The team is working to address this by implementing ARIA roles, keyboard support, focus management, and linearizing the DOM structure in jQueryUI, which is the most widely used JavaScript library. Their focus is on making core jQueryUI widgets like accordions, sliders and dialogs accessible.
Making Rich Internet Applications Accessible Through jQuery
- 1. Making Rich Internet Applications Accessible Through jQuery Chris Blouch, AOL Hans Hillen, TPG March 26, 2010
- 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. 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. 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. 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. 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. Solutions ARIA Obvious Add and maintain proper roles, states to add semantics and metadata CSUN March 26 2010 Page 7 7
- 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. 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. Solutions Linearized DOM Ensure that adjacent objects on the display are adjacent in the DOM. CSUN March 26 2010 Page 10 10
- 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. 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. Website usage trends.builtwith.com/javascript/JQuery CSUN March 26 2010 Page 13 13
- 14. Job queries www.indeed.com/jobtrends?q=dojo %2C+jQuery%2C+YUI&l= CSUN March 26 2010 Page 14 14
- 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. 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. 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. 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. 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. 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. DEMOS CSUN March 26 2010 Page 21
- 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