Avoid Duplicate Table Captions and Summaries
Rule ID: table-duplicate-name
Ruleset: axe-core 4.10
User Impact: Minor
Guidelines: Deque Best Practice
How to Fix the Problem
To ensure your tables are accessible to screen reader users, avoid using the same text for both the <caption>
element and the summary
attribute. These two elements serve different purposes:
-
<caption>
is a visible label for all users that provides a brief, descriptive title for the table. -
summary
is an attribute used by screen readers to convey structural information about the table, such as how it is organized or what types of data it contains.
To fix this issue:
-
Use the
<caption>
element for a concise, visible title, such as “Monthly Sales Report.” -
Use the
summary
attribute to provide context or structural information, like:summary="This table presents the monthly sales figures for each product category across all four quarters."
Best Practices:
-
Ensure the
<caption>
is short, descriptive, and helpful to all users. -
Use the
summary
to offer additional context only when necessary (especially useful for complex tables). -
Do not duplicate the same sentence or phrase in both the
caption
andsummary
.
Example Fix:
Why it Matters
Screen reader users rely on both the summary
and <caption>
elements to understand the purpose and structure of a table. If both elements contain identical text:
-
The screen reader may repeat the same message unnecessarily.
-
Users might not get a clear understanding of the table’s context or structure.
-
It reduces the value of having a
summary
attribute, which is supposed to provide unique structural insight.
Accessible tables should present useful, non-redundant information to all users, regardless of their ability.
Rule Description
This rule checks that data tables using both a summary
attribute and a <caption>
element do not repeat the same text in both locations. When used properly, they enhance navigation and comprehension for screen reader users.
The Algorithm (in Simple Terms)
If a data table includes both a summary
and a <caption>
, the rule verifies that:
-
The text content of the
summary
attribute is not the same as the text inside the<caption>
element.