R I S K M O N I T O R

Loading

Intelligent Cybersecurity Check for vulnerabilities now

Contact Info

Get A Quote

Proper Use of Table Captions

  • June 30, 2025

Proper Use of Table Captions

Rule ID: table-fake-caption
Ruleset: axe-core 4.10
User Impact: Serious
Guidelines: WCAG 2.1 (Experimental), WCAG 2.0 (Experimental), Section 508, EN 301 549

How to Fix the Problem

To ensure full accessibility, do not simulate table captions using a cell with a colspan attribute. Instead, use the <caption> element, which is the correct semantic method for labeling tables.

Correct Approach

Use the <caption> element directly inside the <table> tag to define a table’s title or purpose. Here’s how:

html
<table class="data">
<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>
<!-- Additional rows... -->
</tbody>
</table>

What to Avoid

Avoid using a table row with a single <td> or <th> that spans multiple columns using colspan to visually mimic a caption. For example:

html
<tr>
<td colspan="4"><strong>Table Title Here</strong></td>
</tr>

This may look like a caption visually but does not expose the information programmatically to screen readers.

Why it Matters

Screen reader users depend on properly structured table markup to navigate and understand tabular data. The <caption> element is specifically recognized by assistive technologies to announce the purpose or summary of a table.

If a table uses a colspan to simulate a caption, screen readers will not recognize or announce it as such. This can lead to confusion and makes it more difficult for users with disabilities to understand what the table is for.

Accessible captions:

  • Help screen reader users locate and distinguish between multiple tables.

  • Provide important context before reading table headers and data.

  • Improve usability and compliance with accessibility standards.

Rule Description

This rule checks for misuse of colspan cells in place of the actual <caption> element. The goal is to ensure that data tables are semantically correct, so assistive technologies can present the content meaningfully to users.

When a table’s visual label is not associated using proper HTML semantics, its function and context are lost to non-visual users, creating a barrier to access.

The Algorithm (in simple terms)

  • Look for tables using a <td> or <th> with a colspan value that appears before table headers.

  • Flag these if no actual <caption> element is present.

  • Recommend replacing the visual label with a semantic <caption>.

Tags:
Share:

Leave A Comment