Headers attribute specified on a cell refers to cells in the same table element

  • Rule Type:atomic
  • Rule Id: a25f45
  • Last modified: Apr 30, 2020
  • Accessibility Requirements Mapping:
    • 1.3.1 Info and Relationships (Level: A)
      • Learn More about 1.3.1 (Info and Relationships)
      • Required for conformance to WCAG 2.0 and above on level A and above.
      • Outcome mapping:
        • Any failed outcomes: success criterion is not satisfied.
        • All passed outcomes: success criterion needs further testing.
        • An inapplicable outcome: success criterion needs further testing.
    • H43: Using id and headers attributes to associate data cells with header cells in data tables
  • Input Aspects:

Description

This rule checks that the headers attribute on a cell refer to other cells in the same table element.

Applicability

This rule applies to any headers attribute specified on a cell within a table element, where the table element is visible and included in the accessibility tree.

Expectation 1

Each target attribute is a set of space separated IDs, each of which is the ID of an element, that is a cell of the same table.

Note: headers attribute referencing elements that are non-existent or not in the table are ignored when assigning header cells (step 3, first case, point 2).

Expectation 2

Each target attribute is a set of space separated IDs, none of which is the ID of the element on which the test target is specified.

Note: headers attribute referencing to the cell itself are ignored when assigning header cells (step 3, first case, point 2).

Assumptions

  • This rule assumes that the headers attribute is only used to identify table headers. If other information is included in the headers attribute, the rule may fail on issues that are not accessibility concerns. For example, if headers is used to include information for scripts, this rule may not be accurate.
  • This rule assumes that the headers attribute is required to express the relationship between data and header cells in the table. If the browser computes an adequate fallback header, this rule may produce incorrect results.

Accessibility Support

There are no major accessibility support issues known for this rule.

Background

Test Cases

Passed

Passed Example 1

Open in a new tab

The headers attribute on the cell refers to a th element within the same table.

<table>
	<thead>
		<tr>
			<th id="header1">Projects</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="header1">15%</td>
		</tr>
	</tbody>
</table>

Passed Example 2

Open in a new tab

The headers attribute on the cell refers to a th element within the same table. Multiple headers are referenced for a cell with colspan of 2.

<table>
	<thead>
		<tr>
			<th id="header1">Projects</th>
			<th id="header2">Exams</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="2" headers="header1 header2">15%</td>
		</tr>
	</tbody>
</table>

Passed Example 3

Open in a new tab

The headers attribute on the second cell refers to a td element with a role of columnheader within the same table.

<table>
	<thead>
		<tr>
			<td role="columnheader" id="header1">Projects</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td headers="header1">15%</td>
		</tr>
	</tbody>
</table>

Passed Example 4

Open in a new tab

This table has multiple elements with a role of columnheader. The headers attribute on the cells lists IDs of th elements within the same table.

<table>
	<tr>
		<th colspan="2" id="header1">Projects</th>
		<th colspan="2" id="header2">Exams</th>
	</tr>
	<tr>
		<th id="e1" headers="header1">1</th>
		<th id="e2" headers="header1">2</th>
		<th id="p1" headers="header2">1</th>
		<th id="p2" headers="header2">2</th>
	</tr>
	<tr>
		<td colspan="2" headers="header1 e1 e2">15%</td>
		<td headers="header2 p1">15%</td>
		<td headers="header2 p2">45%</td>
	</tr>
</table>

Passed Example 5

Open in a new tab

The headers attribute on the cell refers to a th element with a role of rowheader within the same table.

<table>
	<tbody>
		<tr>
			<th role="rowheader" id="headerAge">Age</th>
			<td headers="headerAge">65</td>
		</tr>
	</tbody>
</table>

Passed Example 6

Open in a new tab

The headers attribute on the last two th elements refers to another th element within the same table. Here the column header has a span of two columns.

<table>
	<tr>
		<th id="name" colspan="2">Name</th>
	</tr>
	<tr>
		<th headers="name">Firstname</th>
		<th headers="name">Lastname</th>
	</tr>
</table>

Passed Example 7

Open in a new tab

The headers attribute on the cells refers to th elements which are row scoped & within the same table.

<table>
	<tr>
		<th id="projects1" scope="row">Projects</th>
		<th id="progress1" scope="row">Progress</th>
	</tr>
	<tr>
		<td headers="projects1">My Project</td>
		<td headers="progress1">15%</td>
	</tr>
</table>

Passed Example 8

Open in a new tab

The headers attribute on the cell refers to th element which is not the same column as the cell.

<table>
	<tr>
		<td></td>
		<th id="projects2">Projects</th>
	</tr>
	<tr>
		<td headers="projects2">15%</td>
		<td></td>
	</tr>
</table>

Failed

Failed Example 1

Open in a new tab

The td element has a headers attribute referring to an ID that does not exist within the same table. Here the referenced ID is incorrect.

<table>
	<tr>
		<th id="headerOfColumn">Projects</th>
	</tr>
	<tr>
		<td headers="headOfColumn">15%</td>
	</tr>
</table>

Failed Example 2

Open in a new tab

The td element has a headers attribute referring to its own ID.

<table>
	<tr>
		<th>Event Type</th>
	</tr>
	<tr>
		<td id="headerBday" headers="headerBday">
			Birthday
		</td>
	</tr>
</table>

Failed Example 3

Open in a new tab

The headers attribute on the cell refers to an element inside the same table which does not have a role of rowheader or columnheader.

<table>
	<tr>
		<td>
			<span id="headerProject">Projects</span>
		</td>
	</tr>
	<tr>
		<td headers="headerProject">
			15%
		</td>
	</tr>
</table>

Inapplicable

Inapplicable Example 1

Open in a new tab

There is no headers attribute.

<table>
	<tr>
		<th scope="col">Projects</th>
		<th scope="col">Exams</th>
	</tr>
	<tr>
		<td>15%</td>
		<td>45%</td>
	</tr>
</table>

Inapplicable Example 2

Open in a new tab

The table has a role="presentation" and thus is not included in the accessibility tree.

<table role="presentation">
	<tr>
		<td id="header1">Project Status</td>
	</tr>
	<tr>
		<td headers="header1">15%</td>
	</tr>
</table>

Inapplicable Example 3

Open in a new tab

The table is not visible in page.

<html>
	<style>
		.notInPage {
			position: absolute;
			left: -9999px;
			top: -9999px;
		}
	</style>
	<table class="notInPage">
		<tr>
			<td id="header1">Project Status</td>
		</tr>
		<tr>
			<td headers="header1">15%</td>
		</tr>
	</table>
</html>

Inapplicable Example 4

Open in a new tab

The rule applies only to headers attribute within a table element.

<div role="table">
	<div role="row">
		<div role="columnheader" id="header1">Projects</div>
		<div role="columnheader" id="header2">Exams</div>
	</div>
	<div role="row">
		<div role="cell" headers="header2">15%</div>
		<div role="cell" headers="header1">15%</div>
	</div>
</div>

Inapplicable Example 5

Open in a new tab

The table is not included in the accessibility tree.

<table style="display:none;">
	<tr>
		<td id="header1">Project Status</td>
	</tr>
	<tr>
		<td headers="header1">15%</td>
	</tr>
</table>

Glossary

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs. Elements in the accessibility tree are exposed to assistive technologies, allowing users to interact with the elements in a way that meet the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

Note: Users of assistive technologies might still be able to interact with elements that are not included in the accessibility tree. An example of this is a focusable element with an aria-hidden attribute with a value of true. Such an element could still be interacted with using sequential keyboard navigation regardless of the assistive technologies used, even though the element would not be included in the accessibility tree.

Examples for Included in the accessibility tree

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and to help implementers of ACT rules understand it.

This span element is included in the accessibility tree (by default, elements are included in the accessibility tree).

<span>ACT rules</span>

This span element is not included in the accessibility tree because it is hidden to everybody by the CSS property.

<span style="display:none">ACT rules</span>

This span element is not included in the accessibility tree because it is explicitly removed by the aria-hidden attribute.

<span aria-hidden="true">ACT rules</span>

This span element is positioned off screen, hence is not visible, but is nonetheless included in the accessibility tree.

<span style="position: absolute; top:-9999em">ACT rules</span>

Although the span element with an id of "label" is not itself included in the accessibility tree, it still provides an accessible name to the other span, via the aria-labelledby attribute. Thus, it is still indirectly exposed to users of assistive technologies. Removing an element from the accessibility tree is not enough to remove all accessibility concerns from it since it can still be indirectly exposed.

<span id="label" style="display:none">ACT rules</span>
<span aria-labelledby="label">Accessibility Conformance Testing rules</span>

Although this input element is not included in the accessibility tree, it is still focusable, hence users of assistive technologies can still interact with it by sequential keyboard navigation. This may result in confusing situations for such users (and is in direct violation of the fourth rule of ARIA (working draft)).

<input type="text" aria-hidden="true" name="fname" />

Outcome

An outcome is a conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the three following types:

  • Inapplicable: No part of the test subject matches the applicability
  • Passed: A test target meets all expectations
  • Failed: A test target does not meet all expectations

Note: A rule has one passed or failed outcome for every test target. When there are no test targets the rule has one inapplicable outcome. This means that each test subject will have one or more outcomes.

Note: Implementations using the EARL10-Schema can express the outcome with the outcome property. In addition to passed, failed and inapplicable, EARL 1.0 also defined an incomplete outcome. While this cannot be the outcome of an ACT Rule when applied in its entirety, it often happens that rules are only partially evaluated. For example, when applicability was automated, but the expectations have to be evaluated manually. Such "interim" results can be expressed with the incomplete outcome.

Visible

Content perceivable through sight.

Content is considered visible if making it fully transparent would result in a difference in the pixels rendered for any part of the document that is currently within the viewport or can be brought into the viewport via scrolling.

Content is defined in WCAG.

Examples for Visible

Note: The examples presented here are non-normative and not testable. They serve to illustrate some common pitfalls about the definition and to help the implementers of ACT rules understand it.

This span element is visible (by default, elements are visible).

<span>Now you can see me!</span>

This span element is not visible because of the CSS visibility property.

<span style="visibility: hidden">I'm the invisible man</span>

This span element is not visible because of the CSS display property.

<span style="display: none">I'm the invisible man</span>

This span element is not visible because it is positioned off-screen

<span style="position: absolute; top: -9999px; left: -9999px;">Incredible how you can</span>

This span element is not visible because it contains only whitespace and line breaks.

<span>
	<br />
	&nbsp;
</span>

This span element is not visible because it has the exact same color as its background.

<span style="color: #00F; background: #00F;">See right through me</span>

Useful Links


Implementations

This section is not part of the official rule. It is populated dynamically and not accounted for in the change history or the last modified date. This section will not be included in the rule when it is published on the W3C website.

ToolConsitencyCompleteReport
AlfaconsistentYesView Report
axe-coreconsistentYesView Report
QualWebconsistentYesView Report
SortSiteconsistentNoView Report

Acknowledgments

Table of Contents