Tables should be used for presenting rows and columns of data, not for layout, and column and row headers should be explicitly identified.
Techniques using HTML
Simple Table
A simple table has a single header at the top of each column, and optionally a single header in the first column of each row. It has no nested columns or rows. To make a simple table accessible, apply the following techniques:
- Markup all column headers or row headers as table headers using the
<th>element. - Define the scope of each
<th>using the scope attribute (the value of scope can be either “col” or “row”)
Complex table
A complex table is any table that is not a simple table, as defined in the preceding section. There might be nested rows or columns, or headers might be located in places other than the first row or column. These sorts of tables can be very challenging for screen reader users to understand. If possible, try to organize the information using multiple simple tables, with HTML headings above each. If a complex table is ultimately necessary, additional markup may be needed in order to ensure its accessibility for screen reader users.
- Markup all column headers or row headers as table headers using the
<th>element. - Add a unique id attribute to each
<th>element. - For every table data cell (
<td>), add a headers attribute that lists the id’s of all headers that apply to that particular cell. If more than one header applies to a cell, separate id’s with a space.
Interactive tables
If table cells contain content that is intended to be interacted with (e.g., pop-up menus, editable form fields), these are technically considered “grids”, and will require additional considerations for accessibility, including the use of Accessible Rich Internet Applications (ARIA) markup. For additional information, see our ARIA on websites page.
Techniques using a rich content editor
Some rich content editors within web pages include a button on their toolbar for adding tables. If they support this functionality, they may or may not also support the features necessary to make the tables accessible to screen reader users (e.g., identifying which cells in a table are table headers).
The screen shot below shows CKEditor 5, which includes toggle buttons for identifying Header rows and columns.
If your rich content editor does not support adding tables or identifying column or row headers via the toolbar, you will need to edit the HTML code directly, as described above in the Techniques using HTML section.
Resources
- Creating Accessible Tables (from WebAIM)