Tables use <caption> instead of cells with the [colspan] attribute to indicate a caption

Tables use the caption element to label their content.

Impact

About

Screen readers have features to make navigating tables easier. Ensuring that tables use the actual caption element instead of cells with the [colspan] attribute may improve the experience for screen reader users.

Risks

Screen readers cannot identify the purpose of the table.

Why it's important

Improves the experience for assistive technology users by ensuring content structure is clear and consistent.

User stories

As an assistive technology user, I want content to be properly structured so that I can navigate and understand the page.

Code

Failing pattern:

<!-- Fail: first row used as a caption via colspan -->
<table>
  <tr><td colspan="3">Staff directory</td></tr>
  <tr><th>Name</th><th>Title</th><th>Email</th></tr>
</table>

Passing pattern:

<!-- Pass: use the caption element -->
<table>
  <caption>Staff directory</caption>
  <tr><th>Name</th><th>Title</th><th>Email</th></tr>
</table>

Error

ScanGov messaging when a site fails a standard:

Failed: Tables use <caption> instead of cells with the [colspan] attribute to indicate a caption

Guidance

Web Content Accessibility Guidelines (WCAG)

Indicators

Accessibility