Web Governance
Layout tables must not include captions or summary text
1.3.1 Info and Relationships
This document provides information about the related Acquia Web Governance accessibility checks:
Layout tables must not contain caption elements
Layout tables should have an empty summary attribute or none at all
Layout tables must not include a <caption> element, as they are not intended to provide tabular data that requires a title. Additionally, layout tables should either omit the summary attribute or ensure that it is left empty.
A layout table is a table used purely for visual formatting purposes, such as to position content on a page, and not to present data in rows and columns.
The <caption> element and the summary attribute are specifically designed to provide context and explanations for data tables, where it is essential to understand the relationships between rows and columns. When these features are used in layout tables, which are only meant for visual positioning, they introduce unnecessary and irrelevant information. For screen reader users, this can lead to confusion, as assistive technologies announce these elements even though they do not relate to any actual data. Rather than support for the user, this can make it harder to understand the content on the page.
This check affects the following users who have:
Visual impairments, including blindness and low vision, and rely on assistive technologies like screen readers or magnifiers to understand table structure and content.
Bridget is a blind mother to a five-year-old girl and an 11-year-old boy. She has a college-level education and works as a receptionist. When she uses a computer, she relies entirely on screen reader software to have websites read aloud or to access content through her braille display.
"This happens to me all the time on older websites. My screen reader suddenly says I am in a table, so naturally I start to use my table navigation commands. That is just how I move around when I hear 'table'. But then I realize, nope, it is not actually a table. It just pretends to be one. And by then I have already wasted time trying to make sense of something that does not behave the way it is supposed to. It is super frustrating. I’ve got two kids and a full-time job, I don’t have the extra minutes to fight with a badly built website."
This section provides an example of the issue.
<caption> elementA company homepage is divided into three main content sections: “About Us”, “Services”, and “News”. These sections are displayed side by side in columns, using a table solely for layout purposes.
The HTML for the layout table includes a <caption> element:
<table>
<caption>Overview of company information</caption>
<tr>
<td>
<h2>About Us</h2>
<p>We are a global provider of logistics and transportation services.</p>
</td>
<td>
<h2>Services</h2>
<p>Explore our solutions: warehousing, freight, and supply chain optimization.</p>
</td>
<td>
<h2>News</h2>
<p>Our new regional hub opens in Rotterdam in Q3.</p>
</td>
</tr>
</table>Even though the table does not present any tabular data, assistive technologies such as screen readers announce the caption as if it were a label for structured content. For users who rely on these technologies, this can be confusing. The table does not actually contain any data that needs to be interpreted in relation to rows or columns, so the caption “Overview of company information” introduces noise rather than helpful context. The layout appears logical visually, but semantically it is misleading for users who cannot see the structure.
This section provides information on how to identify and fix this type of error.
The Acquia Web Governance platform flags layout tables that include a <caption> element or a summary attribute containing text. These are typically intended for data tables and should not be present in tables used solely for visual formatting.
The strong recommendation is to avoid the use of tables for layout purposes altogether. Instead, use modern CSS layout techniques such as Flexbox or Grid to control the visual structure of the page. These methods provide greater flexibility, maintain semantic correctness, and improve accessibility.
If it is not feasible to migrate away from layout tables, ensure that the table does not include a <caption> or a summary attribute with text content. These elements should either be removed entirely or, in the case of the summary, left empty to avoid misleading assistive technologies.
This section contains useful resources for this subject.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance