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

Rule Description

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

The Algorithm, in Simple Terms

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

Why this is Important

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 on cells to visually indicate a caption, screen reader users cannot properly perceive visually the purpose of the table.

Compliance Data & Impact

User Impact: Serious
Disabilities Affected:
  • Blindness
  • Deafblindness
Severity: Serious
Issue Type:
  • WCAG 2.0 (A): SHOULD
  • Section 508: MUST
  • Deque Experimental
  • WCAG 2.1 (A): SHOULD
WCAG Success Criteria:
  • 1.3.1 Info and Relationships
Section 508 Guidelines:
  • 1194.22 (g) Row and column headers for data tables

How to Fix the Problem

To fix the problem, ensure the table uses an actual <caption> element instead of cells with a colspan 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>

Related Deque University Course Pages

Related Deque Code Library Examples

Other Related Resources

Additional Information

Relevant Technologies:
  • HTML 4
  • HTML5
Relevant Custom Widget Type(s):
  • Table - Sortable
  • Table - Responsive
Test Reliability: Automated testing is possible, with high accuracy
Rule ID: table-fake-caption