Tables used for layout should not include semantic markup, such as <th> elements, as it can confuse assistive technologies. At
best this information is ignored by screen readers and makes the code less maintainable. However it can also confuse some screen readers and reduce
the web page accessibility.
This rule raises an issue when a <table> element containing the role attribute set to
"presentation" or "none" also contains any of:
- a
<caption> element
- a
<th> element
- a non-empty
summary attribute
- an
<td> element with a headers or scope attribute
Noncompliant code example
<table role="presentation" summary="bla"> <!-- Noncompliant -->
<caption>People</caption> <!-- Noncompliant -->
<tr>
<td></td>
<th>Name</th> <!-- Noncompliant -->
<th id="myid1">Age</th> <!-- Noncompliant -->
</tr>
<tr>
<td scope="row">1</td> <!-- Noncompliant -->
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td id="myid2">2</td>
<td headers="myid1 myid2">Alice Doe</td> <!-- Noncompliant -->
<td>54</td>
</tr>
</table>
