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

Presentation

Permalink "Presentation"

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

Operation

Permalink "Operation"

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.

Use of the pointing device). | Should | WCAG 2.2 |

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

Programming/interfaces

Permalink "Programming/interfaces"

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.

Accessibility API). | Must | EN 301 549: 9.1.3.1, 11.1.3.1, 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!414 | Status | The 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).

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

No.PropertyDescriptionClassificationReference
413RoleThe hierarchical table role must be communicated to the Accessibility API (see

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!