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

Misconfigured data table header (WCAG Level A Issue)

Tables - Lumar Accessibility Thumbnail
NULL NULL
 

What does this accessibility issue mean?

Accessibility issue summary: misconfigured or missing table header data

Tables are commonly used to organize and present data in a structured manner, but without proper table header data, users may encounter several accessibility issues. 

Screen readers and other assistive technologies rely on table header information (included in <th> elements in your code) to describe the column and row headers in a table to users with visual impairments.  If these table headers are missing or misconfigured, screen reader users may not be able to easily comprehend the relationships between data cells in the table, making the entire table difficult to understand and navigate. 

Solution:

Ensure that each cell in a table that uses the table headers attribute refers only to other cells in that table.

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: Misconfigured data table header (WCAG Level A Issue)

 <table>
   <thead>
     <tr>
       <th id="product-name">Product Name</th>
       <th id="product-price">Price</th>
       <th id="product-stock">Stock</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td headers="item-name">Item 1</td>
       <td headers="item-price">$10</td>
       <td headers="item-stock">In stock</td>
     </tr>
   </tbody>
 </table>

This HTML code violates the td-headers-attr rule, because it uses the headers attribute on td elements to point to an id that does not exist. The headers attribute should refer to the id of a th in the same table.Here is the corrected code:

 

How to fix "Misconfigured data table header (WCAG Level A Issue)" issue

 <table>
   <thead>
     <tr>
       <th id="product-name">Product Name</th>
       <th id="product-price">Price</th>
       <th id="product-stock">Stock</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td headers="product-name">Item 1</td>
       <td headers="product-price">$10</td>
       <td headers="product-stock">In stock</td>
     </tr>
   </tbody>
 </table>

In this corrected code, the headers attribute on the td elements correctly refer to the ids of th elements in the same table. This makes the data table markup semantic and understandable by screen readers.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform