Goal
In a perfect world, the relationship between the header and the table data would be clear and understandable in every case, but we are not in a perfect world. Sometimes, we need to explain the relationships between the data in words.
Why this matters
Users with visual disabilities may be listening to the table content, and when tables are complex, what they hear may not make sense. A table summary can provide the context the user needs to understand what they’re hearing.
How to implement
Deque University recommends three ways to summarize tables:
- Put the summary in a paragraph before or after the table and use the
aria-describedbyattribute in the table to programmatically connect the paragraph with the table. - If the summary is brief, put it in the table’s
<caption>. - Put the table in a
<figure>and put the title and summary in the<figcaption>.
Prior to HTML 5, HTML had a summary attribute that could be placed on the
<table> element, but that has been deprecated.How to test
- Inspect the page.
- Ensure the table has a summary provided in a nearby paragraph and is programmatically linked to the table, or that the summary is in the
<caption>, or using a<figure>and<figcaption>set.