SIA-R76<th> elements are semantic headers

Accessibility requirements

This rule tests conformance of the following accessibility requirements:


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


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


  1. 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.


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.


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.



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:

    <caption>Opening hours</caption>

This 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:

    <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>


This 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:



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

<table aria-hidden="true">
    <caption>Opening hours</caption>

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.