Tableaux adaptés

Conception de tableaux adaptés

Les tableaux de grande taille qui débordent de la zone d’affichage ne sont pas adaptés. Il est difficile pour les utilisateurs de se rappeler quelle information ils regardent si les en-têtes de ligne et de colonne défilent hors de vue. Suivre ces conseils pour éviter les débordements:

  • Utiliser un pourcentage plutôt que des pixels fixes pour définir la largeur des colonnes et des tableaux
  • Diviser les tableaux de grande taille ou largeur en plusieurs tableaux plus petits ou étroits
  • Afficher une barre de défilement horizontale si l’écran est trop petit ou afficher le tableau complet (exemple de débordement)
  • Rendre les tableaux plus étroits comme suit:
    • Réduire le nombre de colonnes
    • Fusionner des colonnes
    • Utiliser des acronymes ou des abréviations pour les mots longs
    • Ajouter d’un tiret conditionnel ­ pour couper les mots longs
  • Redimensionner les tableaux en fonction de la zone d’affichage (exemple de redimensionnement)

Veuillez noter que le critère de succès des WCAG 1.4.10: Reflow exempte les tableaux de données des exigences de reformatage. Il est acceptable de faire défiler les tableaux de données. Le système de conception de Canada.ca et la BOEW ne comportent aucune fonctionnalité permettant de transformer et de réorganiser les tableaux, comme le montrent les exemples ci-dessous.

 Bon exemple : Débordement du tableau avec barre de défilement horizontale

Dans cet exemple, un grand tableau débordant force une barre de défilement horizontale sur l’élément <div> parent, générée par la déclaration CSS overflow-x: auto. Le <div> utilise l’attribut tabindex="0" pour s’assurer que la barre de défilement reçoit la cible du clavier (conformément à la règle W3C-IAW TIA Scrollable element is keyboard accessible (l’élément de défilement est accessible au clavier)). Comme le <div> est un taquet de tabulation, nous l'identifions aux utilisateurs de lecteurs d'écran avec un nom (le titre du tableau "Sprints" via aria-labelledby) et un rôle ("group").

Il est toujours préférable de diviser les grands tableaux en plusieurs petits tableaux.

Sprints
Sprint # Fermé En cours Nouveau Refaire un test Réouverture Par sévérité Par priorité Par sprint Par sortie
101 234 55 75 121 33 566 343 577 976
102 344 33 65 887 66 564 344 76 543
103 290 32 77 93 82 138 532 293 202

HTML

<div style="overflow-x:auto;" tabindex="0" role="group" aria-labelledby="tbl-caption">
   <table>
      <caption id="tbl-caption">Sprints</caption>
      […]
   </table>
</div>
Voir les captures d'écran

Bureau

Capture d'écran d'une grande table.

Cellulaire

Capture d'écran d'une grande table avec une barre de défilement horizontale après redimensionnement.

 Bon exemple : Reformater en une liste imbriquée

Dans l’exemple ci-dessous, il y a deux structures distinctes - une liste et une table. Mais une seule est visible à l’écran à la fois. Le tableau se transforme en une liste imbriquée si la largeur de l’affichage du navigateur est inférieure à 768 pixels. La liste imbriquée demeure dans la zone d’affichage pour éviter le défilement horizontal.

Redimensionner la fenêtre du navigateur pour voir l’effet.

Résumé du compte
Compte Date d'échéance Balance Date du relevé
Mastercard - 5555 04/01/2021 $5,390 03/01/2021 - 03/31/2021
Visa - 5155 03/01/2020 $2,013 02/01/2020 - 02/29/2020
AMEX - 9010 03/01/2020 $3,251 02/01/2020 - 02/29/2020
Capital One - 8800 02/01/2021 $4,842 01/01/2021 - 01/31/2021

Résumé du compte

  • Mastercard – 5555
    • Date d'échéance: 04/01/2021
    • Balance: $5,390
    • Date du relevé: 03/01/2021 - 03/31/2021
  • Visa – 5155
    • Date d'échéance: 03/01/2020
    • Balance: $2,013
    • Date du relevé: 02/01/2020 - 02/29/2020
  • AMEX – 9010
    • Date d'échéance: 03/01/2020
    • Balance: $3,251
    • Date du relevé: 02/01/2020 - 02/29/2020
  • Capital One – 8800
    • Date d'échéance: 02/01/2021
    • Balance: $4,842
    • Date du relevé: 01/01/2021 - 01/31/2021
Voir les captures d'écran de la mise en page réactive

Desktop

Une table conventionnelle avec quatre en-têtes de colonne et quatre en-têtes de rangée

Mobile

Table transformée en liste imbriquée
Voir le CSS 

#desktop-table {
    display:none;
}

#mobile-list {
    display:block;
}

#mobile-list ul {
    position: relative;
}

#mobile-list ul {
  list-style-type: none;
}

#mobile-list ul li {
    font-weight:bold;
}

#mobile-list ul li ul li {
    font-weight:normal;
}

#desktop-table {
   border: 0px solid #777; 
   border-collapse: collapse; 
   padding: 0px;
   width: 100%;
   table-layout: fixed; 
}

#desktop-table caption {
   font-size: 1.2em; 
   margin: .5em 0 .75em;
}

#desktop-table th,td {
   padding: .625em; 
   text-align: center; 
   border: 1px solid #777;
   background-color:white;
}

#desktop-table thead th{
   letter-spacing: .1em;
   text-transform: uppercase; 
   border-bottom: 3px solid #777;
}

@media screen and (min-width: 767px) {

    #desktop-table {
        display:block;
    }

    #mobile-list {
        display:none;
    }
}
Voir le HTML 
<table id="desktop-table">
   <caption>Résumé du compte</caption>
   <thead>
      <tr>
         <th scope="col">Compte</th>
         <th scope="col">Date d'échéance</th>
         <th scope="col">Balance</th>
         <th scope="col">Date du relevé</th>
      </tr>
   </thead>
   <tbody> 
      <tr> 
         <th scope="row">Mastercard - 5555</th> 
         <td>04/01/2021</td> 
         <td>$5,390</td> 
         <td>03/01/2021 - 03/31/2021</td> 
      </tr> 
      <tr> 
         <th scope="row">Visa - 5155</th> 
         <td>03/01/2020</td> 
         <td>$2,013</td> 
         <td>02/01/2020 - 02/29/2020</td> 
      </tr> 
      <tr> 
         <th scope="row">AMEX - 9010</th> 
         <td>03/01/2020</td> 
         <td>$3,251</td> 
         <td>02/01/2020 - 02/29/2020</td> 
      </tr> 
      <tr> 
         <th scope="row">Capital One - 8800</th> 
         <td>02/01/2021</td> 
         <td>$4,842</td> 
         <td>01/01/2021 - 01/31/2021</td> 
      </tr> 
   </tbody>
</table>

<div id="mobile-list">
   <h3>Résumé du compte</h3>
   <ul>
     <li>Mastercard – 5555 
        <ul>
           <li>Date d'échéance: 04/01/2021</li>
           <li>Balance: $5,390</li>
           <li>Date du relevé: 03/01/2021 - 03/31/2021</li>
        </ul>
     </li>
     <li>Visa – 5155
        <ul>
           <li>Date d'échéance: 03/01/2020</li>
           <li>Balance: $2,013</li>
           <li>Date du relevé: 02/01/2020 - 02/29/2020</li>
        </ul>
     </li>
     <li>AMEX – 9010
        <ul>
           <li>Date d'échéance: 03/01/2020</li>
           <li>Balance: $3,251</li>
           <li>Date du relevé: 02/01/2020 - 02/29/2020</li>
        </ul>
     </li>
     <li>Capital One – 8800 
        <ul>
           <li>Date d'échéance: 02/01/2021</li>
           <li>Balance: $4,842</li>
           <li>Date du relevé: 01/01/2021 - 01/31/2021</li>
        </ul>
     </li>
   </ul>
</div>

 Mauvais example: Reformater le tableau en une seule colonne

Dans l’exemple ci-dessous, le tableau est reformaté à une colonne si la largeur du navigateur est inférieure à 768 pixels, ce qui maintient la lisibilité sans qu’un défilement horizontal soit nécessaire.

La technique consiste à empiler les cellules du tableau les unes sur les autres, à masquer les en-têtes de colonne et à les reproduire à gauche de la cellule comme des en-têtes de rangée. Les en-têtes de rangée sont créés avec le contenu généré par CSS, en s’appuyant sur la valeur d’un attribut personnalisé data-label. Malheureusement, comme indiqué dans le module 7, le texte généré par CSS échoue aux WCAG.

HTML

<td data-label="Account">Mastercard - 5555</td>

CSS

@media screen and (max-width: 767px) {
   table td::before {
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
   }
}

Redimensionner la fenêtre du navigateur pour voir l’effet.

Résumé du compte
Compte Date d'échéance Balance Date du relevé
Mastercard - 5555 04/01/2021 $5,390 03/01/2021 - 03/31/2021
Visa - 5155 03/01/2020 $2,013 02/01/2020 - 02/29/2020
AMEX - 9010 03/01/2020 $3,251 02/01/2020 - 02/29/2020
Capital One - 8800 02/01/2021 $4,842 01/01/2021 - 01/31/2021
Voir les captures d'écran de la mise en page réactive

Bureau

Un tableau classique avec quatre en-têtes de colonne et quatre en-têtes de ligne.

Cellulaire

Les en-têtes de colonne sont maintenant des en-têtes de ligne, empilés par groupes de quatre, chaque groupe contenant une ligne de données.
Voir le CSS 
table { 
   border: 1px solid #ccc; 
   border-collapse: collapse; 
   margin: 0; 
   padding: 0;
   width: 100%;
   table-layout: fixed; 
} 
table caption { 
   font-size: 1.2em; 
   margin: .5em 0 .75em;
} 
table th, 
table td {
   padding: .625em; 
   text-align: center; 
   border: 1px solid #CCC;
} 
table thead th {
   letter-spacing: .1em;
   text-transform: uppercase; 
} 
@media screen and (max-width: 767px) { 
   table { 
      border: 0; 
   } 
   table caption { 
      font-size: 1.2em; 
   } 
   table thead { 
      border: none;
      clip: rect(0 0 0 0); 
      height: 1px; 
      margin: -1px; 
      overflow: hidden; 
      padding: 0;
      position: absolute; 
      width: 1px;
   } 
   table tr { 
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: 1em;
   }
   table td, table tbody th { 
      border-bottom: 1px solid #ddd; 
      display: block; 
      text-align: right; 
      width:95%;
   } 
   table td::before, 
   table tbody th::before { 
      content: attr(data-label); 
      float: left; 
      font-weight: bold; 
      text-transform: uppercase; 
   }
   table td:last-child { 
      border-bottom: 0; 
   } 
}
Voir le HTML 
<table>
   <caption>Résumé du compte</caption>
   <thead>
      <tr>
         <th scope="col">Compte</th>
         <th scope="col">Date d'échéance</th>
         <th scope="col">Balance</th>
         <th scope="col">Date du relevé</th>
      </tr>
   </thead>
   <tbody> 
      <tr> 
         <th scope="row" data-label="Compte">Mastercard - 5555</th> 
         <td data-label="Date d'échéance">04/01/2021</td> 
         <td data-label="Montant">$5,390</td> 
         <td data-label="Periode">03/01/2021 - 03/31/2021</td> 
      </tr> 
      <tr> 
         <th scope="row" data-label="Compte">Visa - 5155</th> 
         <td data-label="Date d'échéance">03/01/2020</td> 
         <td data-label="Montant">$2,013</td> 
         <td data-label="Periode">02/01/2020 - 02/29/2020</td> 
      </tr> 
      <tr> 
         <th scope="row" data-label="Compte">AMEX - 9010</th> 
         <td data-label="Date d'échéance">03/01/2020</td> 
         <td data-label="Montant">$3,251</td> 
         <td data-label="Periode">02/01/2020 - 02/29/2020</td> 
      </tr> 
      <tr> 
         <th scope="row" data-label="Compte">Capital One - 8800</th> 
         <td data-label="Date d'échéance">02/01/2021</td> 
         <td data-label="Montant">$4,842</td> 
         <td data-label="Periode">01/01/2021 - 01/31/2021</td> 
      </tr> 
   </tbody>
</table>

Ressources WCAG connexes

Ressources WCAG connexes

Critères de succès

Échecs

Haut de la page