Summary Description

title: "Summary Description — Describing Table Purpose with aria-describedby" description: "Learn how to provide a longer summary description for complex data tables using aria-describedby when a caption alone is insufficient." weight: 7 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, tables]

A summary description provides additional context about a table's structure or content when the caption alone is insufficient for screen reader users.

## What You'll Learn

How to use aria-describedby to provide table summaries, and when a summary is needed beyond the caption.

## Why It Matters

Complex tables need more explanation than a caption can provide. A summary describing the table structure helps screen reader users navigate efficiently.

## Real-World Use

A complex budget table has multiple header levels. The caption says "Q2 Budget." The summary explains: "The table shows budget by department in columns and by quarter in rows. Totals are in the last row and last column."

## Summary with aria-describedby

```html
<p id="budget-summary" class="sr-only">
  This table shows quarterly budget allocations by department.
  Columns represent departments (Engineering, Marketing, Sales).
  Rows represent quarters (Q1, Q2, Q3, Q4).
  The last column shows total annual budget per department.
  The last row shows total budget per quarter.
</p>

<table aria-describedby="budget-summary">
  <caption>2026 departmental budget</caption>
  <!-- table content -->
</table>

Visible Summary

<details>
  <summary>Table information</summary>
  <p id="table-info">This table compares features across three product tiers:
    Basic, Pro, and Enterprise. Features are listed in rows.</p>
</details>

<table aria-describedby="table-info">
  <caption>Feature comparison</caption>
  <!-- table content -->
</table>

Common Mistakes

1. Repeating the caption as summary

The summary should add information not present in the caption, not repeat it.

2. Summary too long

Keep summaries to 2-4 sentences. Very long summaries are skipped by users.

3. No aria-describedby association

The paragraph alone is not associated. aria-describedby is needed.

4. Using deprecated summary attribute

The summary attribute on table is deprecated. Use aria-describedby instead.

5. Summary not visible to all users

Consider making the summary visible for all users. Collapsed details/summary works well.

Practice Questions

1. What attribute associates a description with a table? aria-describedby on the table element references the id of the description element.

2. What information should a summary contain? Structure information: how rows and columns are organized, what headers represent, where totals are.

3. How is a summary different from a caption? The caption names the table. The summary explains the table structure and how to navigate it.

Challenge: Write summaries for three different tables. Include structural information that helps a screen reader user understand how to navigate each table.

FAQ

Mini Project

Add summaries to three tables: a simple pricing table (maybe not needed), a complex budget table (needed), and a scientific data table (needed).

What's Next

Learn about Sorting Tables and how to use aria-sort for sortable table columns.