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

Rule ID: table-fake-caption
Ruleset: axe-core 3.2
User Impact: Serious
WCAG: 1.3.1

Learn Web Accessibility

Subscribe to our extensive curriculum of online self-paced courses

Compliance Data & Impact

User Impact

Disabilities Affected

  • Blindness
  • Deafblindness

Requirement(s)

  • WCAG 2.1 (A): SHOULD
  • Note: Experimental rule
  • WCAG 2.0 (A): SHOULD
  • 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

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>

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

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.

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.

Resources

Refer to the complete list of axe 3.2 rules.