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

Label). | Must | EN 301 549 9.3.3.2, 11.3.3.2 | | @!679 | Focus visibility | If the tree structure receives the keyboard focus, the focus indicator must be visible (see

Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 | | @!680 | Focus visibility | When navigating through the list entries, the current list entry must be displayed in the visible area. | Must | EN 301 549: 9.2.4.7, 11.2.4.7 | | @!681 | Option list | It should not be necessary to scroll the tree structure horizontally, i.e. it should be at least as wide as the longest entry. | Must | EN 301 549: 9.2.1.1, 11.2.1.1 | | @!682 | Option list | The list entries should be formulated in such a way that the information that serves the purpose of differentiation is at the beginning. | Should | DIN EN ISO 9241-143: 9.3.4 |

change of context may occur. | Must | EN 301 549: 9.3.2.1, 11.3.2.1, 9.3.2.2, 11.3.2. | | @!685 | Click area | The elements for showing and hiding subordinate lists should be at least 24 x 24 px in size. | Should | WCAG 2.2 | | @!686 | Click area |The click area of the list entries in the tree structure should be at least 24 x 24 px. | Should | WCAG 2.2 |

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 .

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!688 | Value | The values of the tree structure must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7 | | @!689 | Desktop: Element hierarchy | The parent / child relationships of the elements within the tree structure must be communicated to the Accessibility API.

Note: If this is not possible, the hierarchy of the list entries must be communicated to the Accessibility API in another way, e.g. in text form

Element status).

Note: With the list entries, this also applies to the “open” or “closed” status.

Focus indicator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 |

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

Date:

15.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

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