Making Rich Internet Applications Accessible Through jQuery

Making Rich Internet Applications Accessible Through jQuery Chris Blouch, AOL Hans Hillen, TPG March 26, 2010

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

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

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

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

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

Solutions ARIA Obvious Add and maintain proper roles, states to add semantics and metadata CSUN March 26 2010 Page 7 7

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

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

Solutions Linearized DOM Ensure that adjacent objects on the display are adjacent in the DOM. CSUN March 26 2010 Page 10 10

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

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

Website usage trends.builtwith.com/javascript/JQuery CSUN March 26 2010 Page 13 13

Job queries www.indeed.com/jobtrends?q=dojo %2C+jQuery%2C+YUI&l= CSUN March 26 2010 Page 14 14

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

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

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

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

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

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

DEMOS CSUN March 26 2010 Page 21

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

http://www.slideshare.net	30
http://onwebdev.blogspot.com	28
http://paper.li	13
http://onwebdev.blogspot.it	2
http://a0.twimg.com	1
http://onwebdev.blogspot.gr	1
http://onwebdev.blogspot.com.es	1

Making Rich Internet Applications Accessible Through jQuery

by AEGIS-ACCESSIBLE Projects

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 76

Statistics

Making Rich Internet Applications Accessible Through jQuery Presentation Transcript