Making Rich Internet Applications Accessible Through jQuery

Chris Blouch, AOLHans Hillen, TPG

Making Rich Internet Applications Accessible Through jQuery

March 26, 2010

2

CSUN March 26 2010 Page

Who is doing the workAOL and TPG teamed up to advance accessibility of dynamic web applications. This project is also supported by AEGIS.

3


jQueryjQuery 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>

4


jQueryInto 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:

5


Usage widespreadaol.comamazon.combankofamerica.combbc.co.ukbestbuy.combusinessweek.comcbs.comdell.comdigg.com

facebook.comgoogle.comibm.commlb.commozilla.orgnetflix.comnbc.comtechnorati.comtwitter.com

6


Root issue

6

AT on top of DOM insufficient to parse piles of DIVs and SPANs into usable widgets

Four core fixesARIAKeyboard controlFocus managementLinearized DOM

7


Solutions

7

ARIAObviousAdd and maintain proper roles, states to add

semantics and metadata

8


Solutions

8

Keyboard ControlDHTML Style Guide

dev.aol.com/dhtml_style_guideBasis for W3C’s ARIA best practiceswww.w3c.org/WAI/PF/aria-practices#aria_ex

9


Solutions

9

Focus ManagementGive the user a hint that new content has been injected without a page refresh (Ajax, DHTML)

10


Solutions

10

Linearized DOMEnsure that adjacent objects on the display are

adjacent in the DOM.

11


Next layer problem

11

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

12


Which library?

12

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

13


Website usage

13

trends.builtwith.com/javascript/JQuery

14


Job queries

14

www.indeed.com/jobtrends?q=dojo%2C+jQuery%2C+YUI&l=

15


Search trends

15

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

16


Which library?

16

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 librariesFaster executionLess code to write

17


Which widgets?

17

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.

18


RolesTPG - 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

19


Work completed

19

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.

20


Work completed

AccordionDate PickerDialog

Work work commencing on:SpinnerTab Panel

In particular, we’ve addressed:Progress BarSlider

CarouselTree View

21

CSUN March 26 2010

Page

DEMOSDEMOS

22


jQuery Resources

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/reportjQuey UI Accessibility Discussion Group:

http://groups.google.com/group/jquery-a11y

Here are the links Hans mentioned at the end of the presentation:

http://jquery.com/

http://github.com/jquery/jquery-ui




http://wiki.jqueryui.com/

http://dev.jqueryui.com/report

Making Rich Internet Applications Accessible Through jQuery

Technology

Transcript of Making Rich Internet Applications Accessible Through jQuery