Tables are commonly used on the web for two distinct purposes:
- Data tables, presenting data in tabular format
- Layout tables, using table structures to present non-tabular content in two or more columns.
Using tables for layout or organizational purposes is a deprecated technique, and is not accessible. Choose multi-column templates within your content authoring software, if available, or else consult with a developer to implement CSS that will style your content in the desired multi-column layout.
The "Grid" tool on Drupal websites allows you to create multi-column layouts without relying on HTML tables.
The intention behind table accessibility is to format the data so that it can be linearized in a way that gets read and understood by screen readers and their users. Tables are an inherently non-linear way of presenting information, so even the most accessible tables are still less accessible than data in other formats, including simple ordered (numbered) and unordered (bullet) lists. Tables are allowed provided that they follow certain guidelines.
Guidelines
- Avoid tables whenever possible. Convert complex tables into one or more simple tables. Convert simple tables into one or more ordered or unordered lists.
- Do not nest tables within other tables.
- Avoid using merged cells, as this may cause confusion for users with limited vision when scrolling through rows and columns.
- Avoid leaving cells empty. If cells are missing data, give them values of “N/A” or some other placeholder, to prevent users of assistive technology from mistakenly thinking they reached the end of the data.
- Provide captions for all tables.
- Always provide header rows for tables, and flag them as headers in the content authoring software.
- Tables must be formatted appropriately on smaller screens. Make sure the table is legible and does not break the formatting of the page when viewed on a mobile device.
The best way to maximize table accessibility and usability for everyone is to convert complex tables into simple tables. "Complex" tables doesn't refer to the size or content contained within a table. In the context of accessibility, complex means the table has two or more rows of column header cells or two or more rows of row header cells, OR that it has merged header cells.
Adding Headers in Drupal
The top row of your table should be column headers, and the first column of your table should be row headers.
This tells screen readers to announce the header with every new data cell that is read. Consider the following example:
| Year | Susan | Bob |
|---|---|---|
| 2017 | $823,000 | $794,000 |
| 2018 | $858,000 | $1,130,000 |
| 2019 | $901,000 | $628,000 |
Without headers cells, the screen reader would read:
Year, Susan, Bob, 2017, $823,000, $794,000, 2018, $858,000, $1,130,000, 2019, $901,000, $628,000. This is very difficult to track even in a simple chart.
By defining headers, the header is re-read for every data cell, like:
Year, 2017, Susan $823,000, Bob $794,000, Year 2018, Susan $858,000, Bob $1,130,000, Year 2019, Susan $901,000, Bob $628,000. This explicitly reads the header before every data cell, making it easier to track for people who are unable to see the table.
How to Test
- Manually review the source code of the page to verify no tables are being used for formatting purposes.
- Using the arrow keys, manually navigate around data tables to verify that there are no merged cells that cause the user to jump multiple columns with one keystroke.
- Verify that all tables have sufficiently descriptive captions.
- Visually verify that the table has Row and/or Column headers as appropriate.
- View the table on a smaller mobile device and confirm that the content is legible, and does not break the layout of the page.
- Automated testing tools like WebAIM WAVE can verify that there are no nested tables.