Content should be in a data table but is not
semantic-data-table
- Rule ID:
- semantic-data-table
- User Impact:
- Critical
- WCAG :
- 1.3.1.b
Rule
Content presented as a data table must use semantic table markup.
Background
Tables are static structures that contain one or more rows of data cells. Each data cell is associated with one or more corresponding header cells, which label, or provide context for, the data.
| First name | Last name |
|---|---|
| Jane | Doe |
| John | Doe |
The visual arrangement of a table is intended to help users quickly understand the relationship between each data cell and its corresponding headers. Users who rely on assistive technology, however, may not be able to perceive these relationships. Tables must use appropriate semantic markup so assistive technologies can provide users with context for the data they encounter as they navigate throughout the table.
Good Examples
The examples in this section demonstrate how to properly construct a data table.
Native HTML table
Native HTML <table> element and attributes are widely supported by assistive technology and should be used whenever possible, especially when the table's data/header relationships are simple.
<table>
<thead>
<tr>
<th scope="col">First name</th>
<th scope="col">Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>ARIA table
Another valid approach to creating a semantic data table involves using <div> and <span> elements to create the table structure and using table-related ARIA roles to define the function of each part.
<div role="table">
<div role="rowgroup">
<div role="row">
<span role="columnheader">First name</span>
<span role="columnheader">Last name</span>
</div>
</div>
<div role="rowgroup">
<div role="row">
<span role="cell">Jane</span>
<span role="cell">Doe</span>
</div>
<div role="row">
<span role="cell">John</span>
<span role="cell">Doe</span>
</div>
</div>
</div>Failure Examples
The examples in this section demonstrate what not to do with a data table.
Neutral elements without ARIA roles
Data tables constructed using <div> and <span> elements must have the appropriate table-related ARIA roles.
Although the following example could be styled to visually resemble a data table, it has none of the semantic meaning necessary to be understood by assistive technology.
<div>
<div>
<div>
<span>First name</span>
<span>Last name</span>
</div>
</div>
<div>
<div>
<span>Jane</span>
<span>Doe</span>
</div>
<div>
<span>John</span>
<span>Doe</span>
</div>
</div>
</div>Overriding inherent table semantics
The following example would be fine, except that the "presentation" role has been added to the <table> element. This attribute overrides the default semantics of the data table causing assistive technology to treat the structure as static text content and not a data table.
<table role="presentation">
<thead>
<tr>
<th>First</th>
<th>Last</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</tbody>
</table>