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 A ccessible R ich I nternet A pplications  Originated at IBM and donated to W3C  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-expanded=false (on closed Australia node) Role = treeitem aria-selected=true (on highlighted Egypt child node with no children) Support for ARIA 4

with WAI-ARIA Becky Gibson, IBM Dojo Open Source Toolkit for JavaScript Supports ARIA  Easy Ajax  Browser Abstraction Layer  Full Event System, Publish & Subscribe to Events  Data Binding  User Interface Widgets  Version 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 Form Widgets Button, Dropdown Button, Combo Button Checkbox, Radio ComboBox, Filtering Select, Multi Select Textbox, TimeTextBox, DateTextBox Currency & Integer Validation Textboxes Resizable Textarea Slider Integer Spinner Inline Editbox Dropdown Calendar Advanced Widgets Layout Widgets Accordion Container Content Pane Dialog Border Container Tab Container Title Pane Color Palette Context Menu, Menu Bar Rich Text Editor Progress Bar Toolbar Tooltip, Tooltip Dialog Tree 5

WebA11y <div id="content" dojoType="dijit.layout.ContentPane" title="Content” role="main" aria-live="assertive” aria-atomic="true" > Info is loaded here banner navigation main Assign ARIA Landmark Roles to dijit.layout.ContentPane contentinfo 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.ContentPane JAWS 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. 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 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 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 A11y Conf. 1 of 1  To explore items  JAWS: level 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