eBay MIND Patterns
Represents tabular data in rows and columns.
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
the table head (<thead>) and table body (<tbody>) elements.
Every table cell
a logical column header and/or row header.
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.
Updated: Feb 23rd 2021
This section provides interaction design for keyboard, screen reader and pointing devices.
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
be listed in screen reader list of tables.
be navigable with screen reader table command. For example, in VoiceOver this command is
announce caption of table.
announce value of every cell.
announce value of column header when instructed to do so. For example, in VoiceOver this command is
be announced by screen reader.
Current sort state of sortable columns
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.
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
Applied to column headings to convey descending or ascending sorted stated.