Tableaux Certaines données sur le site sont présentées à l'intérieur de tableaux. Voici les précisions visuelles relatives à ces tableaux. Description Le style principal des tableaux qui se retrouvent dans le site est présenté par des exemples vivants ci-dessous. Le contour global de ce tableau est toujours constitué d’un filet de 2 pixels d’épaisseur. Les cellules intérieures, quant à elles, sont séparées par un filet de 1 pixel d’épaisseur. La 1re ligne du tableau contient les cellules d’en-têtes, celles-ci présentent le titre de chaque colonne. La 1re colonne de gauche du tableau peut contenir, quant à elle, les cellules des titres de chaque ligne. Le contenu textuel des cellules d’en-têtes et de titres doit être en caractère gras. Il se différencie ainsi du contenu des cellules intérieures qui présente les données en texte courant. Les cellules d’en-têtes et de titres doivent être distinguées par un fond de couleur bleu pâle pour assurer une bonne compréhension de la hiérarchie du tableau. Finalement, une marge sous le tableau est appliquée pour ne pas alourdir la page et pour séparer le tableau du contenu qui le suit. Autre tableau Outre les exemples détaillés dans cette page, un autre type de tableau est également utilisé dans les formulaires du site. Les styles graphiques précisés ci-dessus s’appliquent de la même façon sur ce tableau. Ce tableau n’a que la 1re ligne comme en-tête et ses cellules intérieures contiennent des champs de saisie. Tableau de 3 colonnes de largeur fixe En-tête de colonneEn-tête de colonne avec un texte très long lorem ipsum dolor sitEn-tête de colonneLorem ipsumABC10,00 $Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.DEF300,87 $Lorem ipsumGHILorem ipsum dolor sit amet, consectetur adipiscing elit, sed docididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsumJKL20,00 $ Tableau de 2 colonnes de largeur variable En-tête de colonneEn-tête de colonneLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labOuiLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labNonLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labOuiLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labPeut-être Tableau plus complexe, avec titre de tableau (<caption>) et en-têtes de rangée, etc. Titre du tableau (caption) Cellule en-tête colonne 1 Cellule en-tête colonne 2 Cellule en-tête colonne 3 Cellule en-tête colonne 4 Cellule en-tête colonne 5 Cellule en-tête rangée 1er janvier 15 janvier 13 0 Titre encadré Texte de l’encadré dans un tableau. Cellule en-tête rangée 1er mars 30 juin 120 120 Cellule en-tête rangée 1er septembre 1er décembre 90 90 Accessibilité Il existe 2 types de tableaux : de présentation et de données (simple et complexe). Tableau de présentation Un tableau de présentation est un tableau de mise en page. Il est utilisé pour aligner divers éléments. Ce type de tableau est à éviter lorsque possible. Il est préférable d’utiliser à la place des balises <div> positionnées avec le CSS afin d’aligner les éléments. S’il est impossible de retirer ce type de tableau, il faut s’assurer qu’il ne contient pas de balises <th> et qu’un attribut role="none" est ajouté sur la balise <table>. Exemple : <table role="none">. Cet attribut permet à l’utilisateur de lecteur d’écran de ne pas se faire annoncer qu’il y a un tableau avec x colonnes et x lignes. Tableau de données Un tableau de données sert à comparer ou à présenter diverses données. Un tableau de données comporte au moins une ligne ou une colonne d’en-tête de cellules. Ces cellules doivent être codées avec la balise <th> pour que l’utilisateur de lecteur d’écran puisse naviguer à travers le tableau et se faire annoncer les en-têtes liés aux cellules. Les cellules de données et d’en-têtes ne doivent pas être fusionnées, idéalement. S’il est impossible de l’éviter, un attribut scope doit être ajouté sur la cellule d’en-tête <th>. Cet attribut devra être alimenté comme en-tête de colonne (scope="col") ou de ligne (scope="row"). Ainsi, le lecteur d’écran annoncera le bon en-tête avec la bonne cellule. Si le tableau comporte des cellules de données vides, une bonne pratique consiste à ajouter un texte hors écran dans la cellule où le texte pourrait être « Sans objet », « Non disponible », etc. Il arrive très fréquemment qu’un tableau possède une ligne d’en-têtes de colonne et une colonne d’en-têtes de ligne. Il faut savoir qu’un utilisateur de lecteur d’écran navigue de gauche à droite et de haut en bas dans un tableau et se fait annoncer l’en-tête qui change. Ainsi, s’il navigue dans la même colonne, il va se faire annoncer l’en-tête de ligne de chaque nouvelle ligne. S’il navigue dans la même ligne, il va se faire annoncer l’en-tête de colonne de chaque nouvelle colonne. C’est pour cette raison qu'il est préférable d’avoir des en-têtes de ligne et de colonne. Tableau complexe de données Un tableau complexe de données est un tableau de données comportant au moins 2 lignes d’en-têtes de colonne ou 2 colonnes d’en-têtes de ligne. Ce type de tableau est à éviter, car il est difficile à comprendre pour un utilisateur ayant des troubles cognitifs et peut également être complexe pour un utilisateur de lecteur d’écran. Il est souhaitable, dans un tel cas, de simplifier le tableau ou de le découper en plusieurs plus petits tableaux. Si toutefois un tableau complexe est nécessaire, 2 méthodes permettent de le rendre accessible : S’il ne comporte pas trop de cellules fusionnées, le tableau peut être accessible en ajoutant des attributs scope. Il faut alors valider avec le lecteur d’écran si les attributs scope suffisent.S’il comporte beaucoup de cellules fusionnées ou de cellules d’en-têtes (lorsqu’un tableau aborde 2 sujets et qu’il y a présence d’une ligne d’en-tête au début du tableau et au milieu afin d’introduire le second sujet), il faudra lier chaque cellule de données à ses cellules d’en-tête. Pour ce faire, il faudra ajouter un attribut id différent sur chaque cellule d’en-tête. Il faudra ensuite ajouter un attribut headers sur chaque cellule de données ou d’en-tête qui possède une cellule d’en-tête. Chacun de ces attributs sera alimenté par le ou les id, séparés d’un espace des cellules d’en-tête liées.
