Scripted, Tab Accessible Tree Control

Hierarchical view of data via tree control.

Keyboard Navigation from initially closed tree to view above with focus on IBMTAB to PresentationsENTER to expandTAB to 2009ENTER to expandTAB to CA Web Accessibility Conf.TAB to 2008ENTER to expandTAB to Fundamentos WebTAB to IBM

1

JAWS 10 Screen Reader interaction from initially closed tree to view above with focus on IBM .TAB to Presentations

JAWS: Closed, Presentations link graphicENTER to invoke link (opens Presentations)

JAWS: enterTAB to move to find next item (2009)

JAWS: Closed 2009 link graphicENTER to invoke link (opens 2009)

JAWS: Enter To investigate

JAWS: list of one item nesting level 2To explore item

JAWS: link California Web Accessibility Conference

To move through list itemsJAWS: List end nesting level 2

To move to next list itemJAWS: link graphic closed link 2008

ENTER to invoke link (opens 2008)JAWS: visited link open 2008 graphic

To explore itemsJAWS: List of 4 items nesting level 2

To explore itemsJAWS: Link Fundamentos Web

To explore itemsJAWS: Link IBM

Not a very intuitive way to interact with the information!

2

Real World Accessibility

Web 2.0 Accessibility Issues

Scripted Rich user interface controls with no keyboard access How would you feel if an on-line job application contained the following controls that were not keyboard accessible and you could not use a mouse?

Scripted rich user interface controls with no semantic informationHow would a screen reader user know this was a drop down menu?

Incremental updates via AjaxHow would a person looking at the top left of the screen with a screen magnifier know that content had been added in the middle right of the page? Excessive Tab Key Navigation

How many times would you have to press the TAB key to reach the sports section of this page?

3

Key to solving Web Accessibility Issues is ARIAAccessible Rich Internet Applications

Originated at IBM and donated to W3COwned by Web Accessibility Initiative (WAI) Protocols and Formats Working GroupCurrently in last call statusAdds role semantics onto scripted user interface elements

Add role information in HTML markup or via scriptStates and properties are updated dynamicallyFull keyboard support is added to all controls

Make use of tabindex to set focus to any element typeAdd key event handlers Mimic the keyboard behavior of client user interfaces

Live region identification and information to support updates via AjaxLandmark identification to improve page navigation

Role = tree(on outer container)

Role = treeitemaria-expanded=true(on open Africa node)

Role = treeitemaria-expanded=false(on closed Australia node)

Role = treeitemaria-selected=true(on highlighted Egypt child node with no children)

Support for ARIA

4

with WAI-ARIABecky Gibson, IBM

Dojo Open Source Toolkit for JavaScript Supports ARIA

Easy AjaxBrowser Abstraction LayerFull Event System, Publish & Subscribe to EventsData BindingUser Interface WidgetsVersion 1.3.1 Released in April 2009

Core User Interface Widget Set - Dijit

InternationalizedFully Keyboard Accessible

IE 6/7/8, Firefox 2/3/3.5, Safari 4 coming soonFollows DHTML Style Guide keyboard recommendations

Low Vision Accessible in IE 6/7/8, Firefox 2/3/3.5Work in Windows High Contrast ModeRespond to font size adjustment

Screen Reader Accessible via ARIA JAWS 10 and IE 8 & Firefox 3/3.5

Form Widgets

Button, Dropdown Button, Combo ButtonCheckbox, RadioComboBox, Filtering Select, Multi SelectTextbox, TimeTextBox, DateTextBoxCurrency & Integer Validation TextboxesResizable TextareaSliderInteger SpinnerInline EditboxDropdown Calendar

Advanced WidgetsLayout Widgets

Accordion ContainerContent PaneDialogBorder ContainerTab ContainerTitle Pane

Color PaletteContext Menu, Menu BarRich Text EditorProgress BarToolbarTooltip, Tooltip DialogTree

5

<div dojoType=“dijit.layout.BorderContainer”><div dojoType="dijit.layout.ContentPane" region="top” role="banner”><span class="logo">WebA11y</span></div><!-- end of top --><div id="left" dojoType="dijit.layout.ContentPane" region="left"

role="navigation"> <!-- Tree goes here --> </div><!-- end of left --> <div id="content" dojoType="dijit.layout.ContentPane" title="Content” role="main" aria-live="assertive”

aria-atomic="true" > Info is loaded here </div><!-- end of center --><div dojoType="dijit.layout.ContentPane" region="bottom” role="contentinfo" > <!-- footer goes here --> </div><!-- end of bottom --></div><!– end of BorderContainer -->

banner

navigation

main

Assign ARIA Landmark Roles to dijit.layout.ContentPane

contentinfo

JAWS 10 users can access a list of ARIA landmarks on the pageA plugin for Firefox gives keyboard access to ARIA landmarks

Assign ARIA region information to dijit.layout.ContentPaneJAWS 10 will announce ARIA live regions

main

<div id="content" dojoType="dijit.layout.ContentPane" title="Content” role="main" aria-live="assertive”

aria-atomic="true" > Info is loaded here </div><!-- end of center -->

.

When user selects a tree item, the associated contents will be loaded into the right hand pane and JAWS will speak the updated contents

6

ARIA Enabled Tree Control

Hierarchical view of data via tree control.

Keyboard Navigation from initially closed tree to view above with focus on IBMTAB to PresentationsTo expand presentations Navigate to 2009 Expand 2009 Navigate to CA Web A11y Conf. Navigate to 2008 Expand 2008 Navigate to Fundamentos Web Navigate to IBM

7

JAWS 10 Screen Reader interaction from initially closed tree to view above with focus on IBM .TAB to Presentations

JAWS: Tree view Presentations closed To open tree item

JAWS: Presentations, open to move to next item

JAWS: tree view Presentations open level 2 2009 closed 1 of 4

To open 2009JAWS: 2009 open

To investigate 2009 itemsJAWS: tree view presentations open 2009 open level 3 CA Web A11y Conf. 1 of 1

To explore itemsJAWS: level 2 2008 closed 2 of 4

To open 2008JAWS: 2008 open

To investigate 2008 itemsJAWS: tree view presentations open 2008 open level 3 Fundamentos Web. 1 of 4

Move to next itemJAWS: IBM 2 of 4

Aria control provides more information and much more intuitive navigation!

8