Differentiate table summaries and captions

***This document provides helpful tips to improve your site's accessibility. While it doesn’t guarantee 100% compliance, it’s a great starting point to make your website more inclusive and user-friendly.***

Identification

Tables must not have identical summary and caption text (Rule ID: table-duplicate-name)

Applicable Standards

• Deque Best Practice

Impact

Minor level impact affecting:

• Blind users

• Deafblind users

Proper Implementation

• Use <caption> for visible table titles

• Use summary attribute for structural descriptions

• Ensure summary and caption provide different, complementary information

• Caption should identify the table

• Summary should describe table organization and structure

Examples of Correct Usage

1. Simple Table with Distinct Caption and Summary:
   The <caption> provides a concise title ("Student Grades") while the summary attribute describes the table's structure and content for screen reader users.

2. Complex Table with Summary and Caption:
   The <caption> ("Quarterly Sales Data") provides a title, while the summary describes how the data is structured (e.g., rows for products and columns for quarters).

3. Accessible Table for Screen Reader Users:
   This example uses the summary attribute specifically to describe the table's structure for screen reader users while keeping the <caption> simple and visible.

Common Errors to Avoid 

1. Duplicate Caption and Summary:
   

   The summary and <caption> both use the same text ("Student Grades"), which reduces their usefulness and creates redundancy for screen reader users.

2. Missing Summary for Complex Table:
   The <caption> provides a title, but the table lacks a summary, making it harder for screen reader users to understand its structure.

3. Overly Long Caption with Structural Details:
   The <caption> is unnecessarily long and contains structural details that should instead be in the summary attribute.

4. Overusing Summary for Simple Tables:
   The summary attribute is unnecessary for a simple table with only two columns, as the structure can be easily understood by screen readers without additional explanation.

5. Using summary Instead of <caption>:
The summary attribute is used to provide the table title ("Monthly Expenses"), but this information should be in a <caption> element.

Rationale

• Screen readers announce both summary and caption

• Duplicate information creates redundant announcements

• Summary should provide additional context about table structure

• Different information in caption and summary helps users better understand table organization

• Improves navigation efficiency for screen reader users

Evaluation Method

1. Inspect Table Structure

   • Ensure the table includes both a <caption> element and, if needed, a summary attribute.

   • Verify that the <caption> provides a concise title and the summary describes the structure of the table.
     
     

2. Test with a Screen Reader

   • Use a screen reader (e.g., NVDA, JAWS, or VoiceOver) to navigate the table.

   • Confirm that the summary attribute is announced as a structural description and the <caption> as the table title.

Evaluation Checklist