© 2008 ibm corporation ibm emerging technologies taming web 2.0 accessibility using the dojo open...

© 2008 IBM Corporation

IBM Emerging Technologies

Taming Web 2.0 Accessibility Using theDojo Open Source Toolkit

Becky GibsonWeb Accessibility Architect

2


Taming Web 2.0 Accessibility Using Dojo | March 2008 © 2008 IBM Corporation

Web 2.0 Accessibility Concerns Solving Web 2.0 Issues Accessible Rich Internet Applications (ARIA) Dojo JavaScript Open Source Toolkit How Dojo Addresses Accessibility Demos

Agenda

3



Web 2.0 Accessibility Concerns

Rich Interface controls–Reliance on Mouse

–Lack of Semantics Incremental Updates via Ajax Changes in focus Excessive Navigation via Tab key Content aggregation from various resources

(Mashups) Multimedia

–Lack of captioning

–Interaction issues Paradigm Shift

4



Solving Web 2.0 Accessibility Issues

Provide Accommodations for–Vision

–Hearing

–Cognitive Semantics & identification Navigation & keyboard support

5



Accessible Rich Internet Applications to the Rescue!

6



Accessible Rich Internet Applications (ARIA)

Addresses Web 2.0 Accessibility Issues Developed at IBM and donated to W3C

–Web Accessibility Initiative (WAI) Protocols & Formats Group

–Nearing last call draft Implemented in Firefox browser

–Being implemented in Opera 9.5

–Support just announced for IE 8 Supported by Window-Eyes & JAWS screen readers Used by IBM, Dojo, AOL, Yahoo, Google, SAP, ….

7



ARIA Details

Add role semantics to scripted user interface (UI) elements

Update state information dynamically Make items focusable via tabindex attribute Add keyboard event handling

–Mimic the keyboard behavior of the rich client UI

–Minimize tab key navigation Add live region information and notification* to

support Ajax

*Live region support coming in Firefox 3

8



ARIA Example - Tree

Role = tree(on outer container)

Role = treeitemexpanded=true(on open Africa node)

Role = treeitemselected=true(on highlighted Egypt child node with no children)

Role = treeitemexpanded=false(on closed Australia node)

9



ARIA Live Regions

Perceivable sections are identified with region role Live indicates region is updated

–Values of: Off, Polite, Assertive, Rude Atomic identifies the extent of updates

–True – entire region is updated and relevant

–False – only changed element needs to be presented to user Controls identifies the element which triggers an

update

10



ARIA Examples - Live Region

Editing auto save notification– live=polite; atomic=true;

Server maintenance notification–Live=assertive; atomic=true;

New mail - speak new entries–Live=polite; atomic=false;

11



12



Keyboard Support

Implement focus handling via tabindex attribute Add key event handlers to implement navigation

–Use tab key to navigate between components

–Arrow and other key navigation within a component

Keep keyboard and mouse interaction in-sync Set focus to elements, do NOT simulate focus via

CSS DHTML Style Guide group is defining widget

behaviors

13



Dojo - Open Source JavaScript Toolkit

“Easy” Ajax Data Binding Full event system Browser abstraction layer User Interface Widgets Dual Licensed

– Academic Free License v2.1

– BSD License Dojo 1.0 available in November, 2007 Dojo 1.1 shipping in March, 2008

14



Core Widget Set (dijit)

Accessible Internationalized Customizable Look and Feel Developer Documentation

–API–User Manual

Supported Browsers–Firefox 2.0, Firefox 3 in progress– IE 6+–Safari 3

Data Binding–Tree, Grid*, Select

*Grid is in dojox (dojo extensions)

15



Dojo Core Widgets

Form Widgets Layout Widgets Advanced Widgets

16



Form Widgets

Button, Dropdown Button, Combo Button Checkbox, Radio ComboBox, Filtering Select Textbox Currency & Integer Validation Textboxes Resizable Textarea Slider Integer Spinner Inline Editbox Dropdown Calendar

17



Layout Widgets

Accordion Container Content Pane Dialog Border Container Page Container Split Container Tab Container Title Pane

18



Advanced Widgets

Color Palette Context Menu Rich Text Editor Progress Bar Toolbar Tooltip, Tooltip Dialog Tree

19



Dojo 1.0.2/1.1 Core Widget Accessibility

ARIA Specification Implemented–Fully keyboard accessible in Firefox and Internet Explorer

–Screen reader accessible in Firefox Work in Operating System High Contrast mode Work with images off No accessible support for Drag and Drop (yet)

–Drag and drop functionality must be duplicated via alternate mechanism

20



Keyboard Support in Dojo

Extended tabindex (IE, FF, Opera 9.5, HTML5) Keyboard event normalization Keyboard navigation widget mixin Functions for finding elements in the tab order

21



High Contrast Detection & Support

Detect high contrast mode Detect images off mode (FF only) dijit_a11y class to trigger styles Provide text alternatives for CSS Background

images No hard coded font sizes

22



Dojo Demo(pre-recorded demos at http://www.weba11y.com/demos)

23



Application is More than the Sum of Parts

Implement overall application navigation Add ContentPanes into the tab order as necessary Check for accessibility attributes

–optionsTitle on ComboButton Create content in appropriate source code order

24



Incorrect Example - BorderLayout

<div dojoType="dijit.layout.BorderContainer" design="sidebar" > <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">

top bar </div> <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true”>

bottom bar </div> <div dojoType="dijit.layout.ContentPane" region="center">

main content </div></div>

INCORRECT source code order, bottom region should be below main content!

25



Rendered BorderLayout

top

bottom

Main content

Correct tab order is top, main content, bottom. Code from previous page would create the incorrect reading order of top, bottom, main content.

26



Correct BorderLayout Source Code Order

<div dojoType="dijit.layout.BorderContainer" design="sidebar" > <div dojoType="dijit.layout.ContentPane" region="top" splitter="true">

top bar </div> <div dojoType="dijit.layout.ContentPane" region="center">

main content </div> <div dojoType="dijit.layout.ContentPane" region="bottom" splitter="true”>

bottom bar </div></div>

27



Additional Web 2.0 Accessibility Challenges

ARIA spec not yet a standard – planned for 2008 No ARIA support in Internet Explorer - Coming in IE8! No tabindex support in Safari (yet) – thus no keyboard

support Assistive Technology support needs to evolve

– Issues with virtual browsing and interactive mode in screen readers

–Additional support for live regions

“The journey of a thousand miles starts with a single step. “

28



Summary - Web 2.0 CAN be Tamed!

Web is dynamic and constantly evolving Accessibility of Web 2.0 is possible through

–Best practices and thoughtful design

–Updated Technologies such a ARIA

–Accessibility integrated into toolkits such as Dojo

–Embracing of Accessibility technologies by key Web players

29



Resources Becky’s Accessibility Presentations and Papers

– http://www.weba11y.com/Presentations/presentations.html ARIA Roadmap, Best Practices, Primer, Specifications

– http://www.w3.org/wai/pf Mozilla Developer Center - Firefox ARIA Information

– http://developer.mozilla.org/en/docs/Accessible_DHTML Mailing list for ARIA issues

– http://lists.w3.org/Archives/Public/wai-xtech/ Dojo

– Home - http://www.dojotoolkit.org/

– Book - http://www.dojotoolkit.org/book/dojo-book-1-0 Accessibility Sections of Dojo Book

– A11y info included on each dijit page http://www.dojotoolkit.org/book/dojo-book-0-9/part-2-dijit-0

– Creating Accessible Widgets

– Testing Accessible Widgets DHTML Style Guide Draft

– http://dev.aol.com/dhtml_style_guide

© 2008 ibm corporation ibm emerging technologies taming web 2.0 accessibility using the dojo open...

Documents

accessibility issues

update slide

region role

live region support

aria examples live region

live region information

role semantics

aria example tree role