When used with care, tables can be a powerful way to present information accessibly, but they can also introduce significant accessibility barriers if misused.
Tables should be used for presenting data with a genuine row-and-column relationship and should not be used for page layout or visual design. Assistive technologies like screen readers have special modes and commands for interacting with data tables, so if you use a table simply for visual layout, some people with disabilities may find it challenging to easily understand or navigate through your content.
When you are creating tables, it is important that you properly identify header rows and columns. The way you do this will vary by which program you are using. When you properly indicate header rows and columns, screen readers can clearly convey the relationship between an individual cell and its headers. For example, screen readers will announce the relevant column header when users move into a new column.
Note that table headers are not the same as heading styles. Heading styles help identify different sections of a document, whereas table headers help explain rows or columns within a data table. Screen readers handle these differently, so do not apply heading styles to your table headers.
To maintain a clear connection between data cells and table headers, it is important for tables to have a logical structure. Nested tables, multilevel headers, merged cells, and blank cells can obscure the relationship between cells in a table, particularly for screen reader users. Nested tables (when one table is nested within another) can be confusing for all users and especially problematic for users of assistive technology and should always be avoided. Multilevel headers, merged cells, and blank cells can easily introduce accessibility barriers and should be used with caution (and avoided where appropriate).
Be careful with multilevel headers and merged cells. These can sometimes be made accessible for users of assistive technology, but it depends on which app or program you are using to create your table, how exactly your table is designed, and which platforms and tools your readers will be using. If you have a complicated table with multi-level headers, it can be helpful to break it into multiple tables, each of which then presents a clear and simple relationship between data cells and table headers.
Empty cells within a published table can be confusing for all users and especially for screen reader users who may lack additional context that is readily available for sighted persons. However, empty cells are acceptable when you are creating worksheets or templates that are intended to be completed by others.
As a best practice, it is good to provide a caption or heading for each table. This helps all users more easily locate the table and understand its purpose, and it can be particularly helpful for people with cognitive disabilities and screen reader users.
What To Do
Use tables to present data that has a genuine row-and-column relationship. Avoid using tables simply for page layout or visual design.
Ensure you properly identify header rows and columns.
Keep tables simple. If you have a complicated table, try breaking it up into multiple tables and ensuring each of those tables has a clear and simple structure. Avoid nesting one table within another. Try to avoid using multilevel headers or merged cells where possible, and only use them in cases where you are confident the underlying information, structure, and relationships can be accurately conveyed to users of assistive technology. Avoid leaving cells blank unless you are creating a worksheet or template for others to complete.
As a best practice, provide captions or headings to introduce individual tables and help clarify their purpose.
Human Impacts
If you use tables simply to achieve a certain visual layout, screen reader users and keyboard users will have a difficult time navigating through your content and may even encounter your content out-of-order. Additionally, people with low vision who need to magnify text may have a more difficult time navigating through your content.
If you fail to properly indicate header rows and columns, screen reader users will not be able to clearly identify the relationship between data cells and their corresponding headers and may struggle to understand the underlying content.
If you create overly complicated tables or inappropriately leave cells blank, people with cognitive disabilities and screen reader users may not be able to clearly or easily interpret your tabular data.
WCAG References
This skill corresponds to the following success criteria of the Web Content Accessibility Guidelines (WCAG):
- 1.3.1 Info and Relationships (Level A)