Tables
Best Practices for Tables
- Use tables only for displaying structured data, not for layout or visual formatting.
- Each table must include column headers to clearly identify the information in each column.
- Include clear row headers when needed to help users understand the relationship between information.
- Keep tables simple and easy to read.
- Use the caption element to provide a title for the table.
Accessible Table Example
| Name | Department | Extension |
|---|---|---|
| John Doe | Marketing | 1024 |
| Jane Doe | Human Resources | 1031 |
| Joe Doe | IT Support | 1045 |
Why this is accessible?
- Includes clear column headers
- Information is organized logically
- Easy for screen readers to navigate
Inaccessible Table Example
| John Doe | Marketing | 1024 |
|---|---|---|
| Jane Doe | 1031 | |
| Joe Doe | IT Support | 1045 |
Why this is inaccessible?
- Missing column headers
- Inconsistent and unclear data structure
- Empty cells may confuse screen reader users
- Information is harder to understand and navigate