Accessible Mootools Widget Demo

Tree Menu

This is a tree view.




How to use the Tree widget

  • Up Arrow / Down Arrow: Moves between visible nodes
  • Left Arrow on an expanded node: Closes the node
  • Left Arrow on a closed or end node: Moves focus to the node's parent
  • Right Arrow: Expands a closed node, moves to the first child of an open node, or does nothing on an end node
  • Enter: Performs the default action on end nodes
  • Typing a letter key moves focus to the next instance of a visible node whose title begins with that letter
  • Home: Moves to the top node in the tree view
  • End: Moves to the last visible node in the tree view
  • Ctrl+Arrow (Left, Right, Up, Down): Same as above but without selecting the item. Previous selections are maintained, provided that the Ctrl key is not released or that some other keyboard function is not performed
  • Ctrl+Space: Toggles the selection of the item
  • Shift+Up Arrow: Extends selection up one node
  • Shift+Down Arrow: Extends selection down one node
  • Shift+Home: Extends selection up to the top-most node
  • Shift+PageDown: Extends selection down to the last node
  • *(asterisk) on keypad: Expands all nodes

Accessibility changes made

  • Original Tree
  • Download accessible Tree
  • Added WAI ARIA role "tree", "treeitem" and "presentation" and WAI ARIA properties "aria-selected" and "aria-expanded"
  • Added full keyboard navigation support.
  • Simplified the drawing up.
  • Added structure lines.
  • Added high visual contrast indicator.