SiteLint documentation and guidelines

Table caption summary identical

Description

This rule checks that the <caption> element and the summary (if provided using summary attribute or aria-describedby) of a table are not identical. The <caption> element should provide a concise description of the table’s purpose, while the summary should offer more detailed context if needed. Redundancy between the two can cause confusion and diminish the value of providing additional context for assistive technologies.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to provide both a concise overview and detailed context of the table. If the caption and summary are identical, they may receive redundant information, which can be frustrating and unhelpful.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and non-redundant information. Identical captions and summaries can lead to confusion and cognitive overload.
  • Motor impairments: users who navigate using keyboards or other assistive devices need concise and useful information to navigate tables efficiently. Redundant descriptions can slow down their interaction.

Why it matters

Providing distinct and meaningful content in both the caption and summary of a table enhances accessibility by offering users a quick overview as well as detailed context. This differentiation helps users better understand and navigate complex tables, ensuring that all users, regardless of their abilities, have equal access to the information.

Coding problems and solutions

Common coding problems

  • Identical captions and summaries: the <caption> and the summary provided through the summary attribute or aria-describedby are the same.
  • Redundant information: both the caption and the summary contain redundant information that does not add value.

How to fix it

Differentiate captions and summaries

Ensure that the <caption> provides a brief description of the table’s purpose, while the summary offers more detailed context.

Incorrect example
<table aria-describedby="tableDescription">
 <caption>Quarterly Sales Data</caption>
   <tbody>
    <tr>
        <th>Quarter</th>
        <th>Revenue</th>
        <th>Expenses</th>
    </tr>
    <tr>
        <td>Q1</td>
        <td>$50,000</td>
        <td>$30,000</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>
<div id="tableDescription">
    Quarterly Sales Data
</div>
Correct example
<table aria-describedby="tableDescription">
 <caption>Quarterly Sales Data</caption>
  <tbody>   
    <tr>
        <th>Quarter</th>
        <th>Revenue</th>
        <th>Expenses</th>
    </tr>
    <tr>
        <td>Q1</td>
        <td>$50,000</td>
        <td>$30,000</td>
    </tr>
    <!-- More rows -->
 </tbody>
</table>
<div id="tableDescription">
    This table provides an overview of the company's sales data for each quarter, including total revenue and expenses.
</div>

Provide meaningful context

Use the summary to elaborate on the caption by providing additional details that are not immediately obvious from the table itself.

Incorrect example
<table aria-describedby="detailedDescription">
 <caption>Employee Performance Metrics</caption>
  <tbody>
    <tr>
        <th>Employee</th>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Q4</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>85%</td>
        <td>90%</td>
        <td>88%</td>
        <td>92%</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>
<div id="detailedDescription">
    Employee Performance Metrics
</div>
Correct example
<table aria-describedby="detailedDescription">
<caption>Employee Performance Metrics</caption>
  <tbody>
    <tr>
        <th>Employee</th>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Q4</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>85%</td>
        <td>90%</td>
        <td>88%</td>
        <td>92%</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>
<div id="detailedDescription">
    This table outlines the performance metrics of employees across four quarters, showing their progress and areas for improvement.
</div>

Known Limitations

  • Complex tables: for very complex tables, ensure that both the caption and summary provide sufficient differentiation to avoid redundancy while offering meaningful context.
  • Dynamic content: for tables with dynamically changing content, ensure that both the caption and summary are updated appropriately to reflect the current state of the table.
  • Assistive technology compatibility: different screen readers and browsers may handle table captions and summaries differently. Testing across multiple platforms is recommended.

Resources