About the Tree Widget

How to use the Tree widget:

The tree takes up one tab stop in the tab order. It can be navigated with the following shortcuts:

  • Up Arrow: Move focus the the previous tree item
  • Down Arrow: Move focus the the next tree item
  • Right Arrow: Expand current branch or move focus into its first tree item
  • Left Arrow: Move focus to parent branch or collapse current branch

The tree is marked up as an ARIA tree widget. To be announced properly by screen readers, the accordion must be used with an ARIA compliant browser and a screen readerin (auto) forms mode or application mode.

Accessibility Changes Made to the Original Tree:

  • Added ARIA tree markup so role, name & state information is exposed
  • Added high contrast support
  • Added fixes related to programmatic focus

Demo: Tree View Containing Sample Documents

My Documents

  • Invoices
    • January
      • Invoice A
      • Invoice B
      • Invoice C
    • February
      • Invoice D
      • Invoice E
      • Invoice F
    • March
      • Invoice G
      • Invoice H
      • Invoice I
  • Job Applications
    • Unhandled
      • Application A
      • Application B
      • Application C
      • Application D
      • Application E
      • Application F
      • Application G
      • Application H
    • Accepted
      • Peter Merchant
      • Susan Jennings
      • John Smith
    • Declined
      • John Doe
      • Jack Smith
      • Hannah Boyd
      • Reconsider?
        • Sandra johnson
        • Dan Smith
        • Jason Bourne
        • Jason Maple
  • Manuals
    • Fax
    • Copier
    • Scanner
    • Laptop
  • Welcome Letter
  • Getting Started
  • Trouble Shooting