Remarques sur les tableaux et l'accessibilité
Si vous êtes dans le monde du développement ou de la conception Web depuis assez longtemps, vous avez peut-être utilisé un élément de table pour donner à votre site Web une mise en page à plusieurs colonnes. Au fil des ans, ce modèle est devenu obsolète lorsque la communauté dans son ensemble a adopté CSS pour réaliser la mise en page.
L'une des nombreuses raisons pour lesquelles l'utilisation d'un tableau pour la mise en page a été décidée comme une mauvaise pratique était pour la même raison que d'autres éléments HTML sont utilisés correctement ; sémantique. Lors du balisage d'un site Web avec un élément de table pour la mise en page, il s'agit d'un problème d'accessibilité puisque le contenu n'est pas réellement des données tabulaires. Nous voulons nous assurer que ce que nos utilisateurs lisent et interagissent avec le sens du contenu présenté.
Quand utiliser un tableau ?
Parfois, cette question peut se poser lors de l'examen d'une conception à mettre en œuvre :
"Comment baliser ce contenu ? Est-ce un tableau ? Peut-être s'agit-il d'une liste ? Comment puis-je le savoir ?"
Utiliser l'élément HTML approprié pour générer la signification sémantique et le contexte de la technologie d'assistance n'est pas toujours facile. En ce qui concerne les tableaux, une règle générale à suivre est la suivante :
"Si le contenu peut être aligné dans une application de feuille de calcul et avoir des colonnes et des lignes clairement définies, il y a de fortes chances que l'utilisation d'un table transmette le contexte et la signification sémantique appropriés."
En d'autres termes, utiliser un table n'est pas mauvais, tant qu'il est utilisé pour produire du contenu tabulaire.
L'attribut scope
Pour que la technologie d'assistance, telle que les lecteurs d'écran, établisse la connexion entre les cellules d'en-tête de colonne/ligne ( th ) et la cellule actuelle, l'attribut scope doit être mis en place.
Il y a deux utilisations de l'attribut scope à considérer : sur un en-tête de colonne et un en-tête de ligne.
Portée de l'en-tête de colonne
Lorsque vous utilisez un th élément dans une section thead d'un tableau, assurez-vous d'appliquer l'attribut scope . En définissant sa valeur sur "col", cela annoncera le contenu de l'en-tête de colonne à côté de la cellule actuelle, donnant un contexte à ce à quoi le contenu de la cellule fait référence.
Cela serait généralement appliqué à chaque th élément dans une thead de titre :
<thead> <tr> <th scope="col">Title</th> <th scope="col">Director</th> <th scope="col">Release Date</th> </tr> </thead>
Étendue de l'en-tête de ligne
Lorsque vous utilisez un th élément dans une section tbody d'un tableau, assurez-vous d'appliquer l'attribut scope . Définir sa valeur sur "row" annoncera le contenu de l'en-tête de ligne à côté de la cellule actuelle, donnant un contexte à ce à quoi le contenu de la cellule fait référence.
Cela serait généralement appliqué à la première th cellule dans l'élément tr . D'autres cellules td ne comporteraient pas cet attribut :
<tbody> <tr> <th scope="row">Star Wars: Episode IV - A New Hope</th> <td>George Lucas</td> <td>May 25th, 1977</td> </tr> <!-- ... --> </tbody>
Suppression accidentelle de la sémantique
Lors de l'application de propriétés CSS spécifiques à un élément de table , il est possible de supprimer accidentellement la sémantique du tableau. Cela générera une mauvaise expérience utilisateur pour les personnes utilisant la technologie d'assistance pour consommer et comprendre les données du tableau ; la table elle-même peut ne pas être transmise comme une table du tout.
Par exemple, lors de la suppression du style de border par défaut, les navigateurs supposeront, au nom de vos utilisateurs, que ce tableau est destiné à être utilisé pour la mise en page, ou un "tableau de mise en page". L'heuristique intégrée des navigateurs modernes fera cette hypothèse en raison du fait que, historiquement, les bordures ont été supprimées pour les tableaux de disposition.
C'est pourquoi il est essentiel de tester manuellement votre code. Ajoutez le chargement d'un lecteur d'écran dans le cadre de votre flux de travail quotidien. Effectuez des tests rapides après avoir franchi une étape majeure ou peut-être même à la fin de votre journée de travail afin de détecter tout bogue nouvellement introduit avant de lancer la production.
Tableaux par e-mail
Il est encore courant, même aujourd'hui, d'utiliser la disposition des tableaux lors de la création d'e-mails HTML. Et puisque nous savons que l'utilisation d'un élément table pour réaliser la mise en page est un problème d'accessibilité, comment contourner cette limitation ?
Suppression de la sémantique
La meilleure méthode pour éviter qu'un e-mail soit incorrectement transmis en tant que "tableau" serait de supprimer complètement sa signification sémantique. Cela peut être accompli en appliquant l'attribut role à la table et en définissant sa valeur sur "présentation".
<table role="presentation" ...> <!-- ... --> </table>
Avec cette valeur de role définie sur la table , son contenu sera annoncé en texte brut, comme si l'élément table n'était pas là du tout. Cela permet d'éviter le problème du contenu des e-mails annoncé sous forme de table . Bien sûr, tous les autres HTML sémantiques du table seront annoncés comme prévu.
Lors de l'application de l'attribut de role , assurez-vous de tester votre implémentation pour vous assurer que la signification sémantique correcte est transmise aux utilisateurs de lecteurs d'écran.
Critères de réussite WCAG
Cela revient à 1.3.1 Infos et Relations et 4.1.2 Nom, Rôle, Valeur qui stipule :
"Les informations, la structure et les relations véhiculées par la présentation peuvent être déterminées par programme ou sont disponibles dans le texte."
"Pour tous les composants de l'interface utilisateur (y compris, mais sans s'y limiter : les éléments de formulaire, les liens et les composants générés par des scripts), le nom et le rôle peuvent être déterminés par programme ; les états, les propriétés et les valeurs pouvant être définis par l'utilisateur peuvent être définis par programme ; et la notification des modifications apportées à ces éléments est disponible pour les agents utilisateurs, y compris les technologies d'assistance."