Table
Represents tabular data in rows and columns.
Best Practices
A table requires a caption element. The summary attribute is deprecated in HTML5.
In order to be well-formed and appear in the accessibility tree for assistive technology, a table requires the table head (<thead>) and table body (<tbody>) elements.
Every table cell requires a logical column header and/or row header.
Do not use tables as a means for visual layout of page structure in rows and columns. Use CSS instead! See the Layout Tables Anti-Pattern for more information.
Interaction Design
This section provides interaction design for keyboard, screen reader and pointing devices.
Keyboard
The only special consideration for a table is sortable columns. Typically this is achieved by adding a toggle button as the contents of the table header cell. The usual rules for button apply.
Screen Reader
Table must be listed in screen reader list of tables.
Screen reader must be navigable with screen reader table command. For example, in VoiceOver this command is VO+CMD+T.
Screen reader must announce caption of table.
Screen reader must announce value of every cell.
Screen reader must announce value of column header when instructed to do so. For example, in VoiceOver this command is VO+C.
Sortable column must be announced by screen reader.
Current sort state of sortable columns must be announce by screen reader.
When moving from column to column, screen reader announces new column scope. Typically this scope is the value of the column header.
When moving from row to row, screen reader announces new row scope. Typically this scope is the value of the row header.
Pointer
The only special consideration for table is sortable columns. Typically this is achieved by adding a toggle button as the contents of the table header cell. The usual rules for button apply.
ARIA Reference
Applied to column headings to convey descending or ascending sorted stated.
Last updated