What does this mean?
Tables which contain information should have clear headers defined.
More helpIn this example, the top row of the table is a header:
Surname | City |
---|---|
Washington | London |
Phoenix | Arizona |
Austin | Travis |
Notice how without the header here, it would be almost impossible to understand what the individual values mean ("Washington" could be a city or a surname).
It is not enough to just make the headers look differently, as accessible technologies will not
recognize this (for example, a screen reader cannot 'see' different colors or fonts).
Table headings must be defined using the <th>
tag.
This example shows how a table should use a <th>
to mark cells as headings. Note the
use of the col
attribute, to specify these headings are for the column:
<table>
<tr>
<th scope="col">First name</th>
<th scope="col">City</th>
</tr>
<tr>
<td>Washington</td>
<td>London</td>
</tr>
<tr>
<td>Phoenix</td>
<td>Arizona</td>
</tr>
<tr>
<td>Austin</td>
<td>Travis</td>
</tr>
</table>
Tables which are used purely for layout do not need to do this. However, the use of tables for layout is strongly discouraged. This check will ignore tables that it believes are purposely used for layout.
Learn more about accessible table design (W3C).
100% done
How close this website is to fixing this issue.
This is probably because we're still working on this. Take a look at another issue.