Synonyms: Hierarchical list, tree, tree view, structure view

See also: selection list , multiple selection list , hierarchical table , menu

Tree structures enable the presentation and operation of hierarchically structured lists (see DIN EN ISO 9241-161: 8.17). The nested lists can be shown and hidden. A button with an indicator on the list entries shows whether the subordinate list is shown or hidden. Tree structures can be used for different purposes, for example:

  • the selection of one or more list entries within a form (as is the case with a selection list or multiple selection list),
  • navigation (as is the case with a Link list or a menu),
  • the showing of data (as is the case with a list ).
Figure 46: Tree structure
No.PropertyDescriptionClassificationReference
675ContrastThe labeling of the list entries in the tree structure must have a contrast of at least 4.5:1.

Note 1: This applies to both the selected and unselected entries.

Note 2: If the list entries are labeled with graphics rather than text, the contrast of the graphics with respect to the background and the content-bearing areas of the graphics with respect to each other must be at least 3:1.

MustEN 301 549: 9.1.4.3, 11.1.4.3, 9.1.4.11, 11.1.4.11
676ContrastIf the selected list entry only differs from the unselected list entry due to its color (e.g. foreground or background color), the colors must have a contrast ratio of at least 3:1.

Note: The selected list entry does not have to be color coded or marked with color only. It can be marked with a check box, for example. In this case, the contrast requirements for the color coding are eliminated as long as the check box has sufficient contrasts.

MustEN 301 549: 9.1.4.1, 11.1.4.1, 9.1.4.11, 11.1.4.11
677ContrastIcons that display the status of list entries (shown or hidden) must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
678LabelIf it serves as a form element, the tree structure must have a visible label (see LabelFocus indicator
No.PropertyDescriptionClassificationReference
683Use of the keyboardIt must be possible to access, operate and exit the tree structure with the keyboard (see Use of the keyboard table, below).

Note: The buttons for showing and hiding the subordinate list entries should not receive the keyboard focus separately.

MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
684UpdateWhen focusing and operating the tree structure, no unexpected change of context

Use of the keyboard: tree structure

ActionKeyClassification
Focusing of the tree structureTABRequired
Exiting the tree structureTABRequired
Navigating to the previous or following valueUP ARROW, DOWN ARROWRequired
Quick navigation to the first and last valuePOS1, ENDRequired
Quick navigation to a value before or after with a defined incrementPAGE UP, PAGE DOWN

Note: The increment should match the amount of visible entries in the list.

Recommended
Navigating to the first entry in the nested listRIGHT ARROWRequired
Show subordinate listRIGHT ARROWRequired
Hide subordinate listLEFT ARROWRequired
Select value, enabling list entrySPACE, ENTERRequired

Note 1: In the case of tree structures with multiple selection, moreover, the use of the keyboard for the multiple selection should be implemented as described for the multiple selection list .
Note 2: The use of the keyboard for tree structures may differ from the standard described here depending on the programming language or framework to be used (e.g. showing and hiding of subordinate lists with PLUS and MINUS). The alternate use of the keyboard should be described in the application and Help option.

Use of the pointing device: tree structure

Permalink "Use of the pointing device: tree structure"
ActionKeyClassification
Select value, enabling list entryLeft clickRequired
Show and hide subordinate listLeft click on the show and hide iconRequired
Show and hide subordinate listDouble-click on list entryRecommended

Note: In the case of tree structures with multiple selection, moreover, the use of the pointing device for the multiple selection should be implemented as described for the multiple selection list .

No.PropertyDescriptionClassificationReference
687RoleThe tree structure role must be communicated to the Accessibility API (see Accessibility APIElement statusFocus indicator

Practical tip: tree structures in Web applications

Permalink "Practical tip: tree structures in Web applications"

During focusing of the tree structure:

  • JAWS: [label] structure view [list entry] [| open | closed] [position] of [amount] [instruction on navigation and operation with the arrow keys]
  • NVDA: [label] tree view [list entry] [| expanded | reduced] [position] of [amount] level [number]
  • Windows Narrator: [label] structure [list entry] [position] of [amount] level [number] [| expanded | hidden]

When navigating through the tree structure with the arrow keys:

  • JAWS:
    • When changing the level: Level [number] [list entry] [| open | closed] [position] of [amount]
    • Within the same level: [list entry] [| open | closed]
  • NVDA:
    • When changing the level: Level [number] [list entry] [| expanded | reduced] [position] of [amount]
    • Within the same level: [list entry] [| expanded | reduced] [position] of [amount] level [number]
  • Windows Narrator: [list entry] [position] of [amount] level [number] [| expanded | hidden]

On reading with the virtual cursor :

  • JAWS:
    • without selected element: [label] structure view
    • with selected element: [label] structure element [list entry] [ | expanded | reduced] [position] of [amount]]
  • NVDA: [label] tree view [ | expanded | reduced] level [number] [list entry]
  • Windows Narrator: [label] structure [position] of [amount] level [number] [ | expanded | hidden] [list entry]

Please note:

  • When reading with the virtual cursor, JAWS only outputs the selected elements (i.e., elements marked with tabindex=0 or aria-selected=true, for example).
  • When reading with the virtual cursor, NVDA outputs the first list entry and all the visible nested list entries of the first list entry, but not the selected list entries.
  • Windows Narrator outputs all the visible list entries when reading with the virtual cursor.
  • Windows Narrator incorrectly outputs “heading level [number]” for each list entry due to the implicit and/or explicit aria level.

There is no element for tree structures in HTML. Instead, the following can be used:

  • nested lists (containing the elements <ul>, <li>) with buttons for showing and hiding subordinate list entries which receive focus with the TAB key, or
  • Use of the corresponding ARIA roles.

With tree structures, the following should be taken into account:

  • The tree structure is marked with role=tree and contains the list entries that are marked with role=treeitem.
  • The nested list entries are grouped within an element which is marked with role=group. The group itself is located within the superordinate list entry, which is marked with role=treeitem.
  • The status of the list entries (open or closed) is communicated with aria-expanded.
  • The current list entry is marked with aria-selected=true, all others with aria-selected=false.
  • List entries can also be marked as enabled and/or not enabled with aria-checked as long as the tree structure offers this functionality (e.g. visually, with check boxes at the list entries). If aria-checked allows for a multiple selection of list entries, this is communicated with aria-multiselectable=true.
  • The labeling of the tree structure can take place with aria-label or aria-labelledby. The labeling of the list entries should take place using text content. The groups are not labeled.
  • When navigating through the list entries in the tree structure, these must either actually receive the focus, or reference is made to the selected list entry with aria-activedescendant. The first variant is to be preferred.
  • The tree structure may not contain any elements apart from the groups and list entries.
  • The tree structure can be marked as a required field with aria-required and as disabled with aria-disabled.
  • The presentation of the tree structure should be verified in Windows High Contrast mode. In this respect, the icons that communicate the status of the list entries should be easy to see, for example.
  • The visible list entries and the programmatically focused elements should have the same position and size.

Further Information: tree role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), treeitem role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), Tree View Pattern | APG | WAI | W3C

Information about this article

You are welcome to send feedback by email about our handout!