Data or header cells should not be used to give caption to a data table

Rule ID: table-fake-caption
User Impact: Serious
WCAG: 1.3.1

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blind
  • Deafblind

Requirement(s)

  • Section 508: MUST

WCAG Success Criteria

  • 1.3.1 Info and Relationships

Section 508 Guidelines

  • 1194.22 (g) Row and column headers for data tables

Rule Description

Data table markup can be tedious and confusing. Screen readers have some features to ease table navigation, but tables must be marked up accurately for these features to work correctly. Some tables use cells with a colspan element to visually indicate a caption, instead of using an actual caption element.

Why it Matters

Screen readers have a specific way of announcing tables. When tables are not properly marked up, this creates the opportunity for confusing or inaccurate screen reader output.

When tables are not marked up with an actual caption element instead of using a colspan element on cells to visually indicate a caption, screen reader users cannot correctly perceive the purpose of the table visually.

How to Fix the Problem

To fix the problem, ensure the table uses an actual caption element instead of cells with a colspan element to visually indicate a caption.

To ensure screen reader users can make sense of tabular data, use the caption element for an onscreen title.

Example: Simple data table with a caption element

<table class="data">
    <caption>
      Greensprings Running Club Personal Bests
    </caption>
Greensprings Running Club Personal Bests
</caption>
    <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">1 mile</th>
      <th scope="col">5 km</th>
      <th scope="col">10 km</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">Mary</th>
      <td>8:32</td>
      <td>28:04</td>
      <td>1:01:16</td>
    </tr>
    <tr>
      <th scope="row">Betsy</th>
      <td>7:43</td>
      <td>26:47</td>
      <td>55:38</td>
    </tr>
    <tr>
      <th scope="row">Matt</th>
      <td>7:55</td>
      <td>27:29</td>
      <td>57:04</td>
    </tr>
    <tr>
      <th scope="row">Todd</th>
      <td>7:01</td>
      <td>24:21</td>
      <td>50:35</td>
    </tr>
    </tbody>
  </table>

The Algorithm (in simple terms)

Checks that data tables are marked up with table cells that use a colspan element to indicate a caption visually.