Use <caption> to provide an accessible table title

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Table titles go in <caption>, not in the first row.

Why this matters and how to fix it

Why this matters

Screen reader users depend on a table's caption to understand its purpose before navigating any rows. If a table title is visually placed inside the first row instead of using a real <caption>, assistive technologies will not announce it as the table's name. This forces users to guess context or explore data without knowing what it represents.

How to fix this issue

Place the descriptive label for the table inside a <caption> element as the first child of <table>. Do not simulate captions using table rows, headings, or surrounding text alone. The caption should be concise and describe what the table represents.

Automated detection · Manual review recommended

Developer guidance

In design systems, include a Table component that requires a caption for all data tables. For dashboards or analytics UI, default captions can be visually hidden using the `.visually-hidden` class so visual layout is not affected while accessibility is maintained.

Code examples

Incorrect Implementation

<table>
  <tr><td><strong>Users by region</strong></td></tr>
  <tr><th>Region</th><th>Users</th></tr>
  <tr><td>EU</td><td>1200</td></tr>
</table>

Correct Implementation

<table>
  <caption>Users by region</caption>
  <tr><th scope="col">Region</th><th scope="col">Users</th></tr>
  <tr><td>EU</td><td>1200</td></tr>
</table>

Real-World Examples

Before

<table class="stats-table">
  <tr><td class="title">Quarterly revenue</td></tr>
  <tr><th>Q1</th><td>$250k</td></tr>
</table>

After

<table class="stats-table">
  <caption class="visually-hidden">Quarterly revenue</caption>
  <tr><th scope="col">Quarter</th><th scope="col">Revenue</th></tr>
  <tr><td>Q1</td><td>$250k</td></tr>
</table>

CSS Example (Guidance)

/* Visually hide caption while keeping it accessible */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

Manual testing

  1. 1. Inspect each data table and check whether the title is implemented as a <caption> (not hidden inside the first row).
  2. 2. Turn on a screen reader and navigate to the table — ensure the caption is announced before any headers.
  3. 3. If the caption is visually hidden, confirm that it still exists in the accessibility tree.
  4. 4. Ensure the caption is short, descriptive, and corresponds to the data presented.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance