headers
et id
permettent de relier le contenu d'une cellule au titre de la colonne ou de la ligne à laquelle il est associé. Une personne n'ayant qu'une vision linéaire de ce tableau pourra donc en permanence savoir à quel en-tête est attaché la cellule dans laquelle elle se trouve. Ceci s'applique également aux tableaux à plusieurs entrées.TABLE
, en faisant une recherche dans le code source. TABLE
applicable, déterminer s'il y a des cellules de tableau avec deux niveaux logiques d'en-têtes ou plus ; si c'est le cas, identifier tous les en-têtes applicables
pour toutes ces cellules.scope
et/ou heders
et id
).Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.
headers
, id
ou scope
sont utilisés.TH
et TD
sont présentes et renseignées.
headers
, id
ou scope
sont utilisés.TH
et TD
sont présentes et renseignées.headers
/id
ou scope
sont utilisés. Vérifier que les balises TH
et TD
sont présentes et renseignées.C'est le développeur HTML qui implémente et évalue ce critère.
L'attribut id
sert à donner un identifiant unique à chaque en-tête de cellule. Cet attribut accompagne chaque balise TH
. L'attribut id
ne supporte pas les espaces et les accents.
<th id="col1">
headers
sert à créer un lien avec une ou plusieurs cellules d'en-tête. Il se place dans chaque balise TD
. Il peut faire référence à plusieurs identifiants d'en-tête. Ceci est notamment utile pour des tableaux à plusieurs entrées.<td headers="col1">
ou, pour un tableau avec des en-têtes de colonne et des en-têtes de ligne :<td headers="col1 rang1">contenu de la cellule</td>
Bon à savoir :
l'attribut scope
peut être utilisé au sein des tables ne présentant qu'un ou deux niveaux d'associations linéaires. Dans ce cas, il suffit simplement de placer cet attribut dans la balise TH
sans qu'il soit nécessaire de placer un attribut headers
dans les balises TD
correspondantes. Contrairement à l'attribut id
, l'attribut scope
n'est pas nécessairement un identifiant unique.
<th scope="col">en-tête</th>
A la lecture de l'extrait de code ci-dessous, on constate que les cellules de la seconde ligne du tableau ne sont pas reliées à leur en-tête de colonnes respectif, comme le sont les cellules des lignes suivantes. Ceci risque d'empêcher l'utilisateur de se situer dans le tableau dont il est alors obligé de mémoriser le nom de chaque colonne et leur ordre.
<table summary="température des 5 premiers jours de la semaine pour 3 villes">
<caption>températures de la semaine en fonction de la ville</caption>
<!-- ligne 1: entête des colonnes, ville + les 5 premiers jours -->
<thead>
<tr>
<th id="ville">ville</th>
<th id="lundi">lundi</th>
<th id="mardi">mardi</th>
<th id="mercredi">mercredi</th>
<th id="jeudi">jeudi</th>
<th id="vendredi">vendredi</th>
</tr>
</thead>
<tbody>
<!-- ligne 2: nom de la ville, données corespondantes -->
<tr>
<td>paris</td>
<td>10c°</td>
<td>8c°</td>
<td>10c°</td>
<td>12c°</td>
<td>10c°</td>
</tr>
<!-- ligne 3: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="toulouse">toulouse</td>
<td headers="toulouse lundi">13c°</td>
<td headers="toulouse mardi">11c°</td>
<td headers="toulouse mercredi">12c°</td>
<td headers="toulouse jeudi">14c°</td>
<td headers="toulouse vendredi">12c°</td>
</tr>
<!-- ligne 4: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="strasbourg">strasbourg</td>
<td headers="strasbourg lundi">7c°</td>
<td headers="strasbourg mardi">5c°</td>
<td headers="strasbourg mercredi">6c°</td>
<td headers="strasbourg jeudi">8c°</td>
<td headers="strasbourg vendredi">7c°</td>
</tr>
</tbody>
</table>
En corrigeant l'exemple précédent, nous associions chaque cellule de la première rangée à son en-tête. Il est à noter que l'attribut headers
accepte plusieurs valeurs séparées d'un espace. Ceci signifie concrètement qu'une même cellule de tableau peut être associée à plusieurs en-tête, par exemple, un en-tête de colonne et un en-tête de ligne.
La première cellule, contenant le nom de la ville est rattachée à l'en-tête de colonne "ville". Elle peut aussi servir d'en-tête de ligne. C'est la raison pour laquelle, elle comporte un identifiant. Ainsi, les cellules contenant les valeurs de température sont reliées à la fois au nom de la ville et au jour auxquels elles correspondent.
Un utilisateur navigant dans un tel tableau à l'aide d'un navigateur vocal, par exemple entendra les changements de lignes et de colonnes. S'il passe de colonne en colonne, il entendra le nom du jour correspondant. S'il passe de ligne en ligne, il entendra le nom de la ville correspondante.
<table summary="température des 5 premiers jours de la semaine pour 3 villes">
<caption>températures de la semaine en fonction de la ville</caption>
<!-- ligne 1: entête des colonnes, ville + les 5 premiers jours -->
<thead>
<tr>
<th id="ville">ville</th>
<th id="lundi">lundi</th>
<th id="mardi">mardi</th>
<th id="mercredi">mercredi</th>
<th id="jeudi">jeudi</th>
<th id="vendredi">vendredi</th>
</tr>
</thead>
<tbody>
<!-- ligne 2: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="paris">paris</td>
<td headers="paris lundi">10c°</td>
<td headers="paris mardi">8c°</td>
<td headers="paris mercredi">10c°</td>
<td headers="paris jeudi">12c°</td>
<td headers="paris vendredi">10c°</td>
</tr>
<!-- ligne 3: nom de la ville, données corespondantes -->
<tr>
<td headers="ville" id="toulouse">toulouse</td>
<td headers="toulouse lundi">13c°</td>
<td headers="toulouse mardi">11c°</td>
<td headers="toulouse mercredi">12c°</td>
<td headers="toulouse jeudi">14c°</td>
<td headers="toulouse vendredi">12c°</td>
</tr>
<!-- ligne 4: nom de la ville, donné©es corespondantes -->
<tr>
<td headers="ville" id="strasbourg">strasbourg</td>
<td headers="strasbourg lundi">7c°</td>
<td headers="strasbourg mardi">5c°</td>
<td headers="strasbourg mercredi">6c°</td>
<td headers="strasbourg jeudi">8c°</td>
<td headers="strasbourg vendredi">7c°</td>
</tr>
</tbody>
</table>
Tableau dont les cellules ne sont pas reliées à leur titre (format mp3, 65 ko)
Un tableau dont les cellules sont reliées à leur titre (format mp3, 65 ko)