ARCHIVÉ - Rendre les tableaux accessibles
Cette information est archivée parce qu'elle est désuete et n'est plus pertinente.
Contenu archivé
Information archivée dans le Web à des fins de consultation, de recherche ou de tenue de documents. Cette dernière n’a aucunement été modifiée ni mise à jour depuis sa date de mise en archive. Les pages archivées dans le Web ne sont pas assujetties aux normes qui s’appliquent aux sites Web du gouvernement du Canada. Conformément à la Politique de communication du gouvernement du Canada, vous pouvez obtenir cette information dans un autre format en communiquant avec nous.
Table des matières
1.0 Introduction
On utilise souvent des tableaux dans les applications et les pages Web pour mettre l'information en forme. Cependant, un non-voyant qui utilise un lecteur d'écran pourra être vite dérouté si les tableaux ne sont pas construits de manière adéquate. Veuillez autant que possible éviter les tableaux imbriqués qui sont très difficiles à comprendre lorsqu'on utilise un lecteur d'écran.
Les tableaux ne doivent servir qu'à présenter des données qu'il faut subdiviser en colonnes et en lignes. S'il s'agit de données qu'il convient de présenter sur une feuille de calcul, alors il sera indiqué de les présenter sous forme de tableau..
Les tableaux doivent rester significatifs lorsqu'ils sont linéarisés (c.-à-d. lus de gauche à droite comme un paragraphe ordinaire). Voici un exemple de tableau comportant 3 lignes et 3 colonnes qui resterait significatif une fois linéarisé :
| 200 | ||
| ------ | = | 2 |
| 100 | ||
Un lecteur d'écran lirait ce tableau ainsi
"200" "------" "=" "2" "100"
Les données devraient être représentées comme suit, dans une seule cellule : « 200/100 = 2 » ou « 200 divisé par 100 égale 2 ».
Soulignons l'importance de fermer correctement toutes les balises <td>, <th> et <tr>; sinon, avec certains navigateurs, des problèmes de formatage pourraient survenir à l'extérieur du tableau.
2.0 Pour rendre les tableaux de données accessibles
2.1 Légende (facultatif)
La légende (Caption) est un élément facultatif qui sert à donner un titre au tableau. Ce titre sera centré immédiatement au-dessus du tableau. On peut utiliser des styles pour modifier l'alignement de la légende. Voici un exemple de légende :
<table>
<caption>Tasses de café bues par chaque député</caption>
2.1.1 Marche à suivre pour aligner la légende à gauche
La classe CSS alignLeft est déjà définie dans le modèle de page NSI 2.0 du GC. Si vous n'utilisez pas le modèle de page NSI 2.0 du GC, ça sera nécessaire de définir la classe CSS suivante :
-
.alignLeft{text-align: left;}
Insérez un appel de classe alignLeft dans l'élément caption tel qu'illustré ci-dessous :
<table>
<caption class="alignLeft">Tasses de café bues par chaque député</caption>
2.2 Associer les cellules à leurs en-têtes de ligne et de colonne respectifs
Il est important d'associer les cellules de données et les cellules d'en-tête à l'aide de l'attribut scope ou des attributs id et headers. La raison à cela est que les lecteurs d'écran ont l'option de lire le contenu des cellules d'en-tête connexes avant de lire le contenu de chaque cellule de données. L'utilisateur pourra ainsi mieux comprendre la signification des données.
Un exemple : un tableau comporte plusieurs lignes et colonnes. Une colonne contient l'en-tête « Gains » et deux cellules de données, plusieurs lignes plus bas, contiennent les chiffres « 345 » et « 567 ». Sans l'attribut scope ou les attributs id et headers, le lecteur d'écran lirait l'information ainsi :
"Gains" / ... plusieurs cellules ... / "345" / ... plusieurs cellules ... / "567"
Dans ce cas, un non-voyant aurait de la difficulté à comprendre la signification des chiffres « 345 » et « 567 ». Si on utilisait l'attribut scope ou les attributs id et headers, le lecteur d'écran lirait alors ceci :
"Gains" / ... plusieurs cellules ... / "Gains 345" / ... plusieurs cellules ... / "Gains 567"
Dans ce cas-ci, la signification des chiffres « 345 » et « 567 » est claire puisque, pour chaque cellule, l'en-tête est lu avant les données.
L'attribut scope sert à déclarer une cellule d'en-tête pour un rang ou une colonne. Cet attribut peut être utiliseé seulement pour les tableaux simples où il y a non plus qu'un rang ou colonne d'en-tête.
L'attribut id sert à déclarer une cellule d'en-tête, tandis que l'attribut headers permet d'identifier les en-têtes auxquels les cellules de données sont associées. Les attributs id et headers peuvent être utilisés pour n'importe quelle table des données. La variable utilisée dans l'attribut id ne doit contenir que des chiffres, des lettres ou des tirets. On ne doit y trouver aucun espace, et le premier caractère doit être alphabétique. Dès qu'une variable est utilisée dans un attribut id, elle ne doit plus l'être dans un autre attribut id sur la même page.
Il y a trois catégories de cellule : la cellule d'en-tête, la cellule de sous-en-tête et la cellule de données.
2.2.1 Cellule d'en-tête
Il s'agit de l'en-tête de ligne ou de colonne d'une ou de plusieurs cellules de données, mais non du sous-en-tête d'une quelconque cellule d'en-tête. L'attribut scope peut être utilisé si il n'y a pas des cellules sous-en-tête. L'attribut id doit être utilisé si il y a des cellules sous-en-tête. La balise th doit être utilisée pour les cellules d'en-tête.
- Exemple de cellule d'en-tête avec l'attribut
scope:
<th scope="col">Nom du député</th> - Exemple de cellule d'en-tête ave l'attribut
id:
<th id="header1">Nom du député</th>
2.2.2 Cellule de sous-en-tête
Il s'agit de l'en-tête de ligne ou de colonne d'une ou de plusieurs cellules de données et du sous-en-tête d'une ou de plusieurs cellules d'en-tête. Dans ce cas, on utilisera les attributs id et headers. La balise th doit être utilisé pour les cellules de sous-en-tête.
- Exemple de cellule de sous-en-tête :
<th id="header1a" headers="header1">Prénom</th>
- Exemple de cellule de sous-en-tête associée à plusieurs en-têtes (remarquez que les en-têtes sont séparés par un espace) :
<th id="header1a" headers="header1 header2">Prénom</th>
2.2.3 Cellule de données
Il ne s'agit pas d'un en-tête de ligne ou de colonne. Seule la balise td doit être utilisée dans les cellules de données.
- Exemple de cellule de données où l'attribut
scopeest utilisé pour les cellules d'en-tête :
<td>Jim Simpson</td>
- Exemple de cellule de données où l'attribut
idest utilisé pour les cellules d'en-tête :
<td headers="header1">Jim Simpson</td>
- Exemple de cellule de données associée à un ou plusieurs en-têtes (remarquez que les en-têtes sont séparés par un espace) :
<td headers="header1 header2">Jim Simpson</td>
3.0 Exemples de tableaux accessibles
3.1 Tableau avec légende et en-têtes de colonne avec l'attribut scope
<table>
<caption>Tasses de café bues par chaque député</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Tasses</th>
<th scope="col">Type de café</th>
<th scope="col">Sucre?</th>
</tr>
</thead>
<tbody>
<tr>
<td>T. Sexton</td>
<td>10</td>
<td>Expresso</td>
<td>Non</td>
</tr>
<tr>
<td>J. Dinnen</td>
<td>5</td>
<td>Déca</td>
<td>Oui</td>
</tr>
</tbody>
</table>
| Nom | Tasses | Type de café | Sucre? |
|---|---|---|---|
| T. Sexton | 10 | Expresso | Non |
| J. Dinnen | 5 | Déca | Oui |
3.2 Tableau avec légende et en-têtes de colonne avec l'attribut id
<table>
<caption>Tasses de café bues par chaque député</caption>
<thead>
<tr>
<th id="header1">Nom</th>
<th id="header2">Tasses</th>
<th id="header3">Type de café</th>
<th id="header4">Sucre?</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="header1">T. Sexton</td>
<td headers="header2">10</td>
<td headers="header3">Expresso</td>
<td headers="header4">Non</td>
</tr>
<tr>
<td headers="header1">J. Dinnen</td>
<td headers="header2">5</td>
<td headers="header3">Déca</td>
<td headers="header4">Oui</td>
</tr>
</tbody>
</table>
| Nom | Tasses | Type de café | Sucre? |
|---|---|---|---|
| T. Sexton | 10 | Expresso | Non |
| J. Dinnen | 5 | Déca | Oui |
3.3 Tableau avec légende, en-têtes de colonne et sous-en-têtes de colonne
<table>
<caption>Tasses de café bues par chaque député</caption>
<thead>
<tr>
<th id="header5" colspan="2">Député</th>
<th id="header6" rowspan="2">Tasses</th>
<th id="header7" rowspan="2">Type de café</th>
<th id="header8" rowspan="2">Sucre?</th>
</tr>
<tr>
<th id="header5a" headers="header5">Nom</th>
<th id="header5b" headers="header5">Province</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="header5 header5a">T. Sexton</td>
<td headers="header5 header5b">Alberta</td>
<td headers="header6">10</td>
<td headers="header7">Expresso</td>
<td headers="header8">Non</td>
</tr>
<tr>
<td headers="header5 header5a">J. Dinnen</td>
<td headers="header5 header5b">Ontario</td>
<td headers="header6">5</td>
<td headers="header7">Déca</td>
<td headers="header8">Oui</td>
</tr>
</tbody>
</table>
| Député | Tasses | Type de café | Sucre? | |
|---|---|---|---|---|
| Nom | Province | |||
| T. Sexton | Alberta | 10 | Expresso | Non |
| J. Dinnen | Ontario | 5 | Déca | Oui |
3.4 Tableau avec en-têtes de ligne et de colonne
<table>
<thead>
<tr>
<td></td>
<th id="header9">2002</th>
<th id="header10">2003</th>
</tr>
</thead>
<tbody>
<tr>
<th id="header11" class="alignLeft">Autos</th>
<td headers="header9 header11">54678</td>
<td headers="header10 header11">57765</td>
</tr>
<tr>
<th id="header12" class="alignLeft">Fourgonnettes</th>
<td headers="header9 header12">34546</td>
<td headers="header10 header12">45645</td>
</tr>
<tr>
<th id="header13" class="alignLeft">Camions</th>
<td headers="header9 header13">76565</td>
<td headers="header10 header13">64574</td>
</tr>
</tbody>
</table>
| 2002 | 2003 | |
|---|---|---|
| Autos | 54678 | 57765 |
| Fourgonnettes | 34546 | 45645 |
| Camions | 76565 | 64574 |