Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Table header doesn’t refer to cell (WCAG Level A Issue)

How to fix the website accessibility issue of table headers that don’t refer to cells — Lumar Web Accessibility Wiki

Tables - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Issue summary: Table header doesn’t refer to a cell in the table

To tables on your website are accessible, every table header (<th>) element that has a scope attribute in place should also have at least one <td> (table data) or <th> (table header) element that references it by using the table headers attribute. 

This is important for accessibility because it helps ensure that header cells are properly associated with their corresponding data cells, making it easier for users to understand the content of a table via screen readers and other assistive technology.

Solution:

Ensure that <th> elements and elements with “role=columnheader/rowheader” have data cells they describe.

Issue details

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

 

Example HTML violation: Table header doesn’t refer to cell (WCAG Level A Issue)

 <table>
   <tbody>
     <tr>
       <th>Heading</th>
     </tr>
   </tbody>
 </table>

The above HTML violates the th-has-data-cells accessibility rule because it includes a header (th) element without any associated data cells (td). This rule ensures that each th element has corresponding td elements.

To correct this violation, we need to add a td element inside the tr for each th.

 

How to fix "Table header doesn’t refer to cell (WCAG Level A Issue)" issue

 <table>
   <thead>
     <tr>
       <th>Heading</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>Data Cell</td>
     </tr>
   </tbody>
 </table>

In this updated version: - We are still retaining the th element to act as our header row. - We have added a td element to create a data cell, ensuring the th element now has a data cell it describes. - We have used thead for the header and tbody for the body content to further clarify their roles, but it's not necessary. This makes the table more accessible and adheres to web content accessibility guidelines.

For more information about accessible table, you can refer to W3C Web Accessibility Tutorials.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform