TreeView

Tree View

A tree view is a component to navigate hierarchical lists. It is made up of one or more top level nodes. A node may have children or it may be an end node. Nodes with children can be expanded or collapsed - when expanded its child nodes are visible. When collapsed the children are not visible. There is generally some sort of visual indication whether a node has children and can be expanded. Any number of nodes can be expanded at a time and child nodes may contain children.

A tree node is commonly used to navigate the directories and files on a file system. The directory nodes can be expanded and collapsed to reveal its contained subdirectories and files.

Tree Terminology

node is an item in a tree

parent node is a node with children it can be open / expanded or closed / collapsed

open node is a node with children which is expanded, the first level children are visible.

closed node is a node with children which is closed, the children are not visible.

end node is a node with no children

General Behavior

On first load of the tree component, the top level node is in the tab order.
One and only one node of the tree component is in the tab order of the page at any time.
The last visited node in the tree control is retained in the tab order when the user navigates away from the tree control.
Nodes can be focused and/or selected. There must be visual distinction between focused and selected nodes.
Arrowing to an item with the keyboard or clicking on an item with the mouse will focus and select the node. Any previous selections are cleared

Key Behaviors

Up and down arrow keys move between visible nodes
Left arrow key on an expanded node closes the node
Left arrow key on a closed or end node moves focus to the node's parent
Right arrow key expands a closed node, moves to the first child of an open node, or does nothing on an end node.
Enter key causes on-double-click action on end nodes. Open issue: are there ever parent nodes that have an action other than expand or collapse?
Typing a letter key moves focus to the next instance of a visible node whose title begins with that letter.
Home key moves to the top node in the tree view
End key moves to the last visible node in the tree view
Ctrl-Arrow to an item with the keyboard focuses the item (but does not select it). Previous selections are maintained.
Ctrl-Arrow-Space - Selects non-contiguous nodes
Ctrl-Spacebar with focus on an item toggles the selection of the item
Shift-UpArrow - Extends selection up one node
Shift-DownArrow - 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

Mouse Behaviors

Click on a node sets focus and selects the node
Ctrl-click on a node focuses and selects the node. Previous selections are maintained.
double click on an end node causes any associated action to be invoked. Open issue: are there ever parent nodes that have an action other than expand or collapse?
click on a closed node opens the node.
click on expand / collapse icon associated with a parent node toggles the expand/collapse of the node

Keyboard/Mouse Interaction

The user should be able to switch between using the mouse and using the keyboard to interact with the tree component.

ARIA Roles

A tree view uses the ARIA role tree, where tree is a main container element. A tree can itself contain subtrees that may be collapsed and expanded; these have the role treeitem. A collection of treeitems to be expanded and collapsed are enclosed in a group. See the XHTML example in the ARIA Roles document.

Styling

Parent nodes generally have some visual icon to indicate the ability to expand or collapse the node. The convention is that a plus (+) icon is displayed when the parent node is collapsed, the user clicks on this icon to expand the node. A minus icon is displayed when the parent node is expanded, the user clicks on this icon to collapse the node. The expand and collapse behavior can also be invoked via the right and left arrow keys when focus is on the node as described in the Keyboard Behavior section above.

A selected node should be indicated via a visual styling such as color difference and/or a distinct border.

The browser will generally provide visual identification of focused nodes.

Retrieved from "http://www.weba11y.com/styleguide/index.php?title=Tree"