slide1
Download
Skip this Video
Download Presentation
Scripted, Tab Accessible Tree Control

Loading in 2 Seconds...

play fullscreen
1 / 8

Scripted, Tab Accessible Tree Control - PowerPoint PPT Presentation


  • 295 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Scripted, Tab Accessible Tree Control' - Gabriel


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
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

slide2
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!

slide3
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?
slide4
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

slide5
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

slide6
banner

navigation

main

main

Assign ARIA Landmark Roles to dijit.layout.ContentPane

Info is loaded here

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

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

slide7
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
slide8
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!