SIA-R76`<th>` elements are semantic headers

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

1.3.1 Info and Relationships

Description

This rule checks that <th> elements are correctly marked up as headers for one or more columns or rows of a table.

Applicability

This rule applies to every <th> element in the HTML namespace for which all the following are true:

the element is visible; and
the element is included in the accessibility tree; and
the element has at least one ancestor in the flat tree which is a <table> element; and
the element's closest <table> ancestor is included in the accessibility tree.

Expectations

The target element has a semantic role of either rowheader or columnheader.

The implicit semantic role of <th> elements depends on whether they are either a column header, a column group header, a row header, or a row group header.

Assumptions

This rule makes the following assumption:

<th> elements have their structure of table header conveyed through presentation.

Accessibility support

This rule has the following accessibility support concern:

Table markup and header cell association is not well supported by some popular assistive technologies.

Background

While it is possible to build tables solely through ARIA roles, e.g. with <div role="row"> and <span role="cell">, these will not be detected as HTML tables due to non-interference with the host language. Therefore, the algorithm for forming tables will not be run and no cell-header association will happen. As a result, this rule ignores such tables. Note that these tables have no structure conveyed to assistive technologies and should not be used.

Examples

Passed

These two <th> elements are both row headers because there is no data cell in their column, and therefore have a semantic role of rowheader:

<table>
    <caption>Opening hours</caption>
    <tr><th>Mon-Fri</th><td>8-17</td></tr>
    <tr><th>Sat-Sun</th><td>10-14</td></tr>
</table>

These four <th> elements are either column headers or row headers according to their scope attribute, and therefore have a semantic role of either columnheader or rowheader:

<table>
    <caption>Opening hours</caption>
    <tr><td></td><th scope="col">Morning</th><th scope="col">Afternoon</th></tr>
    <tr><th scope="row">Mon-Fri</th><td>8-12</td><td>13-17</td></tr>
    <tr><th scope="row">Sat-Sun</th><td>10-13</td><td>Closed</td></tr>
</table>

Failed

These four <th> elements are neither column headers (because of the non-empty data cells in their row) nor row headers (because of the non-empty data cells in their column), therefore they have no semantic role:

<table>
    <tr><td>Open</td><th>Morning</th><th>Afternoon</th></tr>
    <tr><th>Mon-Fri</th><td>8-12</td><td>13-17</td></tr>
    <tr><th>Sat-Sun</th><td>10-13</td><td>Closed</td></tr>
</table>

Inapplicable

These <th> elements are inside a table which is not included in the accessibility tree:

<table aria-hidden="true">
    <caption>Opening hours</caption>
    <tr><td></td><th>Morning</th><th>Afternoon</th></tr>
    <tr><th>Mon-Fri</th><td>8-12</td><td>13-17</td></tr>
    <tr><th>Sat-Sun</th><td>10-13</td><td>Closed</td></tr>
</table>

Implementation Details

When deciding whether a <th> whose scope attribute is in the auto state is a column header or row header, empty data cells are ignored by this rule. Most User Agents and Assistive Technologies likewise ignore empty data cells. It is a common practice to have an empty data cell in the top-left corner of tables with both columns and rows headers.

SIA-R76<th> elements are semantic headers