Tableaux

Bonne utilisation

Points de conformité :

• Utilisez des tableaux pour afficher des données tabulaires comme des renseignements financiers, statistiques, comparatifs ou numériques
• Utilisez .table pour appliquer un style de tableau de base
• Utilisez du texte d'en-tête uniforme dans les tableaux liés
  • Par exemple, utilisez l'en-tête « Nom » pour la liste de toutes les personnes-ressources, et non divers titres comme « Personnes-ressources », « Nom » ou « Utilisateur »
• Insérez un trait d'union (-) dans les cellules de données vides
  • Le trait d'union (-) permet au lecteur d'écran de lire correctement le contenu comme étant « vide », et il s'affiche correctement lorsqu'il est grossi
• Incluez l'élément approprié scope="col" ou scope="row" dans la balise <th>
• Insérez une balise de titre descriptive <h*>directement au-dessus d'un tableau lorsque celui-ci ne comporte pas de balise <caption>
• Incluez une tableau légende visible lorsque le titre de <h*> ne se trouve pas directement au-dessus du tableau, ou si plusieurs tableaux apparaissent en-dessous d'une balise <h*>
  • Utilisez une balise <caption> sur toutes les tableaux afin qu'ils valident et, en plus d'être accessible et descriptif (surtout dans des pages statistiques ou financières qui comportent plusieurs tableaux)
  • Utilisez .wb-inv (au besoin) pour rendre invisible la légende du tableau, tout en assurant cependant l'accessibilité
• Comprenez et mettez en œuvre les principes à l'appui connexes

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
• N'utilisez pas les tableaux à des fins de mise en page
• N'utilisez pas title="" à l'intérieur de la balise <table>
• À l'intérieur d'un tableau, n'inscrivez pas S.O. ou   ne laissez pas non plus de cellules vides
  • Ceci empêchera les problèmes liés aux lecteurs d'écran
• Évitez les cellules fusionnées, puisqu'elles sont complexes à coder et qu'elles présentent des problèmes d'accessibilité

Code

// En-tête au-dessus d'un tableau :
<h*>...</h*>
<table class="table">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>
   <tr>
     <th scope="col">...</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>...</td>
   <tr>
  </tbody>
</table>

// Cellules vides dans un tableau:
<table class="table">
<caption class="wb-inv">c</caption>
<thead>
    <tr>
     <th scope="col">...</th>
     <th scope="col">...</th>
    </tr>
  </thead>
  <tbody>
   <tr>
    <td>-</td>
    <td>-</td>
   <tr>
  </tbody>
</table>

// Légende du tableau :
<table class="table">
  <caption>Texte de la légende</caption>
    <thead>...</thead>
    <tbody>...</tbody>
</table>

Bonne utilisation

Points de conformité :

• Assurez-vous que la largeur du tableau <table> dans son ensemble, ainsi que celle de chaque colonne <th>, conviennent au contenu
  • Les tableaux qui ont trop d'espaces blancs (trop grande séparation) ou trop peu d'espaces blancs (entassement) sont difficiles à lire
• Insérez la balise <table> dans un conteneur approprié pour limiter la taille globale du tableau

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cette composante d'une façon qui entre en conflit avec les points de conformité précédent(s)
• N'appliquez pas la même largeur à tous les tableaux d'une page simplement pour des raisons de conception

Code

// Tableau avec une colonne limitée et une largeur globale
<div class="col-md-3">
 <table class="table">
 <caption class="wb-inv">Texte de la légende</caption>
   <thead>
   <tr>
      <th scope="col" class="col-sm-8">...</th>
      <th scope="col" class="col-sm-4">...</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>...</td>
     <td>...</td>
    </tr>
   </tbody>
 </table>
</div>

Bonne utilisation

Points de conformité :

• Utilisez .table-striped dans <tbody> pour mieux distinguer les rangées les unes des autres
• L'utiliser principalement dans les tableaux longs et complexes

Mauvaise utilisation

Points de conformité :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<table class="table table-striped">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Bonne utilisation

Point d'observation :

• Utilisez .table-hover pour permettre à l'utilisateur de mettre chaque rangée en surbrillance lorsqu'il fait glisser son curseur au-dessus

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<table class="table table-hover">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Bonne utilisation

Points de conformité :

• Utilisez .table-bordered pour séparer des renseignements lorsque les cellules d'un tableau comprennent beaucoup de données, et utilisez le retour automatique à la ligne
  • Cela permet à l'utilisateur d'associer facilement les renseignements aux cellules

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents

Code

<table class="table table-bordered">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Bonne utilisation

Point d'observation :

• Utilisez .table-condensed pour rétrécir la hauteur des rangées

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<table class="table table-condensed">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Bonne utilisation

Points de conformité :

• Faites envelopper .table dans .table-responsive lorsque le tableau est large et nécessite un défilement horizontal sur les appareils mobiles
• Divisez les tableaux volumineux en tableaux plus petits pour rendre le contenu plus convivial

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

<div class="table-responsive">
<table class="table">
 <caption class="wb-inv">Texte de la légende</caption>
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

Bonne utilisation

Points de conformité :

• .active: Applique la couleur sélectionnée par pointage à une rangée ou une cellule en particulier
• .success: Indique une action réussie ou positive
• .warning: Indique un avertissement qui pourrait exiger une attention particulière
• .danger: Indique une action dangereuse ou possiblement négative

Mauvaise utilisation

Point d'observation :

• N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents

Code

//Dans des rangées :
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>

//Dans des cellules de données ou d'en-tête (« td ») ou (« th ») :
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
</tr>