Tableaux complexes
Un tableau de données complexe est un tableau dont les cellules d'entête s'étendent sur plusieurs colonnes et/ou lignes. Plusieurs éléments et attributs peuvent être utilisés pour définir la structure et les relations de l'entête et des cellules de données.
Structure du tableau de données complexe
Les tableaux de données devront respecter les règles d’accessibilité suivantes :
- Le tableau de données aura un titre, celui-ci doit être balisé avec l’élément HTML
<caption> - un groupe de lignes est défini par les éléments
thead,tbodyettfoot:- Les éléments
theadettfootne peuvent être utilisés qu’une seule fois dans un tableau ; - Un tableau peut avoir n’importe quel nombre d’éléments
tbody; chaque élémenttbodydéfinissant un groupe de lignes. - Les lignes d’entête seront encadrées par les balises
<thead>...</thead> - Les lignes de données seront encadrées par les balises
<tbody>...</tbody>
- Les éléments
- Les cellules d’entête de ligne et de colonne seront encadrées par les balises
<th>...</th>. colgroupetcolpeuvent être utilisé pour grouper et identifier des colonnes au sein d’un tableau.- On implémentera l’attribut
scopesur les balises<th>:- si la cellule d’entête porte sur la ligne complète, on écrira
<th scope="row"> - si la cellule d’entête porte sur la un groupe de lignes et s’applique à toutes ses cellules, on écrira
<th scope="rowgroup"> - si la cellule d’entête porte sur la colonne entière, on écrira
<th scope="col"> - si la cellule d’entête porte sur un groupe de colonne et concerne toutes ses cellules, on écrira
<th scope="colgroup">
- si la cellule d’entête porte sur la ligne complète, on écrira
- Une autre façon de coder le tableau consiste à utiliser les attributs
headersetid;headerssera appliqué sur la cellule de données et contriendra lesiddes cellules d’entête correspondantes.
Résumé du tableau de données complexe
Lorsque le tableau de données est complexe, il est important d’en proposer un résumé. Différentes techniques peuvent être utilisées pour fournir ce résumé aux utilisateurs.
caption
L’élément caption, qui propose un titre de tableau, peut fournir également le résumé qui décrit la composition du tableau.
Visuel
| Studio | Appartement | Maison | Villa avec piscine | |
|---|---|---|---|---|
| Paris | ||||
| 1 chambre | 11 | 20 | 25 | - |
HTML
<table>
<caption>Disponibilité des logements<br>
<span>La première colonne indique le nombre de chambre, les autres colonnes indiquent le type de logement et le nombre de logement disponible.</span>
</caption>
...
</table>
aria-describedby
aria-describedby fera référence à l’id d’un élément HTML qui présentera le résumé du tableau. Une bonne pratique consiste à proposer ce résumé à proximité du tableau.
<p id="description">La première colonne indique le nombre de chambre, les autres colonnes indiquent le type de logement et le nombre de logement disponible.</p>
<table aria-describedby="description">
<caption>Disponibilité des logements</caption>
...
</table>
Exemples de tableaux complexes
Visuel
| Température | Printemps | Été | Automne | Hiver | ||||
|---|---|---|---|---|---|---|---|---|
| Secteur | Minimale | Maximale | Minimale | Maximale | Minimale | Maximale | Minimale | Maximale |
| Nord | 17 | 13 | 0 | 0 | 13 | 7 | 13 | 7 |
| Sud | 17 | 13 | 0 | 0 | 13 | 7 | 13 | 7 |
| Est | 17 | 12 | 0 | 1 | 13 | 7 | 13 | 7 |
| Ouest | 17 | 12 | 0 | 1 | 13 | 7 | 13 | 7 |
Code HTML
<table>
<caption >Températures moyennes constatées</caption>
<thead>
<tr>
<th id="temperature">Température</th>
<th id="printemps" headers="temperature" colspan="2">Printemps</th>
<th id="ete" headers="temperature" colspan="2">Été</th>
<th id="automne" headers="temperature" colspan="2">Automne</th>
<th id="hiver" headers="temperature" colspan="2">Hiver</th>
</tr>
<tr>
<th id="nord">Secteur</th>
<th id="minimale-printemps" headers="nord printemps">Minimale</th>
<th id="maximale-printemps" headers="nord printemps">Maximale</th>
<th id="minimale-ete" headers="nord ete">Minimale</th>
<th id="maximale-ete" headers="nord ete">Maximale</th>
<th id="minimale-automne" headers="nord automne">Minimale</th>
<th id="maximale-automne" headers="nord automne">Maximale</th>
<th id="minimale-hiver" headers="nord hiver">Minimale</th>
<th id="maximale-hiver" headers="nord hiver">Maximale</th>
</tr>
<tr>
<th id="nord">Nord</th>
<td headers="nord printemps minimale-printemps">17</td>
<td headers="nord printemps maximale-printemps">13</td>
<td headers="nord ete minimale-ete">0</td>
<td headers="nord ete maximale-ete">0</td>
<td headers="nord automne minimale-automne">13</td>
<td headers="nord automne maximale-automne">7</td>
<td headers="nord hiver minimale-hiver">13</td>
<td headers="nord hiver maximale-hiver">7</td>
</tr>
<tr>
<th id="sud">Sud</th>
<td headers="sud printemps minimale-printemps">17</td>
<td headers="sud printemps maximale-printemps">13</td>
<td headers="sud ete minimale-ete">0</td>
<td headers="sud ete maximale-ete">0</td>
<td headers="sud automne minimale-automne">13</td>
<td headers="sud automne maximale-automne">7</td>
<td headers="sud hiver minimale-hiver">13</td>
<td headers="sud hiver maximale-hiver">7</td>
</tr>
<tr>
<th id="est">Est</th>
<td headers="est printemps minimale-printemps">17</td>
<td headers="est printemps maximale-printemps">12</td>
<td headers="est ete minimale-ete">0</td>
<td headers="est ete maximale-ete">1</td>
<td headers="est automne minimale-automne">13</td>
<td headers="est automne maximale-automne">7</td>
<td headers="est hiver minimale-hiver">13</td>
<td headers="est hiver maximale-hiver">7</td>
</tr>
<tr>
<th id="ouest">Ouest</th>
<td headers="ouest printemps minimale-printemps">17</td>
<td headers="ouest printemps maximale-printemps">12</td>
<td headers="ouest ete minimale-ete">0</td>
<td headers="ouest ete maximale-ete">1</td>
<td headers="ouest automne minimale-automne">13</td>
<td headers="ouest automne maximale-automne">7</td>
<td headers="ouest hiver minimale-hiver">13</td>
<td headers="ouest hiver maximale-hiver">7</td>
</tr>
</thead>
</table>
Visuel
| Matin | Après-midi | |||
|---|---|---|---|---|
| Min | Max | Min | Max | |
| Nord | 5oC | 8oC | 12oC | 23oC |
| Sud | 5oC | 10oC | 13oC | 25oC |
Code HTML
Un élément colgroup doit apparaître après tout élément caption et avant tout élément thead, th, tbody, tfoot et tr.
<table>
<caption>Températures observées</caption>
<colgroup>
<col span="2"></col>
<col span="2"></col>
</colgroup>
<tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Matin</th>
<th colspan="2" scope="colgroup">Après-midi</th>
</tr>
<tr>
<th scope="col">Min</th>
<th scope="col">Max</th>
<th scope="col">Min</th>
<th scope="col">Max</th>
</tr>
<tr>
<th scope="row">Nord</th>
<td>5<sup>o</sup>C</td>
<td>8<sup>o</sup>C</td>
<td>12<sup>o</sup>C</td>
<td>23<sup>o</sup>C</td>
</tr>
<tr>
<th scope="row">Sud</th>
<td>5<sup>o</sup>C</td>
<td>10<sup>o</sup>C</td>
<td>13<sup>o</sup>C</td>
<td>25<sup>o</sup>C</td>
</tr>
</table>
Visuel
| Nom de l'affiche | Couleur | Taille | ||
|---|---|---|---|---|
| Bouquet de fleurs | Multicolore | A2 | A3 | A4 |
| Noir et blanc | A1 | A2 | A3 | |
| Sépia | A3 | A4 | A5 | |
| Colibri en vol | Noir et blanc | A1 | A3 | A4 |
| Sépia | A2 | A3 | A5 | |
Code HTML
<table>
<caption>Disponilité des affiches</caption>
<col>
<col>
<colgroup span="3"></colgroup>
<thead>
<tr>
<th scope="col">Nom de l'affiche</th>
<th scope="col">Couleur</th>
<th colspan="3" scope="colgroup">Taille</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup">Bouquet de fleurs</th>
<th scope="row">Multicolore</th>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th scope="row">Noir et blanc</th>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<th scope="row">Sépia</th>
<td>A3</td>
<td>A4</td>
<td>A5</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2" scope="rowgroup">Colibri en vol</th>
<th scope="row">Noir et blanc</th>
<td>A1</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<th scope="row">Sépia</th>
<td>A2</td>
<td>A3</td>
<td>A5</td>
</tr>
</tbody>
</table>
Visuel
| Direction | Communication | |
|---|---|---|
| Contact | Nathalie Longchamps | Marie Beauchamp |
| Position | Directrice | Co-directrice |
| nl-dir@masociete.fr | mb-com@masociete.fr | |
| Marketing | Informatique | |
| Contact | Jean Martin | Camille Vertin |
| Position | Chef de service | Directeur |
| jm-mar@masociete.fr | cv-inf@masociete.fr |
Code HTML
Afin d’éviter à certains logiciels de synthèse vocale de lire la cellule d’entête vide (<th id="vide"> </th>), les cellules d’entête ayant du contenu sont liées via l’attribut headers à cette celulle vide.
<table>
<caption>Contacts de la société</caption>
<tbody>
<tr>
<th id="vide"> </th>
<th id="co1" headers="vide">Direction</th>
<th id="co2" headers="vide">Communication</th>
</tr>
<tr>
<th id="c1" headers="vide">Contact</th>
<td headers="co1 c1">Nathalie Longchamps</td>
<td headers="co2 c1">Marie Beauchamp</td>
</tr>
<tr>
<th id="p1" headers="vide">Position</th>
<td headers="co1 p1">Directrice</td>
<td headers="co2 p1">Co-directrice</td>
</tr>
<tr>
<th id="e1" headers="vide">Email</th>
<td headers="co1 e1">nl-dir@masociete.fr</td>
<td headers="co2 e1">mb-com@masociete.fr</td>
</tr>
<tr>
<th> </th>
<th id="co3" headers="vide">Marketing</th>
<th id="co4" headers="vide">Informatique</th>
</tr>
<tr>
<th id="c2" headers="vide">Contact</th>
<td headers="co3 c2">Jean Martin</td>
<td headers="co4 c2">Camille Vertin</td>
</tr>
<tr>
<th id="p2" headers="vide">Position</th>
<td headers="co3 p2">Chef de service</td>
<td headers="co4 p2">Directeur</td>
</tr>
<tr>
<th id="e2" headers="vide">Email</th>
<td headers="co3 e2">jm-mar@masociete.fr</td>
<td headers="co4 e2">cv-inf@masociete.fr</td>
</tr>
</tbody>
</table>
Visuel
| Studio | Appartement | Maison | Villa avec piscine | |
|---|---|---|---|---|
| Paris | ||||
| 1 chambre | 11 | 20 | 25 | - |
| 2 chambres | 21 | 43 | 52 | - |
| 3 chambres | 10 | 13 | 15 | - |
| Nice | ||||
| 1 chambre | 13 | 21 | 22 | 3 |
| 2 chambres | 11 | 23 | 7 | 1 |
| 3 chambres | 14 | 16 | 11 | 4 |
Code HTML
La tableau étant vraiement complexe, l’attributsummary a été ajouté pour fournir une explication sur la façon de lire le tableau.
<table summary="La première colonne indique le nombre de chambre, les autres colonnes indiquent le type de logement et le nombre de logement disponible.">
<caption>Disponibilité des logements de vacances</caption>
<thead>
<tr>
<td></td>
<th id="stud" scope="col">
Studio
</th>
<th id="App" scope="col">
Appartement
</th>
<th id="mais" scope="col">
Maison
</th>
<th id="villa" scope="col">
Villa avec piscine
</th>
</tr>
</thead>
<tbody>
<tr>
<th id="par" class="span" colspan="5" scope="colgroup">
Paris
</th>
</tr>
<tr>
<th headers="par" id="pchamb1">
1 chambre
</th>
<td headers="par pchamb1 stud">
11
</td>
<td headers="par pchamb1 App">
20
</td>
<td headers="par pchamb1 mais">
25
</td>
<td headers="par pchamb1 villa">
-
</td>
</tr>
<tr>
<th headers="par" id="pchamb2">
2 chambres
</th>
<td headers="par pchamb2 stud">
21
</td>
<td headers="par pchamb2 App">
43
</td>
<td headers="par pchamb2 mais">
52
</td>
<td headers="par pchamb2 villa">
-
</td>
</tr>
<tr>
<th headers="par" id="pchamb3">
3 chambres
</th>
<td headers="par pchamb3 stud">
10
</td>
<td headers="par pchamb3 App">
13
</td>
<td headers="par pchamb3 mais">
15
</td>
<td headers="par pchamb3 villa">
-
</td>
</tr>
<tr>
<th id="nice" class="span" colspan="5" scope="colgroup">
Nice
</th>
</tr>
<tr>
<th id="rchamb1" headers="nice">
1 chambre
</th>
<td headers="nice rchamb1 stud">
13
</td>
<td headers="nice rchamb1 App">
21
</td>
<td headers="nice rchamb1 mais">
22
</td>
<td headers="nice rchamb1 villa">
3
</td>
</tr>
<tr>
<th id="rchamb2" headers="nice">
2 chambres
</th>
<td headers="nice rchamb2 stud">
11
</td>
<td headers="nice rchamb2 App">
23
</td>
<td headers="nice rchamb2 mais">
7
</td>
<td headers="nice rchamb2 villa">
1
</td>
</tr>
<tr>
<th id="rchamb3" headers="nice">
3 chambres
</th>
<td headers="nice rchamb3 stud">
14
</td>
<td headers="nice rchamb3 App">
16
</td>
<td headers="nice rchamb3 mais">
11
</td>
<td headers="nice rchamb3 villa">
4
</td>
</tr>
</tbody>
</table>
Test de l’accessibilité du tableau
On veillera à ce que tous les contenus et toutes les fonctionnalités du tableau soient disponibles quelle que soit la taille de l’écran.
En particulier, on veillera à ne pas supprimer de fonctionnalités (menus, systèmes de filtres, cartes interactives, etc.) et/ou de contenus (tableaux de données, vidéos, etc.) sur les vues responsive.
On veillera aussi à ce que le contenu linéarisé du tableau reste compréhensible. Pour cela, avec l’extension de navigateur « web developper » cliquer :
- sur « Misceallanous »
- puis sur « Linearize page ».
remarque
Le critère 10.11 du RGAA mentionne Pour chaque page web, lorsque le contenu dont le sens de lecture est horizontal est affiché dans une fenêtre réduite à une largeur de 320px, l’ensemble des informations et des fonctionnalités sont-elles disponibles sans aucun défilement horizontal (hors cas particuliers) ?
. Les tableaux font partie des cas particuliers où l'ascenseur horizontal peut être affiché.