Data table

Impact: High to major

Users mainly impacted: Blind, severely visually impaired, mentally and cognitively impaired.

RGAA criteria: Criterion 5.4 - Criterion 5.5 - Criterion 5.6 - Criterion 5.7

Explanation

A simple data table contains header cells distributed only on the first row and/or column of the table. Their scope is valid for the entire column or row. The attributes rowspan and colspan are not used in the <th> tags.

Here is an example of simple data table:

Average monthly temperature over the year 2016 at Brest and Lyon.
Brest Lyon
June 18°C 26°C
July 19°C 27°C

An optional relevant caption

In a simple data table, an optional caption can be added. If it exists, it must be relevant by clearly identifying the table.

The caption can be implemented as follows:

  • Using a <caption> tag directly below the <table> tag (recommended method, best support);
  • Using a title attribute on the <table> tag;
  • Using a aria-label attribute on the <table> tag;
  • Using a aria-labelledby attribute on the <table> tag, where the value matches the id of an element of the page (e.g. a previous heading or paragraph).
<table>
    <caption>Average monthly temperature over the year 2016 at Brest and Lyon.</caption>
...
<h2 id="table-title">Average monthly temperature over the year 2016 at Brest and Lyon.</h2>
<table aria-labelledby="table-title">
...

Associate cells with their headers

The cells and the headers must be associated as follows:

  • Row and column headers must be identified with the <th> tag;
  • Row headers must use the scope attribute with the value row;
  • Column headers must use the scope attribute with the value col.
...
    <tr>
        <td></td>
        <th scope="col">Brest</th>
        <th scope="col">Lyon</th>
    </tr>
    <tr>
        <td>18°C</td>
        <td>26°C</td>
    </tr>
</table>