1 / 8

Scripted, Tab Accessible Tree Control

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

Gabriel
Download Presentation

Scripted, Tab Accessible Tree Control

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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

  2. 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!

  3. 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?

  4. Key to solving Web Accessibility Issues is ARIA Accessible Rich Internet Applications • 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 = treeitemaria-expanded=true(on open Africa node) Role = treeitemaria-selected=true(on highlighted Egypt child node with no children) Role = treeitemaria-expanded=false (on closed Australia node) Support for ARIA

  5. 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 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 Form Widgets Advanced Widgets Accordion Container Content Pane Dialog Border Container Tab Container Title Pane 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 Color Palette Context Menu, Menu Bar Rich Text Editor Progress Bar Toolbar Tooltip, Tooltip Dialog Tree

  6. banner navigation main main Assign ARIA Landmark Roles to dijit.layout.ContentPane <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 --> 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 <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

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

  8. 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 A11y 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!

More Related