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.
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. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 454 | Contrast | Icons 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. | Must | EN 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.
| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 455 | Click area | The 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). | Should | WCAG 2.2 |
Use of the keyboard: hierarchical table
Permalink "Use of the keyboard: hierarchical table"| Action | Key | Classification |
|---|---|---|
| Show and hide subordinate rows | Not standardized, i.e. the operation should be described in the application and the Help option | Required |
| Show and hide subordinate rows | Double-click on parent rows | Recommended |
Use of the pointing device: hierarchical table
Permalink "Use of the pointing device: hierarchical table"| Action | Key | Classification |
|---|---|---|
| Show and hide subordinate rows | Left click on the show and hide icon | Required |
| Show and hide subordinate rowsn | Double-click on parent rows | Recommended |
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.
| No. | Property | Description | Classification | Reference |
|---|---|---|---|---|
| 413 | Role | The hierarchical table role must be communicated to the Accessibility API (see 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 |
Information about this article
You are welcome to send feedback by email about our handout!