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.
- If a cell has no information or data, enter 'N/A', 'Not Applicable', or similar placeholder text.
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