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