Tables are used to organize and present data. It’s important when we are using tables in a document or on a webpage to make sure the table is accessible to all users.
Tips for Creating Accessible Tables
Properly tag column and row headers
- Tagging column and row headers in a table associates each data cell with its corresponding header. This ensures screen readers announce the correct context (e.g., the row label and column label) along with the cell value. Without those tags, cells are read individually, without reference to their headers, making the data meaningless to the user.
- Think of a table like a spreadsheet. A sighted person can easily look up and see which column or row a number belongs to. A screen reader can’t do that unless the headers are properly tagged. Without tags, the screen reader just reads numbers or words with no explanation of what they relate to.
The steps to add headers may differ depending on whether you are working on a document or on a webpage. Consult your authoring tool’s documentation (for example, Word, Google Docs, WordPress or another platform) for specific guidance.
For example, for data tables on a webpage you created, do all visually formatted tables use tags for the appropriate column and row headers? If unsure, you can use the accessibility checkers on the Check for Accessibility webpage or built-in tools to verify.
Provide Clear Titles and Summaries
- Titles give a brief overview of the topic or data and may include guidance on how to interpret the data.
- Summaries help screen reader users (and others) quickly decide whether they want to engage with the material.
The steps for adding titles and summaries may differ depending on whether you are working on a document or on a webpage. Consult your authoring tool’s documentation (for example, Word, Google Docs, WordPress or another platform) for specific guidance.
Keep each table as simple as possible
- Avoid unnecessary complexity, such as multiple headers or merged cells (screen readers often cannot interpret merged cells correctly).
- If a table is complex, break it into smaller, simpler tables. Simpler tables improve accessibility and reduce cognitive load for all users.
Don’t Use a table for layout. Use it only for data.
- Screen readers may announce cells in a confusing order, making the content hard or impossible to follow.
- In layout tables, there’s no real data relationship so
<th>headers and associations don’t work as intended. - It breaks semantic HTML, reducing accessibility.
- Responsive design becomes difficult because layout tables don’t adapt well to different screen sizes.
Avoid Nested Tables
Nested tables are tables inside other tables. They often create accessibility problems by confusing users, disrupting navigation, and making content harder to interpret on assistive technologies or mobile devices. When nested tables are used:
- Users may struggle to understand the hierarchical structure of the data.
- Nested tables can disrupt the Tab order, making it difficult for users to navigate logically.
- They make it harder for assistive technologies to interpret the content correctly.
- Nested tables are harder to make responsive for mobile or low-vision users who zoom.
How do I create accessible tables in different tools?
Different programs have different steps for making tables accessible. The resources below show you how to do it in popular tools.