Légende et sommaire

Aperçu - Légende et sommaire

L’élément <caption> précise le nom ou le titre d’un tableau.

Un sommaire de tableau présente le but du tableau, décrit sa structure cellulaire de base, met en évidence les tendances ou les modèles et apprend généralement à l’utilisateur comment utiliser le tableau.

Identifier un tableau à l’aide d’une légende

L’élément <caption> est le premier enfant de l’élément <table>. Il sert de nom ou de titre abrégé pour le contenu du tableau. Sans légende, les utilisateurs du lecteur d’écran doivent naviguer dans les en-têtes de la rangée 1 ou dans la colonne 1, au moins pour déterminer de quoi traite le tableau.

Si la légende reproduit le titre précédent, masquer visuellement la légende avec la classe CSS de la BOEW. La reproduction est nécessaire puisque les utilisateurs du lecteur d’écran peuvent naviguer d’un tableau à l’autre en appuyant sur une touche, omettant un titre précédent.

Bon exemple: Légende

Dans cet exemple, « Films à l’affiche » indique aux utilisateurs quelle information se trouve dans le tableau.

L'exemple commence

Films à l’affiche
Date	Film	Lieux
12 fév	Spiderman - The Dark Fate	AMC Toronto
24 mars	Avengers	AMC Mississauga
14 avr	Superman 4	Cineplex London

L'exemple finit

Voir le HTML

Début du code

<table>
  <caption>Films à l’affiche</caption>
  <tr>
   <th>Date</th>
   <th>Film</th>
   <th>Locations</th>
  </tr>
  <tr>
   <td>12 Fev</td>
   <td>Spiderman - The Dark Fate</td>
   <td>AMC Toronto</td>
  </tr>
  <tr>
   <td>24 mars</td>
   <td>Avengers</td>
   <td>AMC Mississauga</td>
  </tr>
  <tr>
   <td>14 avr</td>
   <td>Superman 4</td>
   <td>Cineplex London</td>
  </tr>
</table>

Fin du code

Sommaire pour les tableaux complexes

Dans le cas des tableaux complexes, les sommaires devraient inclure des renseignements explicatifs pour présenter l’objet du tableau, décrire sa composition, souligner les tendances et apprendre à l’utilisateur comment utiliser le tableau.

Dans la mesure du possible, convertir les tableaux complexes en tableaux ou listes simples, de sorte qu’une explication moindre ou nulle ne soit requise.

Si la légende et le sommaire sont fournis pour un tableau, le sommaire ne doit pas reproduire l’information présentée dans la légende.

Il existe différentes façons de présenter des sommaires de tableaux complexes :

Imbriquer le sommaire dans l’élément <caption>
Placer le sommaire dans un paragraphe précédant ou suivant le tableau. Faites renvoi à l’attribut id du paragraphe à partir d’un attribut aria-describedby dans l’élément <table>.
Utiliser les éléments <figure> et <figcaption> pour marquer un sommaire de tableau. Réglez les attributs aria-labelledby et aria-describedby dans l’élément <table> :
- Utilisez l’attribut aria-labelledby pour faire renvoi à la valeur de l’attribut id de l’élément <caption> du tableau.
- Utilisez l’attribut aria-describedby pour faire renvoi à la valeur de l’attribut id de l’élément <figcaption> renfermant le sommaire.

Bon exemple : Imbriquer le sommaire dans l’élément caption

Dans l’exemple ci-dessous, le tableau complexe montre le nombre d’étudiants inscrits dans deux pays pendant quatre semestres. L’élément <caption> sert d’en-tête du tableau et fournit un sommaire décrivant la structure du tableau.

L'exemple commence

Renseignements sur le nombre d’étudiants inscrits La première colonne contient le pays et les programmes; les autres colonnes présentent le semestre. Les cellules contiennent le nombre d’étudiants inscrits.
É.-U.
	Hiver	Printemps	Été	Automne
MBA	40	80	125	93
MS	60	83	152	132
Diplôme	66	103	115	20
Canada
MBA	113	81	122	33
MS	87	53	143	90
Diplôme	39	16	32	40

L'exemple finit

Voir le HTML

Début du code

<table class="table table-bordered table-hover">
   <caption>
      Renseignements sur le nombre d’étudiants inscrits
      <div style="font-weight: normal">La première colonne contient le pays et les programmes; les autres colonnes présentent le semestre. Les cellules contiennent le nombre d’étudiants inscrits.</div>
  </caption>
  <thead>
   <tr>
	  <td></td>
	  <th id="winter">Hiver</th>
	  <th id="spring">Printemps</th>
	  <th id="summer"> Été</th>
	  <th id="fall">Automne</th>
   </tr>
  </thead>
  <tbody>
   <tr>
	  <th id="usa" class="span" colspan="5">É.-U.</th>
   </tr>
   <tr>
	 <th headers="usa" id="usmba">MBA</th>
	 <td headers="usa usmba winter">40</td>
	 <td headers="usa usmba spring">80</td>
	 <td headers="usa usmba summer">125</td>
	 <td headers="usa usmba fall">93</td>
   </tr>
   <tr>
	 <th headers="usa" id="usms">MS</th>
	 <td headers="usa usms winter">60</td>
	 <td headers="usa usms spring">83</td>
	 <td headers="usa usms summer">152</td>
	 <td headers="usa usms fall">132</td>
   </tr>
   <tr>
	 <th headers="usa" id="usdip">Diplôme</th>
	 <td headers="usa usdip winter">66</td>
	 <td headers="usa usdip spring">103</td>
	 <td headers="usa usdip summer">115</td>
	 <td headers="usa usdip fall">20</td>
   </tr>
   <tr>
	 <th id="can" class="span" colspan="5">Canada</th>
   </tr>
   <tr>
	 <th id="camba" headers="can">MBA</th>
	 <td headers="can camba winter">113</td>
	 <td headers="can camba spring">81</td>
	 <td headers="can camba summer">122</td>
	 <td headers="can camba fall">33</td>
   </tr>
   <tr>
	 <th id="cams" headers="can">MS</th>
	 <td headers="can cams winter">87</td>
	 <td headers="can cams spring">53</td>
	 <td headers="can cams summer">143</td>
	 <td headers="can cams fall">90</td>
   </tr>
   <tr>
	 <th id="cadip" headers="can">Diplôme</th>
	 <td headers="can cadip winter">39</td>
	 <td headers="can cadip spring">16</td>
	 <td headers="can cadip summer">32</td>
	 <td headers="can cadip fall">40</td>
   </tr>
  </tbody>
</table>

Fin du code/p>

Bon exemple : Utiliser aria-describedby pour fournir un sommaire du tableau

Dans cet exemple, le sommaire précède le tableau dans un élément de paragraphe. Le tableau prend un attribut aria-describedby qui contient la valeur d’attribut id du paragraphe.

HTML

Début du code

<p id="tblDesc">La première colonne contient le pays et les programmes; les autres colonnes indiquent le semestre. Les cellules contiennent le nombre d’étudiants inscrits.</p> 
<table aria-describedby="tblDesc">[…]</table>

Fin du code

Bon exemple : Utiliser l’élément figcaption pour contenir le sommaire du tableau

Dans cet exemple, le tableau est enveloppé dans un élément <figure> tandis que l’élément <figcaption> contient la légende et le texte du sommaire.

Le titre du tableau dans l’élément <figcaption>; est explicitement associé au tableau en utilisant l’attribut aria-labelledby.

Le paragraphe sommaire de l’élément <figcaption> est explicitement associé au tableau en utilisant l’attribut aria-describedby.

L'exemple commence

Informations sur le nombre d’étudiants inscrits

La première colonne indique le pays et les différents programmes; les autres colonnes indiquent le type de semestre et le nombre d’étudiants inscrits.

É.-U.
	Hiver	Printemps	Été	Automne
MBA	40	80	125	93
MS	60	83	152	132
Diplôme	66	103	115	20

L'exemple finit

Voir le HTML

Début du code

<figure>
     <figcaption>
      <strong id="studentinfo-caption">États-Unis : Informations sur le nombre d’étudiants inscrits</strong>
      <span id="studentinfo-summary" style="display: block">La première colonne indique le pays et les différents programmes; les autres colonnes indiquent le type de semestre et le nombre d’étudiants inscrits.</span>
     </figcaption>
     <table class="table table-bordered table-hover" aria-labelledby="studentinfo-caption" aria-describedby="studentinfo-summary">
      <thead>
      <tr>
        <td></td>
        <th id="winter-b" scope="col">Hiver</th>
        <th id="spring-b" scope="col">Printemps</th>
        <th id="summer-b" scope="col">Été</th>
        <th id="fall-b" scope="col">Automne</th>
      </tr>
     </thead>
     <tbody>
      <tr>
        <th id="usa-b" class="span" colspan="5" scope="colgroup">É.-U.</th>
      </tr>
      <tr>
        <th headers="usa-b" id="usmba1">MBA</th>
        <td headers="usa-b usmba1 winter-b">40</td>
        <td headers="usa-b usmba1 spring-b">80</td>
        <td headers="usa-b usmba1 summer-b">125</td>
        <td headers="usa-b usmba1 fall-b">93</td>
      </tr>
      <tr>
        <th headers="usa-b" id="usms2">MS</th>
        <td headers="usa-b usms2 winter-b">60</td>
        <td headers="usa-b usms2 spring-b">83</td>
        <td headers="usa-b usms2 summer-b">152</td>
        <td headers="usa-b usms2 fall-b">132</td>
      </tr>
      <tr>
        <th headers="usa-b" id="usdip3"> Diplôme </th>
        <td headers="usa-b usdip3 winter-b"> 66 </td>
        <td headers="usa-b usdip3 spring-b"> 103 </td>
        <td headers="usa-b usdip3 summer-b"> 115 </td>
        <td headers="usa-b usdip3 fall-b"> 20 </td>
      </tr>
     </tbody>
   </table>
</figure>

Fin du code

Ressources WCAG connexes

Critères de succès

1.3.1 : Information et relations

Techniques

Haut de la page