# ARIA Tree View using DOM Structure Example: Links
* In this example the ARIA treeview relationships (e.g. tree, group and treeitem) are defined in the parent child relationships defined int he DOM structure.
* Pressing "space" or "enter" will follow the link associated with the end treeitem.
* Example based on the WAI-ARIA 1.1: Tree View authoring practices
## Keyboard Interaction and Focus Management
Key | Function
------------ | -------------
Up arrow Key | Moves focus to previous visible sibling treeitem using a depth first algorithm on the visible treeitems. If on first treeitem, focus stays on first treeitem.
Down arrow Key | Moves focus to next visible sibling treeitem using a depth first algorithm on the visible treeitems. If on last treeitem, focus stays on the last treeitem.
Left Arrow Key | - For a
treeitem that is an end node (e.g. no child treeitems) or is in the collapsed state (e.g. has [aria-expanded=false]), focus moves to the parent treeitem. If a top level treeitem (e.g. parent is tree), focus stays on current treeitem. - For a
treeitem that is in the expanded state (e.g. has [aria-expanded=true]) it toogles to the collapsed state. Focus remains on the current treeitem.
Right Arrow Key | - For a
treeitem that is an end node (e.g. no child treeitems) focus stays on current treeitem. - For a
treeitem that is in the collapsed state (e.g. has [aria-expanded=false]) it toogles to the expanded state and focus moves to the first child treeitem. If no child, focus stays on current treeitem. - For a
treeitem is in the expanded state, focus moves to the first child treeitem. If no child, focus stays on current treeitem.
Return Key | Performs the default action (e.g. onclick event) on the current treeitem.
Space Key | Performs the default action (e.g. onclick event) on the current treeitem.
Home Key | Moves focus to first treeitem in the tree.
End Key | Moves focus to last visible treeitem (e.g. depth first) in the tree.
a-z, A-Z | - Moves focus to next visible
treeitem that starts with letter character. - Search wraps to first
treeitem if not found after current treeitem.
* | Opens all the expandable treeitems in the current leaf (e.g. siblings and current treeitems), keyboard focus does not change.
## ARIA Roles
Role | Usage | Accessible Name Source
------------ | ------------- | -------------
tree | The tree view container has a role=tree. | aria-labelledby to visible label.
treeitem | Each node in a tree has the role=treeitem and should be a DOM child of tree. | - Child text content of
treeitem. aria-label for treeitems that expand and collapse.
group | A collection of treeitems to be expanded and collapsed are enclosed in a element with role=group. The ul element has the default role of group. | not needed
## ARIA Properties and States
Property/State | Usage
------------ | -------------
aria-expanded | - Each element with
role=treeitem that can be expanded or collapsed should have an aria-expanded attribute. - Each element with
role=treeitem which is expanded should have aria-expanded="true". - Each element with
role=treeitem which is collapsed should have aria-expanded="false".
aria-labelledby | Provides accessible name for the tree role.
aria-label | Provides accessible name for the treeitems that are expandable and collapsable.
aria-level | - Provides level information on how deep a
treeitem is the nested structure of the treeview. - User agents are not required to compute the value of the
aria-level property for a treeitem based on the nesting structure in the treeview, so authors must supply the aria-level value. aria-level is important since keyboard navigation of the tree results in changing levels and assistive technologies need this information to inform users of the change in level.
aria-setsize | - Provides information on the number of
treeitems in the leaf of the tree. - User agents are not required to automatically compute the value of the
aria-setsize property for a treeitem based on the number of sibling treeitems in the leaf of the treeview, so authors should supply the aria-setsize value based on the number of sibling treeitems. - Assistive technologies use
aria-setsize information to inform the user of how may items are in the leaf of a treeview.
aria-posinset | - Provides information on the position of a
treeitem in the leaf of the tree. - User agents are not required to automatically compute the value of the
aria-posinest property for a treeitem based on the it position in the leaf of the treeview, so authors should supply the aria-posinset value based on the position of treeitem. - Assistive technologies use
aria-posinset information to inform the user of position of the treeitem in a leaf.
## tabindex values
Elements | Values | Purpose
------------ | ------------- | -------------
[role=treeitem] | 0 or -1 | The treeitem with the current focus should have tabindex=0, all other treeitems should have a tabindex value of -1.
## Events
Event | Element | Description
------------ | ------------- | -------------
keydown | [role=treeitem] | - A
keydown event listener is added to each element with role=treeitem to support moving focus between the treeitem with the keyboard. - The
keydown event listener is useful for identifying the key codes associated with the Left, Right, Up, Down, Home, End, Enter and space keys.
keypress | [role=treeitem] | - A
keypress event listener is added to each element with role=treeitem to support moving focus between the treeitem with the keyboard. - The
keypress event listener is useful for identifying the characters associated with the a-z, A-Z and * when typed by the user, since the keypress event computes a character based on the combination of the keys typed by the user.
click | [role=treeitem] [aria-expanded] | - Click event listener is added to each element with
role=treeitem and aria-expanded to support opening and closing a branch of the tree with the mouse. - Click triggers "action" event associated with the element with
role=treeitem.
focus | [role=treeitem] | Focus event listener is added to each element with role=treeitem to support visual styling of the treeitem when it recieves focus.
blur | [role=treeitem] | Blur event listener is added to each element with role=treeitem to support visual styling of the treeitem when it does not have focus.
## Keyboard Focus Styling
Elements | Focus Style | Focus Technique
------------ | ------------- | -------------
[role=treeitem] | | focus and blur events are used to add and remove a "focus" class to the treeitem element.
[role=treeitem] [aria-expanded] | | focus and blur events are used to add and remove a "focus" class to the first child element (e.g span element) of the treeitem element.
## Synchronization of Visual and ARIA States
Elements | Description
------------ | -------------
[role=treeitem] [aria-expanded] | - The
:before psuedo selector for [aria-expanded=false] and [aria-expanded=true] are used to change a content property. - The image source defined in the
content property is used for visually indicating the expanded and collapsed states of an expandable treeitem. - The
content property is preferred since it supports rendering of the image in high contrast settings of browsers and operating systems. Other CSS techniques like background-image are not supported in high contrast modes.
## Source Code: Example
```
Foods
-
Fruits
-
Vegetables
-
Podded Vegetables
-
Bulb and Stem Vegetables
-
Root and Tuberous Vegetables
-
Grains
-
Cereal Grains
-
Pseudocereal Grains
-
Oilseeds
```