Accessible Tables
The web is not an ideal location for tables due to the unpredictability of the size of the screen that a person uses. Tables should be simple (only a few columns), have a header row, and include a summary or caption describing the purpose of the table. Avoid using tables for layout, unless the information can be understood logically when structured in a grid. Assistive devices read out each row and column from left to right which could add unnecessary complexity for content that is not tabular by nature.
| DO: |
DON'T: |
- Use tables to display tabular data where it's important to show relationships between rows and columns.
- Provide a header row - this is important context for an assistive device to know what row or column it's looking at
- Include content in all table cells. Use "not applicable" or "none" for an empty cell.
- Keep tables simple - no more than four or five columns. It's common for tables to get cut-off on smaller screens like smartphones.
|
- Use tables for layout purposes.
- Create complex tables. Link to an external spreadsheet for complex datasets, or think of an alternate means to present the information.
|
