WCAG 1.3.1 — Table Missing Header Markup

Who Is Affected

Blind users and users with low vision who rely on screen readers to navigate data tables. Also affects users with cognitive disabilities who benefit from clear table structure and anyone using voice control software.

What This Means

When a data table lacks header markup, screen readers cannot tell users what each cell represents. For example, in a budget table, a screen reader might announce "42,000" without indicating this is the "Transportation" budget for "2024." The user has no context to understand the data.

Proper header markup uses HTML <th> elements and header attributes to create relationships between data cells and their corresponding row/column headers. This allows assistive technology to announce both the data and its context: "Transportation, 2024, 42,000."

Fix: Content Editor

For Simple Tables (Single Header Row/Column)

1. Open your page editor and locate the table.
2. Select the cells in the first row that serve as column headers.
3. In your editor's table toolbar, click "Header Cell" or look for a <th> option.
4. If your table also has row headers (first column), select those cells and convert them to header cells as well.
5. Save and publish the page.

WordPress Block Editor:

• Select the table block
• Use the table settings to toggle "Header section" and "Footer section" as needed
• The first row will automatically become <th> elements

WordPress Classic Editor:

• Select header cells in the table
• Click the "Table cell properties" button
• Change "Cell type" from "Data" to "Header"

Joomla TinyMCE:

• Right-click on header cells and select "Cell properties"
• Change "Cell type" from "Data" to "Header"

For Complex Tables (Multiple Header Levels)

Complex tables require additional markup beyond basic <th> elements:

1. Identify all header cells and convert them to <th> elements using the steps above.
2. Switch to HTML/Code view in your editor.
3. Add scope attributes to header cells:
   • scope="col" for column headers
   • scope="row" for row headers
   • scope="colgroup" for headers spanning multiple columns
   • scope="rowgroup" for headers spanning multiple rows

Example:

<table>
  <tr>
    <th scope="col">Department</th>
    <th scope="col">2023 Budget</th>
    <th scope="col">2024 Budget</th>
  </tr>
  <tr>
    <th scope="row">Fire</th>
    <td>$2.1M</td>
    <td>$2.3M</td>
  </tr>
</table>

Fix: CMS / Theme

If your theme or CMS automatically generates tables that lack proper headers:

1. Review your theme's table styling to ensure <th> elements are visually distinct from <td> elements.
2. Check any plugins or modules that generate data tables (event calendars, staff directories, etc.) and configure them to use proper header markup.
3. For custom table templates, ensure they use semantic HTML structure with <th> elements for headers.

Standard Reference

WCAG 2.1 Success Criterion 1.3.1 — Info and Relationships, Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

• W3C Understanding SC 1.3.1
• WCAG Technique H51 — Using table markup to present tabular information
• WCAG Technique H63 — Using the scope attribute to associate data cells with header cells
• WCAG Failure F46 — Using th elements, caption elements, or non-empty summary attributes in layout tables