Table

See also: List , Hierarchical table

A table is used for the structured display of data (see DIN EN ISO 9241-161: 8.44).

A table consists of cells which are arranged in columns and rows. In most cases, the first row contains the column headings and the first column frequently contains the row headings. Tables can also contain various functionalities, e.g.

• sorting and filtering of the cell contents (e.g. through the column headings),
• scaling of the column and row size,
• showing or hiding of columns and/or changing the order of columns,
• showing and hiding of subordinate table rows (see: Hierarchical table),
• displaying sum total rows at the end of the table,
• in-line editing of cell contents (hereinafter referred to as editing mode),
• external editing of the cell content, e.g. using a toolbar above the table or a button within the table cells,
• Selection of table rows, e.g. by check box (multiple selection) or radio button (single selection),
• Selection of table cells, e.g. by mouse or keyboard selection,
• Browsing or scrolling through the records, if necessary, with pagination .

The requirements for the individual control elements within the table are described for the respective control element. Only the additional requirements for the whole of the element are described here.

Focus indicator). | Must | EN 301 549: 9.2.4.7, 11.2.4.7 |

section separators between the column headings.

Note 2: Alternatively, the control elements outside the table can also be used to enable the table functionality.

Note 3: If keyboard shortcuts are used to enable the use of the keyboard, they must be described in the application and the Help option.

Note 4: The operation of the elements may not conflict with the navigation through the table. If the table can be navigated through with the use of the arrow keys, for example, the table may not contain any control elements that can be operated with the arrow keys unless it is possible to switch to the edit mode.

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

With applications that support the virtual cursor, neither the tables nor their cells receive the keyboard focus. It should only be possible for interactive elements within the table cells to be accessed and operated with the keyboard. This only applies if the table is not marked with role=grid. Tables with role=grid are operated like tables in applications without the virtual cursor (see following section).

With applications that do not support the virtual cursor and with tables that have been marked with role=grid, each table cell must be able to receive the focus so that its contents are perceptible with the assistive technology (e.g. screen reader). It is not sufficient if it is only possible to navigate through the table only one row at a time, for example. For tables in applications that do not support the virtual cursor, a distinction is made between the navigation and edit mode:

• In the navigation mode, the arrow keys can be used to navigate between the cells.
• In edit mode, the interactive elements within a cell are operable. If the cell contains multiple interactive elements, it is possible to navigate between the elements in the edit mode.

multiple selection list element.

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 | | @!401 | Role | The individual roles for tables can only be used for data tables. Layout tables that are solely for the visual design and not for the display of table data must not be assigned these roles. | Must| EN 301 549: 9.1.3.1, 11.1.3.1 | @!402 | Role | Content which is associated with the table, but does not contain table data (such as the

pagination) must not be located within the table. | Must | EN 301 549: 9.1.3.1, 11.1.3.1 | | @!403 | Name | The table must have a concise and expressive Accessible Name. | Must | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!404 | Name | If the table has a description, it must be communicated as an Accessible Description. | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!405 | Status | The status of the table must be communicated to the Accessibility API (see

Element status).

Note: This applies, for example, to the “editable”, “sortable” or “selectable” status, provided that these functions are not perceptible using focusable control elements.

Note: This applies, for example, to the status “selected”, “sorted” or “disabled”.

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

Some programming languages for desktop applications do not allow for the creation of tables which fulfill the navigation requirements within the table (with the use of the arrow keys). Instead of this, the table can only be navigated one row at a time. Therefore, for example, the table cannot be perceived in a structured way with a screen reader (because the entire row is output, in some cases without the corresponding column headings). In addition, in most cases, the control elements in the table cannot be operated with the keyboard.
In the following exceptional cases, the use of these tables is acceptable if the technology used does not offer an alternative:

• the table only contains two columns or
• the table contains a maximum of five columns and the column headings and cell contents are short (maximum of one to two words or numbers), and
• the column headings are output when navigating through the rows, or the output is not necessary because the purpose of the columns is determined by the context (e.g. the cell content), and
• the rows and column headings do not contain control elements and/or all control elements are perceptible with assistive technology (role, purpose, status) and are operable with the keyboard and/or assistive technology.

If these requirements cannot be met, a different form of presentation must be chosen for the data.

Some programming languages for software do not allow for the creation of tables which fulfill the requirements referred to here regarding the operation of interactive elements within tables. In this case, interactive elements within the tables should be avoided. Instead of this, the tables should only be used to display data and the associated interactive elements should be located outside the table. Examples:

• One or more control elements can be inserted in front of the table to manage the sorting of the table contents.
• A form can be inserted above the table to filter the table contents.
• Above the table, a button can be added with which a modal dialog can be opened. In the modal dialog, the table can be fully configured using the keyboard (by adjusting the column widths, for instance).
• Above the table, there is a toolbar with which the selected table rows can be edited or deleted.

Alternatively, keyboard shortcuts or context menus can be used to enable the use of the keyboard. In this case, this alternative form of operation must be referred to in the application and the Help option.
With the control elements in the table that may be inaccessible, another option is to ensure the accessible operation with the use of control elements outside the table.

Information about this article

Date:

16.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

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