org.sonar.l10n.web.rules.Web.S5256.html Maven / Gradle / Ivy
Why is this an issue?
Table headers are essential to enhance the accessibility of a table’s data, particularly for assistive technologies like screen readers. These
headers provide the necessary context to transform data into information. Without headers, users get rapidly lost in the flow of data.
This rule raises an issue whenever a <table> does not contain any <th> elements.
Exceptions
No issue will be raised on <table> used for layout purpose, i.e. when it contains a role attribute set to
"presentation" or "none".
<table role="presentation">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>John Doe</td>
<td>42</td>
</tr>
</table>
Note that using <table> for layout purpose is a bad practice.
No issue will be raised on <table> containing an aria-hidden attribute set to "true".
<table aria-hidden="true">
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>John Doe</td>
<td>42</td>
</tr>
</table>
How to fix it
The first <tr> of the table should contain <th> elements, with the appropriate description of what the data
in those columns represents.
Going the extra mile
Headers should be properly associated with the corresponding <td> cells by using either a scope attribute or
headers and id attributes. See W3C WAI Web Accessibility
Tutorials for more information.
Code examples
Noncompliant code example
<table> <!-- Noncompliant -->
<tr>
<td>Name</td>
<td>Age</td>
</tr>
<tr>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>Alice Doe</td>
<td>54</td>
</tr>
</table>
Compliant solution
<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
<tr>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>Alice Doe</td>
<td>54</td>
</tr>
</table>
Resources
Documentation
- WCAG2, 1.3.1 - Info
and Relationships
- WCAG2, H51 - Using table markup to present tabular information