What does this accessibility issue mean?
Issue summary: Multiple tables on a page have identical summary and caption attributes
Table summaries and captions should be unique to that particular table.
This is important for website accessibility because it helps ensure that screen reader users can easily identify and distinguish between different tables on a page.
Solution:
If there are multiple tables on a web page, write a unique summary and caption text for each table’s attributes to avoid confusion.
Example HTML violation: Table has identical summary and caption (A11y Best Practice Violation)
<table summary="Detailed Sales Report">
<caption>Detailed Sales Report</caption>
<tbody>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
</tbody>
</table>The above HTML violates the table-duplicate-name accessibility rule because it contains multiple tables with the same summary attribute or caption. According to the rule, each summary or caption should be unique.
To fix this issue, you need to provide unique and descriptive names for the summary attribute and caption in your table.
How to fix "Table has identical summary and caption (A11y Best Practice Violation)" issue
<table summary="Detailed Sales Report for July 2022">
<caption>Detailed Sales Report for July 2022</caption>
<tbody>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Item 1</td>
<td>$10</td>
</tr>
</tbody>
</table>In this example, I just added more context to the summary and caption ("for July 2022") but you should replace it with whatever makes the most sense for your situation. Remember: - summary attribute provides a text description of the table structure. It is especially useful for people using screen readers.
captionelement provides a title or summary for the table which can be visually displayed in the browser.- Both, should ideally be unique and descriptive.
You may find these resources helpful:
