Créer des tableaux de données accessibles

Article original écrit par Frank M. Palinkas et accessible ici.
Traduction par Nicolas Chevallier, publiée le 02 janvier 2010.
Licence : Cette traduction est mise à disposition sous un contrat Creative Commons

Cet article montre comment coder des tableaux de données accessibles en (X)HTML, ce qui permet aux utilisateurs ayant une déficience visuelle d'utiliser des technologies d'assistance pour interpréter les données tabulaires. Deux vues d'un tableau de données sont présentées et détaillées dans ce document.

1. Source du balisage - Vue verticale : le balisage des tableaux comme écrit dans le code source d'une page/éditeur de texte
2. Source du balisage - Vue linéaire : le balisage des tableaux vu par un dispositif d'assistance.

Source du balisage : vue verticale

Voici comment un tableau de données accessible est affiché lorsqu'il est écrit dans un éditeur de texte. Chaque élément doit être correctement ouvert, fermé et correctement imbriqué.

<table summary="contient des données tabulaires accessibles">
    <caption>Tableau de données accessible</caption>
        <thead>
            <tr>
                <th scope="col">Colonne 1</th>
                <th scope="col">Colonne 2</th>
                <th scope="col">Colonne 3</th>
            </tr>     
        </thead>        
        <tfoot><tr><td colspan="3">Fin du tableau</td></tr></tfoot>        
        <tbody>        
            <tr>    
                <th scope="row">Ligne A</th>
                    <td>données</td>
                    <td>données</td>
            </tr>    
            <tr>    
                <th scope="row">Ligne B</th>
                    <td>données</td>
                    <td>données</td>
            </tr>        
            <tr>        
                 <th scope="row">Ligne C</th>   
                    <td>données</td>
                    <td>données</td>
            </tr>        
            <tr>       
                 <th scope="row">Ligne D</th> 
                    <td>données</td>
                    <td>données</td>
            </tr>     
        </tbody>         
</table>              

Le tableau se présente comme suit au moment du rendu par un navigateur :

Définir les balises

Commençons par décomposer les différentes parties du tableau :

Elément table - <table></table>

Cet élément commence et termine un tableau de données.

Attribut résumé - summary=""

Cet attribut est ajouté à la balise ouvrante table.

Il peut être reconnu par un lecteur d'écran, mais il ne sera pas rendu lors de l'affichage du tableau de données par un navigateur graphique.

Il est utilisé pour donner une idée générale de ce qui est contenu dans le tableau de données.

Important: Conformément avec les standards Web et directives d'accessibilité, essayez de toujours garder la description de l'attribut la plus courte possible.

Elément caption - <caption></caption>

Conformément aux standards du Web, l'élément caption devrait accompagner tous les tableaux HTML.

Sa balise d'ouverture vient directement après l'ouverture de la balise <table>.

Lorsqu'il est ajouté à votre balisage de données tabulaires, il:

• Donne un titre descriptif court concernant le tableau de données
• Est visible dans le navigateur
• Est facilement identifié par les technologies d'assistance
• Est détectable par les moteurs de recherche

Elément table header - <thead></thead>

À ne pas confondre avec le titre du tableau élément <th></th>, cet élément définit la section d'en-tête du tableau de données.

Sa balise d'ouverture est placée directement après la balise de fermeture caption </caption> et directement avant la première balise ouvrante <tr> du tableau de données.

Elément table footer - <tfoot></tfoot>

Cet élément définit la section de pied du tableau de données.

Cet élément est optionnel et peut être omis.

Note: Si vous l'utilisez, il doit être directement précéder la balise ouverte <tbody>

Attribut colspan - colspan=""

Cet attribut est ajouté à la balise ouvrante <td colspan="">, qui fait partie de la section pied de tableau.

Il sert à définir le nombre de colonnes que vous souhaitez fusionner entre les guillemets.

Il permet au pied de table d'englober toutes les colonnes, sans interruption, en éliminant les lignes verticales entre chaque colonne.

Elément corps de tableau - <tbody></tbody>

Cet élément définit la zone de corps du tableau et inclus son contenu.

Il vient directement après la balise fermante </tfoot> et avant la balise ouvrante <tr>

Elément ligne de tableau - <tr></tr>

Cet élément marque le début et la fin d'une ligne de tableau de données.

table d'éléments rubrique - <th></th>

Cet élément identifie les lignes et les colonnes d'un tableau de données.

On peut maintenant appliquer l'attribut scope scope="" dans la balise ouvrante de l'en-tête du tableau <th scope=""> pour définir les lignes et les colonnes.

attribut scope - scope=""

On peut utiliser l'attribut scope pour déclarer un élément de l'entête du tableau <th></th> comme étant une ligne ou une colonne.

Il est inséré dans la balise ouvrante de l'en-tête du tableau, comme par exemple <th scope="row"></th>.

Elément du tableau de données - <td></td>

Cet élément contient des données tabulaires.

Il est situé à l'intersection d'une colonne et d'une ligne.

Source du balisage : vue linéaire

Le balisage est rédigé de manière verticale (comme dans le bloc de code précédent - Source du balisage: vue verticale). Le tableau suivant illustre les données de la table des éléments de balisage et les attributs dans l'ordre linéaire, comme ayant été rendu par un agent utilisateur.

Linéarisation par les différentes technologies d'assistance

Maintenant que nous avons vu le balisage source en mode linéaire, nous allons voir comment une technologie d'assistance la traite. Ces dispositifs de lecture d'un tableau commencent par la première cellule de la première rangée (1, 1), et continuent horizontalement jusqu'à la fin de cette ligne (1, 3). Ils se déplacent ensuite à la première cellule de la rangée suivante et continuent jusqu'à à la fin de cette ligne, et ainsi de suite jusqu'à la fin du tableau ... Comme dans ce cas (2,1) est défini comme pied de tableau, ils se déplacent sur (3,1) et lisent (2,1) en dernier. Les technologies d'assistance modernes pourront lire toutes les données contenues dans une cellule. Les technologies d'assistance plus anciennes lisent la première ligne d'une cellule, puis passent à la cellule suivante. Cela peut engendrer une grande confusion pour l'utilisateur si une cellule contient des données réparties sur plus d'une ligne. En attribuant les coordonnées comme ci-dessus, un dispositif d'assistance donne une signification cognitive pour les données contenues dans la cellule.

Résumé

Il s'agit d'un petit guide pour faire des pages des tableaux de données HTML accessibles. Le but est de permettre à tous les utilisateurs de pouvoir comprendre des données tabulaires. Si vous avez affaire à des tableaux de données complexes, essayez de voir si il existe une façon logique de les scinder en unités plus simples. Encore une fois, il faut s'efforcer d'écrire un balisage qui permette une compréhension rapide et facile des données. Rappelez-vous que la fondation d'une page web accessible est un code écrit suivant les standards du Web actuel.

Cette traduction, comme l’article original, est placée sous licence Creative Commons, plus d'informations ici.