Tables allow you to present sets of data in visually appealing displays to help convey detailed information.
Tables Used Correctly With Table Headers
- Tables must have table headers either in a column header or row header.
- Table headers cannot be empty.
- Tables that are used to present data in a column and row format must be appropriately marked up in the html.
Without the correct markup, a screen reader would read the table from left to right and line by line. Which might not make much sense, particularly in a large data table.
With correct markup, screen readers users will hear the information presented in a logical way.
Guidelines and Best Practices
- Organize your tables in order of importance from left to right
- Use clear and simple language
- Remove complexity where possible
- Consider breaking complex tables into smaller tables
- Avoid combining multiple types of data into a single cell
- Avoid hosting large data sets when possible
- Consider how your table displays on mobile screens
- Consider removing non-essential columns for the best user experience on mobile screens
- When possible, consider making a table the last section on a page to prevent information from being pushed down and hidden on mobile screens
- Follow best practices for Links
- Add a caption to provide broad context for users – especially those accessing the table with a screen reader.