En-têtes à plusieurs niveaux

Conception avec des en-têtes à plusieurs niveaux

Un tableau comportant des en-têtes à plusieurs niveaux comporte trois en-têtes empilés, ou des en-têtes de colonne qui se répètent ou changent au milieu d’un tableau.

Pour associer des en-têtes à plusieurs niveaux avec des cellules de données:

  • Donner à chaque en-tête une valeur d’attribut id unique.
  • Faire référence à ces valeurs d’attribut id dans l’attribut header des cellules de données.

L’utilisation de la technique des attributs id/header est une solution de dernier recours, car elle n’est pas bien prise en charge par les technologies d’assistance à l’heure actuelle (2021). Bien que le « bon » tableau ci-dessous soit techniquement conforme, il donne de mauvais résultats avec les lecteurs d’écran.

Important : Dans la mesure du possible, simplifiez la présentation des données en divisant un tableau complexe en au moins deux tableaux plus simples.

Il se peut qu’un sommaire de tableau soit nécessaire. Les en-têtes de colonne qui se répètent ou changent à mi-chemin d’un tableau peuvent facilement dérouter les utilisateurs de lecteurs d’écran lorsqu’ils descendent dans les rangées. Il en va de même pour les en-têtes de rangée couvrant une colonne. Dans le sommaire du tableau, mentionnez leur présence.

 Bon exemple : Tableau avec trois en-têtes empilés

Dans cet exemple, les en-têtes de rangée sont empilés par trois, ce qui nécessite l’utilisation d’un balisage id/header pour associer les cellules de données à leurs en-têtes. Le validateur de tableau BOEW fournit le balisage id/header. Une description de tableau visuellement masquée est imbriquée dans la légende.

Véhicules loués par le gouvernement La colonne 1 énumère les véhicules de fonction et les véhicules ne rentrant pas dans la catégorie des véhicules de fonction. La colonne 2 indique le pays (le Canada ou les États-Unis). La colonne 3 indique la durée du bail (long terme ou court terme). La colonne 4 énumère les exigences liées à la politique.
Type de véhicule Pays Durée du bail Exigences liées à la politique
de fonction CANADA long terme

Assurance commerciale complète, y compris la garantie collision et la responsabilité civile'

- s’auto-assurer pour la franchise -
court terme

ssurance commerciale complète, y compris la garantie collision et la responsabilité civile;

- s’auto-assurer pour la franchise -
U.S. long-term

Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;

- s’auto-assurer pour la franchise -
court terme

Acheter une assurance commerciale supplémentaire pour couvrir la responsabilité civile et la garantie collision pour les risques aux É.-U.;

- s’auto-assurer pour la franchise -
autre que de fonction CANADA long erme

Auto-assurance sauf si une loi provinciale s’applique
court terme

Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;

- s’auto-assurer pour la franchise -
É.-U. long terme

Acheter une assurance commerciale supplémentaire pour couvrir la responsabilité civile et la garantie collision pour les risques aux É.-U;

- s’auto-assurer pour les dommages pouvant toucher un véhicule du gouvernement -
court terme

tiliser la couverture d’assurance commerciale (responsabilité civile et collision pour les risques américains) administrée par le Secteur de la gestion des services et des acquisitions spécialisées. TPSGC;

- s’auto-assurer pour la franchise -
Voir un extrait HTML - Attribuer les attributs id et headers 
<tr>
   <th id="tbl6">Type de véhicule</th>
   <th id="tbl7">Pays</th>
   <th id="tbl8">Durée du bail</th>
   <th id="tbl9">Exigences liées à la politique</th>
</tr>
<tr>
   <th rowspan="4" id="tbl12" headers="tbl6">de fonction</th>
   <th rowspan="2" id="tbl13" headers="tbl7 tbl12">CANADA</th>
   <th id="tbl14" headers="tbl8 tbl12 tbl13">long terme</th>
   <td headers="tbl9 tbl12 tbl13 tbl14">
      <p>Assurance commerciale complète, y compris la garantie collision et la responsabilité civile'</p> 
      <p>- s’auto-assurer pour la franchise -</p>
   </td>
</tr>
Voir le HTML complet 
<table class="table small">
   <caption>
      éhicules loués par le gouvernement
      <span class="wb-inv">La colonne 1 énumère les véhicules de fonction et les véhicules ne rentrant pas dans la catégorie des véhicules de fonction. La colonne 2 indique le pays (le Canada ou les États-Unis). La colonne 3 indique la durée du bail (long terme ou court terme). La colonne 4 énumère les exigences liées à la politique.</span>
   </caption>
   <tbody>
      <tr>
         <th id="tbl6">Type de véhicule</th>
         <th id="tbl7">Pays</th>
         <th id="tbl8">Durée du bail</th>
         <th id="tbl9">Exigences liées à la politique</th>
      </tr>
      <tr>
         <th rowspan="4" id="tbl12" headers="tbl6">de fonction</th>
         <th rowspan="2" id="tbl13" headers="tbl7 tbl12">CANADA</th>
         <th id="tbl14" headers="tbl8 tbl12 tbl13">long terme</th>
         <td headers="tbl9 tbl12 tbl13 tbl14">
            <p>Assurance commerciale complète, y compris la garantie collision et la responsabilité civile'</p> 
            <p>- s’auto-assurer pour la franchise -</p>
         </td>
      </tr>
      <tr>
         <th id="tbl25" headers="tbl8">court terme</th>
         <td headers="tbl9 tbl12 tbl13 tbl25">
            <p>ssurance commerciale complète, y compris la garantie collision et la responsabilité civile;</p> 
            <p>- s’auto-assurer pour la franchise -</p>
         </td>
      </tr>
      <tr>
         <th rowspan="2" id="tbl30" headers="tbl7">U.S.</th>
         <th id="tbl31" headers="tbl8 tbl30">long-term</th>
         <td headers="tbl9 tbl12 tbl30 tbl31">
            <p>Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;</p> 
            <p>- s’auto-assurer pour la franchise -</p>
         </td>
      </tr>
      <tr>
         <th id="tbl36" headers="tbl8">court terme</th>
         <td headers="tbl9 tbl12 tbl30 tbl36">
            <p>Acheter une assurance commerciale supplémentaire pour couvrir la responsabilité civile et la garantie collision pour les risques aux É.-U.;</p> 
            <p>- s’auto-assurer pour la franchise -</p>
         </td>
      </tr>
      <tr>
         <th rowspan="4" id="tbl41" headers="tbl6">autre que de fonction</th>
         <th rowspan="2" id="tbl42" headers="tbl7 tbl41">CANADA
         </th>
         <th id="tbl43" headers="tbl8 tbl41 tbl42">long erme</th>
         <td headers="tbl9 tbl41 tbl42 tbl43">
            <p>Auto-assurance sauf si une loi provinciale s’applique</p>
         </td>
      </tr>
      <tr>
         <th id="tbl48" headers="tbl8">court terme</th>
         <td headers="tbl9 tbl41 tbl42 tbl48">
            <p>Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;</p> 
            <p>- s’auto-assurer pour la franchise -</p>
         </td>
      </tr>
      <tr>
         <th rowspan="2" id="tbl53" headers="tbl7">É.-U.</th>
         <th id="tbl54" headers="tbl8 tbl53">long terme</th>
         <td headers="tbl9 tbl41 tbl53 tbl54">
            <p>Acheter une assurance commerciale supplémentaire pour couvrir la responsabilité civile et la garantie collision pour les risques aux É.-U;</p> 
            <p>- s’auto-assurer pour les dommages pouvant toucher un véhicule du gouvernement -</p>
         </td>
      </tr>
      <tr>
         <th id="tbl59" headers="tbl8">court terme/th>
         <td headers="tbl9 tbl41 tbl53 tbl59">
            <p>tiliser la couverture d’assurance commerciale (responsabilité civile et collision pour les risques américains) administrée par le Secteur de la gestion des services et des acquisitions spécialisées. <abbr title="Travaux publics et Services gouvernementaux Canada">TPSGC</abbr>;</p> 
            <p>- s’auto-assurer pour la franchise -</p>
         </td>
      </tr>
   </tbody>
</table>

  Bon exemple : Tableau à plusieurs niveaux simplifié

Le tableau de l’exemple précédent est trop complexe et nécessite une technique id/header difficilement prise en charge. Une meilleure approche consiste à diviser un tableau complexe en au moins deux tableaux plus petits. Dans cet exemple, le « Type de véhicule » (de fonction ou non) est déplacé de la colonne 1 à la légende du tableau, ce qui aboutit à un tableau pour les véhicules de fonction et un deuxième tableau pour les véhicules qui ne sont pas des véhicules de fonction. Les tableaux plus simples sont composés de deux niveaux d’en-têtes; ils peuvent donc être rendus en utilisant l’attribut scope plutôt qu’en utilisant les attributs id/header. L'attribut scope est plus facile à rédiger et à tenir à jour, et elle est mieux prise en charge par les agents utilisateurs que la méthode id/header.

Les véhicules non exécutif loués par le gouvernement
Pays Durée du bail Exigences liées à la politique
CANADA long terme

Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;
court terme

Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;

- s’auto-assurer pour la franchise -
É.-U. long terme

Acheter une assurance commerciale supplémentaire pour couvrir la responsabilité civile et la garantie collision pour les risques aux É.-U.;

- s’auto-assurer pour la franchise

court terme

Utiliser la couverture d’assurance commerciale (responsabilité civile et collision pour les risques américains) administrée par le Secteur de la gestion des services et des acquisitions spécialisées. TPSGC

- s’auto-assurer pour la franchise -
Voir le HTML 
<table class="table table-bordered table-hover small">
   <caption>Les véhicules non exécutif loués par le gouvernement</caption>
   <thead>
    <tr>
      <th scope="col">Pays</th>
      <th scope="col">Durée du bail</th>
      <th scope="col">Exigences liées à la politique</th>
    </tr>
   </thead>
   <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">CANADA</th>
      <th scope="row">long terme</th>
      <td>
       <p>Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;</p>
      </td>
    </tr>
    <tr>
      <th scope="row">court terme</th>
      <td>
       <p>Assurance commerciale complète, y compris la garantie collision et la responsabilité civile;</p>
       <p>- s’auto-assurer pour la franchise -</p>
      </td>
    </tr>
   </tbody>
   <tbody>
    <tr>
      <th rowspan="2" scope="rowgroup">É.-U.</th>
      <th scope="row">long terme</th>
      <td>
       <p>Acheter une assurance commerciale supplémentaire pour couvrir la responsabilité civile et la garantie collision pour les risques aux É.-U.;</p>
       <p>- s’auto-assurer pour la franchise </p>
      </td>
    </tr>
    <tr>
      <th scope="row">court terme</th>
      <td>
       <p>Utiliser la couverture d’assurance commerciale (responsabilité civile et collision pour les risques américains) administrée par le Secteur de la gestion des services et des acquisitions spécialisées. <abbr title="Travaux publics et Services gouvernementaux Canada"></abbr>TPSGC</abbr></p>
       <p>- s’auto-assurer pour la franchise -</p>
      </td>
    </tr>
   </tbody>
</table>

  Bon exemple : Tableau avec trois en-têtes liés à chaque cellule de données

Dans cet exemple, les en-têtes du tableau « Biologique (1 kg) » et « Non biologique (1 kg) » servent de sous-titres pour décrire la section suivante du tableau. En utilisant l’attribut header, les trois en-têtes sont correctement associés à la cellule de données.

Cet exemple montre comment placer le tableau dans un élément <figure>, comme décrit dans la section Légende et sommaire. Plutôt que d'utiliser un élément <caption>, <figcaption> contient le titre du tableau, dans un élément <strong>, ainsi qu'un résumé du tableau pour faciliter la compréhension. Les attributs aria-labelledby et aria-describedby sur l'élément <table> pointe respectivement sur le titre et le résumé, ce qui rend les associations plus fortes et plus fiables dans les technologies d'assistance.

À noter que la cellule d’en-tête vide reçoit une valeur d’attribut id et un espace insécable comme contenu. La cellule est référencée par des en-têtes de haut niveau dans leur attribut header. Cela empêche certaines technologies d’assistance de lire le contenu de la cellule.

Coût des produits biologiques et non biologiques, par pays

La première colonne énumère des produits biologiques suivis par des produits non biologiques; les autres colonnes présentent le coût des produits par pays.

  Canada É.-U. R.-U.
Organic (1kg)
Pommes $3.62 $4.87 $2.69
Bananes $1.47 $1.68 $1.60
Oignons $2.28 $2.81 $1.44
Non-organic (1kg)
Pommes $3.37 $4.53 $2.50
Bananes $1.37 $1.56 $1.49
Oignons $2.12 $2.61 $1.34
Extrait de HTML - Attribution des attributs id aux cellules <th> 
[…]
    <tr> 
      <td id="blank"> </td>  
      <th id="can" headers="blank">Canada</th> 
      <th id="usa" headers="blank">É.-U.</th> 
      <th id="uk" headers="blank">R.-U.</th> 
    </tr> 
  </thead> 
  <tbody> 
    <tr>  
      <th id="org" class="span" colspan="4" headers="blank">Organic (1kg)</th> 
    </tr> 
    <tr> 
      <th headers="org" id="o-apples">Pommes</th> 
[…]
Extrait de HTML - Assignation de l’attribut header aux cellules td 
[…]
<td headers="org o-apples can">$3.62</td> 
<td headers="org o-apples usa">$4.87</td>
[…]
Voir HTML complet 
<figure> 
   <figcaption>  
      <strong id="caption">Coût des produits biologiques et non biologiques, par pays</strong>  
      <p id="summary">La première colonne énumère des produits biologiques suivis par des produits non biologiques; les autres colonnes présentent le coût des produits par pays.</p>  
   </figcaption>  
   <table aria-labelledby="caption" aria-describedby="summary" class="table table-bordered table-hover">   
      <thead>  
         <tr> 
            <td id="blank"> </td>  
            <th id="can" headers="blank">Canada</th> 
            <th id="usa" headers="blank">É.-U.</th> 
            <th id="uk" headers="blank">R.-U.</th> 
         </tr> 
      </thead> 
      <tbody> 
         <tr>  
            <th id="org" class="span" colspan="4" headers="blank">Organic (1kg)</th> 
         </tr> 
         <tr> 
            <th headers="org" id="o-apples">Pommes</th> 
            <td headers="org o-apples can">$3.62</td> 
            <td headers="org o-apples usa">$4.87</td> 
            <td headers="org o-apples uk">$2.69</td> 
         </tr> 
         <tr> 
            <th headers="org" id="o-bananas">Bananes</th>  
            <td headers="org o-bananas can"> $1.47</td> 
            <td headers="org o-bananas usa">$1.68</td> 
            <td headers="org o-bananas uk">$1.60</td> 
         </tr> 
         <tr> 
            <th headers="org" id="o-onions">Oignons</th> 
            <td headers="org o-onions can">$2.28</td> 
            <td headers="org o-onions usa">$2.81</td> 
            <td headers="org o-onions uk">$1.44</td>  
         </tr> 
         <tr> 
            <th id="non-org" class="span" colspan="4" headers="blank">Non-organic (1kg)</th> 
         </tr>  
         <tr>  
            <th id="n-apples" headers="non-org">Pommes</th> 
            <td headers="non-org n-apples can">$3.37</td> 
            <td headers="non-org n-apples usa">$4.53</td> 
            <td headers="non-org n-apples uk">$2.50</td> 
         </tr>  
         <tr> 
            <th id="n-bananas" headers="non-org">Bananes</th> 
            <td headers="non-org n-bananas can">$1.37</td> 
            <td headers="non-org n-bananas usa">$1.56</td>  
            <td headers="non-org n-bananas uk">$1.49</td>  
         </tr>  
         <tr>  
            <th id="n-onions" headers="non-org">Oignons</th>  
            <td headers="non-org n-onions can">$2.12</td> 
            <td headers="non-org n-onions usa">$2.61</td>  
            <td headers="non-org n-onions uk"> $1.34</td>  
         </tr>  
      </tbody>  
   </table>  
</figure>

Ressources WCAG connexes

Ressources WCAG connexes

Critères de succès

Techniques

Haut de la page