Tableaux simples
Un tableau de données simple comporte une seule ligne d'entête, une seule colonne d'entête ou une double entête (ligne et colonne).
Structure du tableau de données simple
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> - 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 cellules d’entête de ligne et de colonne seront encadrées par les balises
<th>...</th>. - 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 colonne entière, on écrira
<th scope="col">
L’attribut scope définit la direction des cellules d’en-tête et les associe aux cellules de données correspondantes.
L’attribut scope est indispensable pour les tableaux volumineux.
Exemples de tableau simple
Visuel
| Date | Événement | Lieu |
|---|---|---|
| 16 mars | Sensibilisation au handicap | Salle Ada Lovelace |
| 7 mai | Conférence « numérique et handicap » | Salle Hedy Lamarr |
| 21 juillet | Hackathon accessibilité | Salle Grace Hopper |
Code HTML
<table ...>
<caption>Les événements à ne pas rater</caption>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Événement</th>
<th scope="col">Lieu</th>
</tr>
</thead>
<tbody>
<tr>
<td>16 mars</td>
<td>Sensibilisation au handicap</td>
<td>Salle Ada Lovelace</td>
</tr>
<tr>
<td>7 mai</td>
<td>Conférence « numérique et handicap »</td>
<td>Salle Hedy Lamarr</td>
</tr>
<tr>
<td>21 juillet</td>
<td>Hackathon accessibilité</td>
<td>Salle Grace Hopper</td>
</tr>
</tbody>
</table>
Visuel
| Date | 16 mars | 7 mai | 21 juillet |
|---|---|---|---|
| Événement | Sensibilisation au handicap | Conférence « numérique et handicap » | Hackathon accessibilité |
| Lieu | Salle Ada Lovelace | Salle Hedy Lamarr | Salle Grace Hopper |
Code HTML
<table>
<caption>Les événements à ne pas rater</caption>
<tr>
<th scope="row">Date</th>
<td>16 mars</td>
<td>7 mai</td>
<td>21 juillet</td>
</tr>
<tr>
<th scope="row">Événement</th>
<td>Sensibilisation au handicap</td>
<td>Conférence « numérique et handicap »</td>
<td>Hackathon accessibilité</td>
</tr>
<tr>
<th scope="row">Lieu</th>
<td>Salle Ada Lovelace</td>
<td>Salle Hedy Lamarr</td>
<td>Salle Grace Hopper</td>
</tr>
</table>
Visuel
| Type de handicap | Nombre de personnes concernées (en million) |
|---|---|
| Déficience visuelle | 1.7 |
| Déficience auditive | 1.6 |
| Handicap physique | 2.3 |
| Handicap cognitif | 0.7 |
Code HTML
<table ...>
<caption>Répartition des handicaps selon le type</caption>
<thead>
<tr>
<th scope="col">Type de handicap</th>
<th scope="col">Nombre de personnes concernées (en million)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Déficience visuelle</th>
<td>1.7</td>
</tr>
<tr>
<th scope="row">Déficience auditive</th>
<td>1.6</td>
</tr>
<tr>
<th scope="row">Handicap physique</th>
<td>2.3</td>
</tr>
<tr>
<th scope="row">Handicap cognitif</th>
<td>0.7</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 ».
astuce
Un exemple de tableau responsive, s'affichant sans ascenseur horizontal sur un écran de largeur 320px, est disponible dans la rubrique Motifs de conception - Tableau.