Scripted Tab Accessible Tree Control Hierarchical view of

Scripted, Tab Accessible Tree Control Hierarchical view of data via tree control. Keyboard Navigation from initially closed tree to view above with focus on IBM TAB to Presentations ENTER to expand TAB to 2009 ENTER to expand TAB to CA Web Accessibility Conf. TAB to 2008 ENTER to expand TAB to Fundamentos Web TAB 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 graphic ENTER to invoke link (opens Presentations) JAWS: enter TAB to move to find next item (2009) JAWS: Closed 2009 link graphic ENTER to invoke link (opens 2009) JAWS: Enter To investigate JAWS: list of one item nesting level 2 To explore item JAWS: link California Web Accessibility Conference To move through list items JAWS: List end nesting level 2 To move to next list item JAWS: link graphic closed link 2008 ENTER to invoke link (opens 2008) JAWS: visited link open 2008 graphic To explore items JAWS: List of 4 items nesting level 2 To explore items JAWS: Link Fundamentos Web To explore items JAWS: 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 information How would a screen reader user know this was a drop down menu? Incremental updates via Ajax How 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 ARIA Accessible Rich Internet Applications Originated at IBM and donated to W 3 C Owned by Web Accessibility Initiative (WAI) Protocols and Formats Working Group Currently in last call status Adds role semantics onto scripted user interface elements Add role information in HTML markup or via script States and properties are updated dynamically Full keyboard support is added to all controls Make use of tabindex to set focus to any element type Add key event handlers Mimic the keyboard behavior of client user interfaces Live region identification and information to support updates via Ajax Landmark identification to improve page navigation Role = tree (on outer container) Role = treeitem aria-expanded=true (on open Africa node) Role = treeitem aria-selected=true (on highlighted Egypt child node with no children) Role = treeitem aria-expanded=false (on closed Australia node) Support for ARIA 4

with WAI-ARIA Becky Gibson, IBM Dojo Open Source Toolkit for Java. Script Supports ARIA Easy Ajax Browser Abstraction Layer Full Event System, Publish & Subscribe to Events Data Binding User Interface Widgets Version 1. 3. 1 Released in April 2009 Core User Interface Widget Set - Dijit Internationalized Fully Keyboard Accessible IE 6/7/8, Firefox 2/3/3. 5, Safari 4 coming soon Follows DHTML Style Guide keyboard recommendations Low Vision Accessible in IE 6/7/8, Firefox 2/3/3. 5 Work in Windows High Contrast Mode Respond to font size adjustment Screen Reader Accessible via ARIA JAWS 10 and IE 8 & Firefox 3/3. 5 Layout Widgets Accordion Container Content Pane Dialog Border Container Tab Container Title Pane Form Widgets Button, Dropdown Button, Combo Button Checkbox, Radio Combo. Box, Filtering Select, Multi Select Textbox, Time. Text. Box, Date. Text. Box Currency & Integer Validation Textboxes Resizable Textarea Slider Integer Spinner Inline Editbox Dropdown Calendar Advanced Widgets Color Palette Context Menu, Menu Bar Rich Text Editor Progress Bar Toolbar Tooltip, Tooltip Dialog Tree 5

Assign ARIA Landmark Roles to dijit. layout. Content. Pane banner navigation main contentinfo <div dojo. Type=“dijit. layout. Border. Container”> <div dojo. Type="dijit. layout. Content. Pane" region="top” role="banner”><span class="logo">Web. A 11 y</span> </div> <div id="left" dojo. Type="dijit. layout. Content. Pane" region="left" role="navigation">  </div> <div id="content" dojo. Type="dijit. layout. Content. Pane" title="Content” role="main" aria-live="assertive” aria-atomic="true" > Info is loaded here </div> <div dojo. Type="dijit. layout. Content. Pane" region="bottom” role="contentinfo" >  </div> </div><!– end of Border. Container --> JAWS 10 users can access a list of ARIA landmarks on the page A plugin for Firefox gives keyboard access to ARIA landmarks Assign ARIA region information to dijit. layout. Content. Pane JAWS 10 will announce ARIA live regions main <div id="content" dojo. Type="dijit. layout. Content. Pane" title="Content” role="main" aria-live="assertive” aria-atomic="true" > Info is loaded here </div>. 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 IBM TAB to Presentations To expand presentations Navigate to 2009 Expand 2009 Navigate to CA Web A 11 y 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 2009 JAWS: 2009 open To investigate 2009 items JAWS: tree view presentations open 2009 open level 3 CA Web A 11 y Conf. 1 of 1 To explore items JAWS: level 2 2008 closed 2 of 4 To open 2008 JAWS: 2008 open To investigate 2008 items JAWS: tree view presentations open 2008 open level 3 Fundamentos Web. 1 of 4 Move to next item JAWS: IBM 2 of 4 Aria control provides more information and much more intuitive navigation! 8