Tableaux

31 janvier 2023

Faire de la mise en forme
Tableaux simples
- Sémantique
- Équivalents ARIA
Équivalents ARIA
Tableaux complexes

Faire de la mise en forme

Même si leur utilisation pour faire de la mise en forme n'est pas interdite cela n'est pas conseillée
Si c'est tout de même utilisé pour faire de la mise en en forme, il ne faut pas utiliser des balises ou d’attributs de tableaux de données :
<th> <thead> <tfoot> <caption> scope headers colgroup axis role="columnheader" role="rowheader"
role="presentation" sur la balise table
Cette propriété supprime la sémantique du tableau, penser à redonner de la structure aux textes (titres, paragraphes, listes ...) dans ces cas.
Si la propriété summary="" est présente (HTML4), videz la !

<table role="presentation">
    <tr>
        <td>
            <p>Retrouvez nos vidéos d’informations !…</p>
        </td>
    </tr>
</table>

Tableaux simples

Sémantique

Un titre <caption>
Si le tableau est précédé d'un titre et que le <caption> est non nécessaire, il faut relié ce titre via un aria-labelledby=""
```
<h2 id="exemple">Mon titre</h2>
<table aria-labelledby="exemple">
    ...
</table>
```

Déclaration des entêtes <th scope="[col|row]">
Permets d'indiquer la direction de la cellule d'entête
Le scope est obligatoire si plusieurs entré

<table>
    <caption>Parc et fréquentation des autres hébergements collectifs touristiques en 2018</caption>
    <tr>
        <th scope="col">Type d’hébergement professionnel</th>
        <th scope="col">Nombre d’établissements</th>
        [...]
    </tr>
    <tr>
        <td>Résidences de tourisme</td>
        <td>2 426</td>
        [...]
    </tr>
</table>

Équivalents ARIA

Tableau : role="table"
Titre : aria-label="Nom du tableau" ou aria-labelledby="id_titre"
Entêtes de colonne : role="columnheader"
Entêtes de rangée : role="rowheader"
Cellules : role="cell"

<p id="titre">Parc et fréquentation des autres hébergements collectifs touristiques en 2018</p>
<div role="table" aria-labelledby="titre">

    <div role="row">
        <div role="columnheader">Type d’hébergement professionnel</div>
        <div role="columnheader">Nombre d’établissements</div>
        [...]
    </div>

    <div role="row">
        <div role="cell">Résidences de tourisme</div>
        <div role="cell">2 426</div>
        [...]
    </div>

</div>

Tableaux complexes

Un tableau est complexe quand il contient plus d'une ligne d'entête (col ou row) ou s'il y a des fusions cellule

Titre et résumé de l’organisation du tableau

Dans le caption ou via le aria-labelledby="", mettre le titre + un résumé de l’organisation du tableau (HTML5)
Pour le résumé pour les versions précédentes de HTML, le mettre dans summary=""(HTML4)

<caption>
    Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
    manufacturière par type en 2016
    <span class="sr-only">
        Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
        sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
        de tonnes le pourcentage. Une troisième colonne présente le total des deux industries,
        en milliers de tonnes et en pourcentage.
    </span>
</caption>

Le sommaire, pouvant être utile à d'autres usagers que ceux utilisant un lecteur d'écran, il est préférable de le mettre dans un bloc qui s'affiche via un bouton de type afficher / masquer

<caption>
    Figure 2 - Répartition des déchets non dangereux non minéraux hors boues de l’industrie
    manufacturière par type en 2016
    <button type="button" aria-expanded="false">Résumé de l’organisation du tableau</button>
    <span class="hide">
        Les industries agroalimentaires (IAA) et les industries manufacturières (hors IAA)
        sont présentées sur 2 colonnes, avec, pour chacune d’elles la quantité en milliers
        de tonnes le pourcentage. Une troisième colonne présente le total des deux industries,
        en milliers de tonnes et en pourcentage.
    </span>
</caption>

Version alternative

Pour les tableaux complexes préférés une alternative car cela inclura tout le monde et non seulement les lecteurs d'écran (et c'est plus simple à développer !)

Passage en mode liste par exemple
On affiche un bouton pour afficher la version alternative

Plus besoin de mettre le résumé et header s'il y a une alternative

Cellules d’en-têtes

Identifier les cellules d’en-têtes via un attribut id et lier les cellules de données via l’attribut headers.

Exemple : headers="id_1 id_2".

<tr>
    <td aria-hidden="true"></td>
    <th id="entete1" colspan="2">Industries agroalimentaires (IAA)</th>
    <th id="entete2" colspan="2">Industries manufacturières (hors IAAA)</th>
    <th id="entete3" colspan="2">Ensemble</th>
</tr>
<tr>
    <td aria-hidden="true"></td>
    <th id="entete4">Quantités (en milliers de tonnes)</th>
    <th id="entete5">en %</th>
    <th id="entete6">Quantités (en milliers de tonnes)</th>
    <th id="entete7">en %</th>
    [...]
</tr>
<tr>
    <td>Déchets banals</td>
    <td headers="entete1 entete4">1 147</td>
    <td headers="entete1 entete5">31</td>
    <td headers="entete2 entete6">9 795</td>
    <td headers="entete2 entete7">97</td>
    [..]
</tr>