R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

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:

  1. Use the <caption> element for a concise, visible title, such as “Monthly Sales Report.”

  2. 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 and summary.

Example Fix:

html
<table summary="This table shows revenue data by department and quarter.">
<caption>Quarterly Department Revenue</caption>
<!-- table rows and cells -->
</table>

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.

Leave A Comment