SiteLint documentation and guidelines

Table missing description

Description

This rule ensures that tables have descriptive summaries or captions that provide context about the table’s content and purpose. This is especially important for complex data tables where the context is not immediately clear. Providing a description helps users, including those who rely on assistive technologies, understand what the table represents and how to navigate it.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to read out the table content. A descriptive summary or caption, helps them understand the context and structure of the table.
  • Cognitive disabilities: users with cognitive disabilities benefit from additional context that helps them process and understand the table data more effectively.
  • Motor impairments: users who navigate using keyboards or other assistive devices can more easily understand the purpose of the table with a clear description.

Why it matters

Tables without proper descriptions can be confusing and difficult to understand, particularly for users who rely on assistive technologies. A clear and descriptive caption or summary provides necessary context, making the table’s content more accessible and easier to navigate. This practice enhances the overall usability and inclusivity of web content.

Coding problems and solutions

Common coding problems

  • Missing captions: tables do not include a <caption> element to describe their content.
  • Unclear or vague descriptions: captions or summaries are too vague or do not adequately describe the table’s content.
  • Lack of context: tables lack additional descriptive elements like the aria-describedby attribute that could provide more context.

How to fix it

Add descriptive captions

Use the <caption> element to provide a brief description of the table’s purpose and content.

Incorrect example
<table>
 <tbody>
    <tr>
        <th>Month</th>
        <th>Sales</th>
        <th>Profit</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$10,000</td>
        <td>$2,000</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>
Correct example
<table>
  <caption>Monthly Sales Data for 2024</caption>
   <tbody>
    <tr>
        <th>Month</th>
        <th>Sales</th>
        <th>Profit</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$10,000</td>
        <td>$2,000</td>
    </tr>
    <!-- More rows -->
 </tbody>
</table>

Provide clear and concise descriptions

Ensure that the captions or summaries are clear and provide a meaningful description of the table’s content.

Incorrect example
<table>
  <caption>Numbers</caption>
   <tbody>
    <tr>
        <th>Grade</th>
        <th>Number of Students</th>
    </tr>
    <tr>
        <td>Grade 1</td>
        <td>120</td>
    </tr>
    <!-- More rows -->
 </tbody>
</table>
Correct example
<table>
<caption>Student Enrollment Numbers by Grade for 2024</caption>
  <tbody>
    <tr>
        <th>Grade</th>
        <th>Number of Students</th>
    </tr>
    <tr>
        <td>Grade 1</td>
        <td>120</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

Use aria-describedby for additional context

For complex tables, use the aria-describedby attribute to reference a more detailed description elsewhere on the page.

Correct example
<table aria-describedby="tableDescription">
<caption>2024 Financial Report</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 a detailed overview of the financial performance of the company for each quarter of 2024, including revenue and expenses.
</div>

Known limitations

  • Dynamic tables: for tables generated dynamically via JavaScript, ensure that captions or descriptions are included and correctly associated with the table.
  • Complex tables: for very complex tables, consider using multiple descriptive methods, such as combining captions with the aria-describedby attribute, to provide comprehensive context.
  • Multilingual support: ensure that descriptions are available in all relevant languages to accommodate users who speak different languages.

Resources