Using ARIA trees
Status
ARIA Tree Widget Example
Based on example from: http://oaa-accessibility.org/examplep/treeview1/
Keyboard Support
The following keyboard shortcuts are implemented for this example (based on recommended shortcuts specified by the DHTML Style Guide Working Group.):
- Up: Select the previous visible tree item.
- Down: Select next visible tree item.
- Left: Collapse the currently selected parent node if it is expanded. Move to the previous parent node (if possible) when the current parent node is collapsed.
- Right: Expand the currently selected parent node and move to the first child list item.
- Enter: Toggle the expanded or collapsed state of the selected parent node.
- Home: Select the root parent node of the tree.
- End: Select the last visible node of the tree.
- Tab: Navigate away from tree.
- '*' (asterisk on the numpad): Expand all group nodes.
NOTE: Double-clicking on a parent node will toggle its expanded or collapsed state.
ARIA Markup in Technique
- aria-expanded
- aria-hidden
- aria-labelledby
- role="group"
- role="tree"
- role="treeitem"
Example Code
<h2 id="label_1">Foods</h2> <ul id="tree1" class="tree root-level" role="tree" aria-labelledby="label_1"> <li id="fruits" class="tree-parent" role="treeitem" tabindex="0" aria-expanded="true"><span>Fruits</span> <ul id="fruit-grp" role="group"> <li id="oranges" role="treeitem" tabindex="-1">Oranges</li> <li id="pinapples" role="treeitem" tabindex="-1">Pineapples</li> <li id="apples" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="false"><span>Apples</span> <ul id="apple-grp" role="group"> <li id="macintosh" role="treeitem" tabindex="-1">Macintosh</li> <li id="granny_smith" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="false"><span>Granny Smith</span> <ul id="granny-grp" role="group"> <li id="Washington" role="treeitem" tabindex="-1">Washington State</li> <li id="Michigan" role="treeitem" tabindex="-1">Michigan</li> <li id="New_York" role="treeitem" tabindex="-1">New York</li> </ul> </li> <li id="fuji" role="treeitem" tabindex="-1">Fuji</li> </ul> </li> <li id="bananas" role="treeitem" tabindex="-1">Bananas</li> <li id="pears" role="treeitem" tabindex="-1">Pears</li> </ul> </li> <li id="vegetables" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="true"><span>Vegetables</span> <ul id="veg-grp" role="group"> <li id="broccoli" role="treeitem" tabindex="-1">Broccoli</li> <li id="carrots" role="treeitem" tabindex="-1">Carrots</li> <li id="lettuce" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="false"><span>Lettuce</span> <ul id="lettuce-grp" role="group"> <li id="romaine" role="treeitem" tabindex="-1">Romaine</li> <li id="iceberg" role="treeitem" tabindex="-1">Iceberg</li> <li id="butterhead" role="treeitem" tabindex="-1">Butterhead</li> </ul> </li> <li id="spinach" role="treeitem" tabindex="-1">Spinach</li> <li id="squash" class="tree-parent" role="treeitem" tabindex="-1" aria-expanded="true"><span>Squash</span> <ul id="squash-grp" role="group"> <li id="acorn" role="treeitem" tabindex="-1">Acorn</li> <li id="ambercup" role="treeitem" tabindex="-1">Ambercup</li> <li id="autumn_cup" role="treeitem" tabindex="-1">Autumn Cup</li> <li id="hubbard" role="treeitem" tabindex="-1">Hubbard</li> <li id="kobacha" role="treeitem" tabindex="-1">Kabocha</li> <li id="butternut" role="treeitem" tabindex="-1">Butternut</li> <li id="spaghetti" role="treeitem" tabindex="-1">Spaghetti</li> <li id="sweet_dumpling" role="treeitem" tabindex="-1">Sweet Dumpling</li> <li id="turban" role="treeitem" tabindex="-1">Turban</li> </ul> </li> </ul> </li> </ul>