---
title: "Header attribute is referring to wrong ID or cell"
date: "2024-10-25T05:54:50+00:00"
summary: "Ensure table headers attribute correctly references cells within the same table for improved accessibility and screen reader compatibility."
image:
type: "page"
url: "/web-governance/header-attribute-referring-wrong-id-or-cell"
id: "c2586d35-4d47-4af2-9e83-e7c26146ed52"
---

Table of contents will be added

1.3.1 Info and Relationships

Introduction
------------

This article provides information about the related accessibility check:

*   Header attribute is referring to wrong ID or cell.
    

What
----

When the headers attribute is used in a table cell, its value must refer to the ID of a cell within the same table.

Why
---

The headers attribute establishes a connection between a table data cell and a table header cell. When it is done correctly, this relationship allows users of assistive technologies, such as blind users, to more easily understand the structure of the table.

If the headers attribute is present on a cell but does not reference a cell within the same table, it is a strong indication of a coding error. This means the intended accessibility function does not work as expected.

Who
---

### Affected users

This check affects the following users who have:

*   Visual impairments: These users access the site contents with a screen reader.
*   Visual impairments: These users access the site contents with screen magnification software.

### User story

![Woman smiling while doing yoga, with a child playfully climbing on her back in a cozy living room.](https://acquia.widen.net/content/ab902dae-f391-4c4d-a431-77ca08d2adc6/web/Mon_AccessibilityHelpCenter-UserStory-WomanDoingYogaWithGirl.png)

Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:

_“You know, my little girl, she is only five, and we had to take her in for a blood test. The doctors were worried she might have diabetes, just like my dad did. I was really anxious about it, of course, as any mom would be._

_So, when the results came in, I had to check them myself using my computer. Now, with my screen reader, it is always a bit tricky. The results were all in this table format, and let me tell you, it was not easy to make sense of it. The screen reader just starts reading everything out of order. So instead of getting a clear table reading, I am hearing things like "glucose level, 102," then right after, 140, cholesterol, then something like "A1C, 5.6" followed by “150”, and “6.2” without any clear connection between what these numbers mean in relation to each other._

_It is like trying to sort through a jumble of information that just does not fit together. I had to go over it several times, piecing things together, and even then, I was not sure if I was understanding it all correctly. It is frustrating because, as a mom, you want to know what is going on with your child right away, but sometimes, technology just does not make it easy. Eventually, I had to call the doctor’s office to get them to explain the results to me directly, just to make sure I was not missing anything important.”_

Examples
--------

This section gives some examples of the issue.

### Example: A table with the correct use of the `headers` attribute

*   The `headers` attribute on the data cells refers to a `th` element within the same table.
    
        <table>
        <thead>
         <tr>
          <th id="header1">Projects</th>
          <th id="header2">Objective</th>
          </tr>
        </thead>
        <tbody>
         <tr>
          <td headers="header1">15%</td>
          <td headers="header2">10%</td>
         </tr>
        </tbody>
        </table>
    

### Example: A table with the wrong use of the `headers` attribute

*   The `td` elements have a `headers` attribute that refer to an ID that does not exist within the same table. The referenced ID is incorrect.
    
    Notice the difference between _headOfColumn1_ and _headerOfColumn1_ in the following example:
    
        <table>
         <tr>
          <th id="headerOfColumn1">Projects</th>
          <th id="headerOfColumn2">Objective</th>
         </tr>
         <tr>
          <td headers="headOfColumn1">15%</td>
          <td headers="headOfColumn2">10%</td>
         </tr>
        </table>
    

How
---

This section provides information on how to identify and fix the issue.

### How to identify it

The Acquia Web Governance platform identifies cases where the `headers` attribute is present, but its value does not point to the ID of a cell within the same table.

### How to fix it

To resolve this issue, update your HTML code so that the value of the `headers` attribute refers to an ID or a list of IDs for cells within the same table.

The _ACT rules_ section below provides a link to a full technical explanation of this check and offers detailed examples on how to pass it.

Additional resources
--------------------

### WCAG success criteria

[1.3.1 Info and Relationship](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)

### ACT rules

Related accessibility conformance testing rules:

[Headers attribute specified on a cell refers to cells in the same table element](https://www.w3.org/WAI/standards-guidelines/act/rules/a25f45/)

### Other resources

[Forming relations between data cells and header cells](https://html.spec.whatwg.org/multipage/tables.html#header-and-data-cell-semantics)