Does each complex data table have a summary?
A screen reader user arrives at a table with two levels of headers: years in the first row, quarters in the second. They can navigate cell by cell, but without understanding the overall structure, they're groping in the dark. The summary is the map of the territory.
A table is complex as soon as its headers are not found solely in the first row and/or first column, or when their scope does not cover the entire column or row. In practice: colspan, rowspan, multiple header levels, nested column groups. If you're unsure, ask yourself this question: can a blind user understand how to navigate this table without seeing its layout?
The summary must explain the nature and structure of the table. Not its title. That's the role of <caption> under criterion 5.4. In HTML5, the recommended technique is to embed the summary directly in the <caption>. The summary attribute remains acceptable only for documents predating HTML5. Third option: a text passage linked via aria-describedby.
No summary, no orientation.
Un test to verify that a summary accompanies each complex table
Structural summary of complex data table
- Identify all complex data tables on the page:
<table>elements or elements withrole="table"whose headers are not located solely in the first row and/or first column, or whose scope does not cover the entire column or row (presence ofcolspan,rowspan, multi-level headers). - For each complex table identified, verify that text describing the nature and structure of the table is present in one of these three forms:
- In the table's
<caption>element, with content that goes beyond a simple title; - In the
summaryattribute of<table>(HTML and XHTML versions predating HTML5 only); - In a text passage referenced by
aria-describedbyon the table element.
- In the table's
- If each complex table has such a structural summary, the test is validated.
Examples
❌ Non-compliant : Complex table without structural summary
<table>
<caption>Sales 2023-2024</caption>
<tr>
<th rowspan="2">Region</th>
<th colspan="2" scope="colgroup">2023</th>
<th colspan="2" scope="colgroup">2024</th>
</tr>
<tr>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
</tr>
<tr>
<td>North</td>
<td>12 000 €</td>
<td>15 000 €</td>
<td>13 500 €</td>
<td>16 200 €</td>
</tr>
</table>This table has two levels of headers with colspan and a rowspan. It is therefore complex. The <caption> provides a title, but does not explain the structure: a screen reader user does not immediately know that columns are grouped by year or how to read cross-referenced data. This <caption> validates criterion 5.4 (associated title), not 5.1.
✅ Compliant : Complex table with summary integrated into the caption
<table>
<caption>
Sales 2023-2024: this table presents sales by region (rows)
crossed with quarters over two years (columns grouped by year).
The first header row groups years 2023 and 2024;
the second details quarters Q1 and Q2 for each.
</caption>
<tr>
<th rowspan="2">Region</th>
<th colspan="2" scope="colgroup">2023</th>
<th colspan="2" scope="colgroup">2024</th>
</tr>
<tr>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
</tr>
<tr>
<td>North</td>
<td>12 000 €</td>
<td>15 000 €</td>
<td>13 500 €</td>
<td>16 200 €</td>
</tr>
</table>The <caption> contains both the title and a structural summary. The screen reader announces this text before the first cell: the user immediately knows how the table is organized and can navigate in a goal-oriented manner, without discovering the logic as they go.
✅ Compliant : Complex table with summary via aria-describedby
<p id="resume-ventes">
This table presents sales by region (rows) and by quarter
over two years (columns grouped by year). Read the first header row
to identify the year, the second to identify the quarter.
</p>
<table aria-describedby="resume-ventes">
<caption>Sales 2023-2024</caption>
<tr>
<th rowspan="2">Region</th>
<th colspan="2" scope="colgroup">2023</th>
<th colspan="2" scope="colgroup">2024</th>
</tr>
<tr>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
<th scope="col">Q1</th>
<th scope="col">Q2</th>
</tr>
<tr>
<td>North</td>
<td>12 000 €</td>
<td>15 000 €</td>
<td>13 500 €</td>
<td>16 200 €</td>
</tr>
</table>The summary is a visible paragraph, linked to the table via aria-describedby. This technique benefits all users: sighted users read the description before approaching the table, screen reader users hear it when focus reaches the table. It is often the best option for particularly complex structures.
Tips and pitfalls
⚠️ A present <caption> does not automatically validate criterion 5.1
This is the most frequent error in audits. The <caption> meets criterion 5.4 (title associated with the table) as soon as it exists. To validate criterion 5.1, its content must describe the table's structure, not merely name it. <caption>Results by region</caption> validates 5.4 and fails 5.1.
💡 Prefer aria-describedby for very complex tables
When the structure is particularly complex, an aria-describedby pointing to a visible paragraph is often more readable than an overloaded <caption>. The text is accessible to all, can be as long as needed, and does not visually clutter the table header.
⚠️ The summary attribute is obsolete in HTML5
The summary attribute on <table> is accepted by RGAA only for documents in HTML and XHTML versions predating HTML5. On an HTML5 page, its use generates a W3C validation error. Use <caption> or aria-describedby depending on context.
⚠️ Tables built with ARIA roles are also subject to this criterion
The criterion also applies to elements with role="table", typically grids built with <div>. If such a component has complex header structure (via multi-level role="columnheader" or role="rowheader"), it must expose a summary via aria-describedby.
⚠️ Hiding the summary with CSS: technically valid, practically questionable
The RGAA mentions the possibility of hiding the summary with CSS. In practice, this is difficult to justify: if this summary is deemed essential to understanding the table, why hide it from sighted users? A summary accessible only to screen reader users passes the technical audit but deprives other users of information deemed necessary.
Frequently asked questions
How do you distinguish a simple table from a complex table according to RGAA?
A table is complex as soon as its headers are not located solely in the first row and/or first column, or when a header covers a subset of cells via colspan or rowspan. A table with scope="col" on all its headers in the first row is simple. A table with two levels of column headers (e.g., years grouping quarters) is complex. Pragmatic rule: if the structure requires explanation to be understood, it's a complex table.
How do you replace the deprecated summary attribute to summarize a table in HTML5?
No. The summary attribute has been obsolete since HTML5 and generates a W3C validation error. The RGAA accepts it only for documents in HTML and XHTML versions predating HTML5. On an HTML5 page, use a summary in the <caption> or link a descriptive paragraph via aria-describedby.
Where and how do you expose the summary of a complex table according to RGAA 5.1?
It is not technically mandatory: a summary hidden with an sr-only class passes the RGAA audit. That said, making the summary visible benefits all users, not just screen reader users. Do not hide the summary unless there is an established design constraint.
How do you audit criterion RGAA 5.1 on complex table summaries?
Inspect the DOM: identify <table> and role="table" elements on the page, identify those with multiple header levels or colspan/rowspan. For each one, verify (1) that the <caption> contains text describing the structure, beyond a simple title; (2) that an aria-describedby attribute points to descriptive text; or (3) that a summary is present on a non-HTML5 document.
When do headers in the second column make a table complex according to RGAA?
According to the literal definition of RGAA, yes — headers are not in the first column. But the reasonable interpretation is that a table is complex when its structural complexity truly justifies a summary for navigation. A table with a numbering column in the first position and headers in the second generally remains understandable without a summary. This gray area exists in RGAA: remain pragmatic and ask yourself whether a summary would truly help a screen reader user.