Synonyms: Table with tree structure, tree grid, tree table

See also: Table, tree structure, accordion

A hierarchical table is designed to display hierarchical data in columns and rows in a structured way, in which subordinate data can be displayed and hidden row by row. An indicator on the rows shows whether the subordinate rows are shown or hidden.

In most cases, the first row contains the column headings and the first column frequently contains the row headings. Hierarchical tables can contain interactive elements, such as buttons for performing an action or check boxes for selecting a table row.

Figure 24: Hierarchical table

The requirements regarding the table are described in the “table” section. Here, only the additional requirements are described which result from the ability to show and hide subordinate rows in the table.

No.PropertyDescriptionClassificationReference
454ContrastIcons that display the status of table rows (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

The requirements regarding the table are described in the “table” section. Here, only the additional requirements are described which result from the ability to show and hide subordinate rows in the table.

No.PropertyDescriptionClassificationReference
455Click areaThe click area of the elements for showing and hiding subordinate rows should total at least 24 x 24 px (see Use of the pointing device).ShouldWCAG 2.2

Use of the keyboard: hierarchical table

Permalink "Use of the keyboard: hierarchical table"
ActionKeyClassification
Show and hide subordinate rowsNot standardized, i.e. the operation should be described in the application and the Help optionRequired
Show and hide subordinate rowsDouble-click on parent rowsRecommended

Use of the pointing device: hierarchical table

Permalink "Use of the pointing device: hierarchical table"
ActionKeyClassification
Show and hide subordinate rowsLeft click on the show and hide iconRequired
Show and hide subordinate rowsnDouble-click on parent rowsRecommended

The requirements regarding the table are described in the “table” section. Here, only the additional requirements are described which result from the ability to show and hide subordinate rows in the table.

No.PropertyDescriptionClassificationReference
413RoleThe hierarchical table role must be communicated to the Accessibility API (see Accessibility API).MustEN 301 549: 9.1.3.1, 11.1.3.1, 9.4.1.2, 11.4.1.2, 11.5.2.5
414StatusThe status of the table cells must be communicated to the Accessibility API (see Element status).

Note: This also applies to the “open” or “closed” status (with respect to the subordinate rows).

MustEN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5
415Desktop: Element hierarchyThe parent / child relationships of the elements within the hierarchical table must be communicated to the Accessibility API.MustEN 301 549: 11.5.2.9
416Desktop: Element hierarchyThe hierarchy level of the table rows must be communicated to the Accessibility API.MustEN 301 549: 11.5.2.9

Information about this article

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