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
sup...
jQuery
jQuery is a JavaScript library which makes it easier
for developers to implement rich internet
applications. Smooth...
jQuery
Into this:

<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content
ui-corner-all" id="slider-range"...
Usage widespread
aol.com             facebook.com
amazon.com          google.com
bankofamerica.com   ibm.com
bbc.co.uk    ...
Root issue
AT on top of DOM insufficient to parse piles of DIVs
and SPANs into usable widgets

Four core fixes
   ARIA
   ...
Solutions
ARIA
   Obvious
   Add and maintain proper roles, states to add
semantics and metadata




                     ...
Solutions
Keyboard Control
   DHTML Style Guide
       dev.aol.com/dhtml_style_guide
       Basis for W3C’s ARIA best prac...
Solutions
Focus Management
Give the user a hint that new content has been
injected without a page refresh (Ajax, DHTML)


...
Solutions
Linearized DOM
    Ensure that adjacent objects on the display are
adjacent in the DOM.




                    ...
Next layer problem
All technically possible but requires awareness and
somewhat specialized skills/testing to implement

 ...
Which library?
There are many libraries out there such as MooTools,
Dojo, jQuery, Prototype, YUI etc.

Developers use thes...
Website usage
 trends.builtwith.com/javascript/JQuery




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




                                  CSUN March 26 2010
...
Search trends
google.com/trends?q=jquery+javascript
%2C+prototype+javascript%2C+dojo+javascript
%2C+mootools+javascript%2C...
Which library?
jQuery seemed to be the obvious leader

Internal AOL research led to the same conclusion and
standardizatio...
Which widgets?
jQuery has a large ecosphere with about 3000
plugins

jQueryUI is migrating high quality widgets from the
e...
Roles
TPG - Implementing fixes to jQueryUI 1.9 codebase
branch

AOL - Rolling accessible jQueryUI into consumer
facing pro...
Work completed
Initital evaluation of jQueryUI widgets found issues
with high contrast mode, ARIA attributes and
keyboard ...
Work completed
In particular, we’ve addressed:
     Accordion              Progress Bar
     Date Picker            Slider...
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...
Upcoming SlideShare
Loading in …5
×

Making Rich Internet Applications Accessible Through jQuery

2,802 views
2,713 views

Published on

Making Rich Internet Applications Accessible Through jQuery

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,802
On SlideShare
0
From Embeds
0
Number of Embeds
89
Actions
Shares
0
Downloads
34
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×