Tree structure

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).

Use of the keyboard: tree structure

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.

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.

During focusing of the tree structure:

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

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 | collapsed] [position] of [amount]
  • Within the same level: [list entry] [| expanded | collapsed] [position] of [amount] level [number]
• Windows Narrator: [list entry] [position] of [amount] level [number] [| expanded | coollapsed] Heading level [number]

On reading with the virtual cursor:

• JAWS:
  • without selected element: [label] tree view
  • with selected element: [label] [list entry] tree view item selected [ | expanded | collapsed] [position] of [amount]]
• NVDA: [label] tree view [ | expanded | collapsed] level [number] [list entry]
• Windows Narrator: [label] [position] of [amount] level [number] [ | expanded | collapsed] heading level [number] [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

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

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