Make sure the <caption> element does not contain the same text as the summary attribute

The table-duplicate-name rule ensures that a table’s <caption> and summary attribute do not contain identical text, as this can confuse screen reader users.

What is being tested?

This rule checks that:

• The <caption> (visible to all users) and the summary attribute (read only by screen readers) do not have identical content.

Why it matters

Screen readers announce both the summary and <caption>. When they are identical, it can cause confusion and reduce the clarity of the table’s purpose or structure.

How to fix the problem

• Use <caption> to provide an onscreen title or label for the table.
• Use the summary attribute to describe the table structure or give extra context for screen reader users.

Good markup example

<table summary="This table shows the number of items sold per month.">
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th><th>Items Sold</th>
  </tr>
  <tr><td>January</td><td>100</td></tr>
</table>

Incorrect markup example

<table summary="Monthly Sales Report">
  <caption>Monthly Sales Report</caption>
  <tr>
    <th>Month</th><th>Items Sold</th>
  </tr>
  <tr><td>January</td><td>100</td></tr>
</table>

Best practices

• Make <caption> brief and visible, acting as the table’s title.
• Use the summary only when necessary, and provide details about layout, relationships, or extra instructions for screen readers.
• If using HTML5, note that the summary attribute is deprecated and should be replaced with ARIA or descriptive text.