Table des matières
- Le problème
- La solution
- Les règles qui s'appliquent aux tableaux de données
- L'évaluation de conformité
- La comparaison entre les standards SGQRI et WCAG 2.0
Le problème
Les tableaux de données constituent un environnement complexe pour les utilisateurs aveugles ou malvoyants, parce qu'ils ne peuvent en avoir une vision globale qui leur permettrait d'en comprendre facilement l'organisation.
Pour qu'un lecteur d'écran soit en mesure de percevoir les relations entre les données et les en-têtes qui leur donnent un sens, les cellules d'en-tête doivent être distinguées des cellules de données, et les relations entre les cellules doivent être explicitées lorsqu'il s'agit de tableaux complexes.
Retour en haut de pageLa solution
Tableaux simples
Pour un tableau simple, il s'agit seulement de distinguer les cellules d'en-tête <th> des cellules de données <td>. Les lecteurs d'écran pourront ainsi indiquer à l'utilisateur le titre de la colonne ou de la ligne où il se trouve.
Il faut faire ici une distinction entre tableau simple et tableau régulier. Un tableau simple peut très bien être irrégulier, c'est-à-dire qu'il peut comporter un nombre variable de rangées et de colonnes à cause de la présence de cellules fusionnées horizontalement ou verticalement.
Toutefois, un tableau régulier qui comporte un nombre constant de rangées et de colonnes est toujours moins déroutant et donc plus facile à comprendre qu'un tableau irrégulier.
Titre
Si un titre de tableau est utilisé, il ne doit pas être inclus dans le tableau (par exemple dans une cellule fusionnée occupant toute la première rangée), mais présenté avec l'élément <caption>.
À moins que la structure du document ne l'indique, un titre de tableau devrait être codé avec l'élément <caption> plutôt qu'avec un en-tête de section.
Exemple de code pour les cellules d'en-tête et les cellules de données
<table>
<tr>
<th>Date</th>
<th>Sujets</th>
</tr>
<tr>
<td>Jeudi 26 juin 2008</td>
<td>Module 3</td>
</tr>
<tr>
<td>Vendredi, 27 juin 2008</td>
<td>Module 4</td>
</tr>
</table>
Date Sujets Jeudi 26 juin 2008 Module 3 Vendredi, 27 juin 2008 Module 4
Tableaux complexes
Un tableau complexe de données se distingue par le fait qu'il comporte plus d'une rangée d'en-têtes ou plus d'une colonne d'en-têtes ou par le fait qu'au moins une cellule de donnée réfère à plus de deux cellules d'en-têtes.
Un tableau complexe de données peut être régulier ou non, c'est-à-dire qu'il peut comporter ou non un nombre constant de rangées et de colonnes.
Le fait qu'un tableau soit irrégulier ne suffit pas à le classer parmi les tableaux complexes, mais cette irrégularité ajoute certainement un niveau de difficulté supplémentaire pour l'utilisateur et devrfait être évitée lorsque c'est possible. Notons d'ailleurs que les lecteurs d'écran ont de la difficulté avec les cellules fusionnées dans les tableaux complexes, JAWS est le meilleur dans ce domaine mais a de la difficulté à gérer les cellules fusionnées verticalement.
Il est donc important, chaque fois que possible, de concevoir des tableaux qui soient à la fois simples et réguliers. Le Guide pour simplifier un tableau complexe de données suggère des avenues pour éviter de produire, en totalité ou en partie, des tableaux complexes de données afin de rendre le contenu plus facile à consuter à toute personne, handicapée ou non.
Notons aussi qu'il est possible d'offrir une version de rechange où l'on résume l'ensemble des titres en une seule rangée et en une seule colonne et où l'on éclatera toutes les cellules fusionnées en répétant leur contenu autant de fois que nécessaire. Si l'on choisit cette approche, il faut offrir un lien vers cette version simplifiée immédiatement avant l'entrée dans le tableau de données complexe. Ce lien devrait conduire à une autre page qui devrait comporter un lien pour revenir à la page orginale, mais à la fin du tableu.
Pour les tableaux complexes de données, vous devez associer explicitement toutes les cellules (sauf celles de la première ligne et de la première colonne) avec toutes les cellules d'en-têtes correspondantes.
Il faut donc d'abord assigner un attribut id unique (pour l'ensemble de la page) à chaque cellule d'en-tête.
Par la suite, il faut incorporer un attribut headers à chaque cellule de données. Cet attribut placera entre guillemets, séparés par un espace, tous les id des cellules de titre qui s'appliquent à la cellule courante.
Ce travail doit habituellement être réalisé à la main directement dans le code, car la plupart des logiciels auteurs n'ont pas prévu d'interface pour le faire. Il existe toutefois un outil développé par Vision Australia (en anglais seulement) qui permet, non seulement d'évaluer un tableau complexe, mais aussi de le coder manuellement ou automatiquement avec les attributs id et headers. Vous le trouverez à cette adresse : http://www.visionaustralia.org.au/info.aspx?page=1812.
Exemple de code pour l'utilisation de id et headers
<tr>
<th id="l1c1">Destination</th>
<th id="l1c2">Dates du déplacement</th>
<th id="l1c3">Repas</th>
<th id="l1c4">Hôtel</th>
<th id="l1c5">Transport</th>
<th id="l1c6">Total</th>
</tr>
<tr>
<th id="l2c1" headers="l1c1" rowspan="3">Gaspé</th>
<th id="l2c2" headers="l1c2 l2c1">25 août</th>
<td headers="l1c3 l2c1 l2c2">37</td>
<td headers="l1c4 l2c1 l2c2">112</td>
<td headers="l1c5 l2c1 l2c2">45</td>
<td headers="l1c6 l2c1 l2c2"> </td>
</tr>
<tr>
<th id="l3c2" headers="l1c2 l2c1">26 août</th>
<td headers="l1c3 l2c1 l3c2">27</td>
<td headers="l1c4 l2c1 l3c2">112</td>
<td headers="l1c5 l2c1 l3c2">45</td>
<td headers="l1c6 l2c1 l3c2"> </td>
</tr>
Rapport des frais de voyage Destination Dates du déplacement Repas Hôtel Transport Total Gaspé 25 août 37 112 45 26 août 27 112 45
Sommaire et légende
Les tableaux de données complexes d'un site Web public ont besoin d'un sommaire, et peuvent également bénéficier d'une légende.
Le sommaire peut compenser le manque de vision globale de l'utilisateur non-voyant en donnant une brève description de l'organisation du tableau. Il est inscrit dans l'attribut summary et peut être aussi long que nécessaire.
Un bon sommaire doit décrire les grandes catégories d'informations présentées par colonne et par ligne, et signaler les irrégularités éventuelles correspondant aux cellules fusionnées.
L'effet recherché ici est une vue d'ensemble, c'est pourquoi il n'est pas utile de reprendre dans le sommaire tous les titres de colonne et de ligne, mais plutôt d'en décrire les grandes catégories.
La légende, quant à elle, est une information complémentaire qui vient chapeauter un tableau à la façon d'un titre. Elle s'inscrit dans l'élément <caption>, qui doit être placé immédiatement sous l'élément <table>.
ATTENTION :
- Vous ne devez pas inscrire un sommaire vide (summary="") pour les tableaux de présentation, parce que c'est un des critères utilisés par les lecteurs d'écran pour distinguer entre les tableaux de présentation et les tableaux de données. De même, les tableaux de mise en page doivent être exempts de titre <caption> et de cellules d'en-tête <th>.
- Des données tabulaires ne doivent pas être formatées avec des espaces pour simuler un balisage correct, car l'utilisateur ne pourrait naviguer de cellule en cellule dans un tel tableau avec un lecteur d'écran.
Exemple de code pour l'utilisation d'un sommaire et d'une légende
<table border="1" cellpadding="2" summary="Ce tableau présente les frais de voyage. Par lignes, vous trouverez les destinations et les dates ainsi qu'un grand total. Par colonnes, sont présentées les catégories de dépenses ainsi qu'un total. Notez que la première colonne comporte des cellules fusionnées.> <caption>Rapport des frais de voyage</caption></table> [...]
Abréviations
Quand les titres des colonnes ou des lignes sont longs, et qu'il serait fastidieux pour l'utilisateur d'entendre répéter cette information à plusieurs reprises, il est préférable d'utiliser des abréviations. Par exemple, « Estimation des dépenses pour les soins de santé par les agences du Gouvernement durant la prochaine décennie » pourrait être abrégé par : « Estimation des dépenses ».
De même, si un tableau comporte déjà des abréviations dans les cellules d'en-tête, on peut utiliser cette même technique pour en donner une interprétation plus compréhensible. Par exemple, un calendrier dont les jours de la semaine sont identifiés par deux lettres seulement (lu, ma, me, etc.) et qui serait donc peu compréhensible en synthèse vocale.
ATTENTION : Les abréviations utilisées dans les cellules d'en-têtes ne sont reconnues par JAWS que dans les tableaux codés avec les attributs id et headers.
Dans un tableau de données simple, il vaut donc mieux utiliser la balise <abbr> plutôt que l'attribut du même nom.
Exemples de code pour l'utilisation d'abréviations
<th abbr="Estimation des dépenses de santé"> Estimation des dépenses pour les soins de santé par les agences du Gouvernement durant la prochaine décennie</th> ou <th abbr="lundi">lu</th>
Les règles qui s'appliquent aux tableaux de données
| SGQRI 008-01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 |
|---|---|---|---|
| 22. Tout tableau dans une page Web doit : a) pour un tableau de données, comporter des cellules d’en-tête de ligne ou de colonne codées de la façon appropriée; | 18. Tout tableau dans un document téléchargeable doit : a) pour un tableau de données, comporter des cellules d’en-tête de ligne ou de colonne détectables par les technologies d’adaptation informatiques, ou offrir l’une des possibilités suivantes : i. soit, un hyperlien vers une page Web qui présente une version de ce tableau qui satisfait aux exigences du Standard sur l’accessibilité d’un site Web (SGQRI 008-01); ii. soit, une description complète présentant les faits saillants ou une synthèse des données présentées dans le tableau; iii. soit, un texte de remplacement offrant une présentation de l’information restructurée de façon linéaire; |
14. La structure de l’animation Web doit : b) utiliser tout moyen offert par la technologie d'animation Web afin de rendre détectable, par les technologies d'adaptation informatiques, toute liste, tout en-tête de section et toute relation entre les cellules d'un tableau de données. | 1.3.1 Information et relations : l'information, la structure et les relations véhiculées par la présentation peuvent être déterminées par un programme informatique ou sont disponibles sous forme de texte. (Niveau A) |
| 22. Tout tableau dans une page Web doit : b) dans un tableau complexe de données, comporter un identifiant unique codé conformément à l’annexe 1 pour toute cellule d’en-tête et les références aux cellules d’en-tête correspondantes codées de la façon appropriée pour toute cellule de données; | 18. Tout tableau dans un document téléchargeable doit : b) pour un tableau complexe de données, comporter une association explicite entre les cellules de données et les cellules d’en-tête qui est détectable par les technologies d’adaptation informatiques, ou offrir l’une des possibilités prévues au paragraphe a); | ||
| 22. Tout tableau dans une page Web doit : c) pour un tableau de présentation, éviter l’usage des attributs et des balises réservés à un tableau de données; | |||
| 22. Tout tableau dans une page Web doit : e) pour un tableau complexe de données, comporter un résumé, codé conformément à l’annexe 1, qui décrit brièvement les grandes catégories d’information présentées par colonnes et par lignes, et qui note, s’il y a lieu, la présence d’irrégularités dans le nombre de lignes ou de colonnes. |
L'évaluation de conformité
| SGQRI 008-01 (site Web) |
SGQRI 008-02 (doc. téléchargeable) |
SGQRI 008-03 (multimédia) |
WCAG 2.0 Grille AccessiWeb 2.1 de Braillenet (suivre ce lien pour voir les tests rattachés à chaque critère) |
|---|---|---|---|
Tout tableau de données, comporte-t-il des cellules d’en-tête de ligne ou de colonne codées avec la balise <th> (SW-22a et Annexe 1-8a) ?
|
Tout tableau de données : - comporte-t-il des cellules d’en-tête de ligne ou de colonne détectables par les technologies d’adaptation informatiques, OU - offre-t-il l’une des possibilités suivantes : 1) un hyperlien vers une page Web qui présente une version de ce tableau qui satisfait aux exigences du Standard sur l’accessibilité d’un site Web (SGQRI 008-01) ; 2) une description complète présentant les faits saillants ou une synthèse des données présentées dans le tableau ; 3) un texte de remplacement offrant une présentation de l’information restructurée de façon linéaire (DT-18a) ? |
L'animation Web utilise-t-elle tout moyen offert par la technologie afin de rendre détectable, par les technologies d'adaptation informatiques, toute liste, tout en-tête de section et toute relation entre les cellules d'un tableau de données (M-14b) ? | Critère 5.4 [Bronze] Chaque tableau de données a-t-il un titre ? Critère 5.5 [Bronze] Pour chaque tableau de données ayant un titre, celui-ci est-il pertinent ? Critère 5.6 [Bronze] Pour chaque tableau de données, chaque en-tête de colonnes et chaque en-tête de lignes sont-ils correctement déclarés ? Critère 5.7 [Bronze] Pour chaque tableau de données, la technique appropriée permettant d'associer chaque cellule avec ses en-têtes est-elle utilisée ?
|
Dans un tableau complexe de données, chaque balise <th> comporte-t-elle un identifiant unique codé avec l'attribut id (SW-22b.1 et Annexe 1-8b) ? Dans un tableau complexe de données, chaque cellule à laquelle s'applique une cellule d'en-tête comporte-t-elle un attribut headers dans les balises <td> faisant référence aux cellules d’en-tête correspondantes (SW-22b.2 et Annexe 1-8b) ? Examiner la page pour identifier les tableaux complexes.
|
Tout tableau complexe de données : - comporte-t-il une association explicite entre les cellules de données et les cellules d’en-tête qui est détectable par les technologies d’adaptation informatiques, OU - offre-t-il l’une des possibilités suivantes : 1) un hyperlien vers une page Web qui présente une version de ce tableau qui satisfait aux exigences du Standard sur l’accessibilité d’un site Web (SGQRI 008-01) ; 2) une description complète présentant les faits saillants ou une synthèse des données présentées dans le tableau ; 3) un texte de remplacement offrant une présentation de l’information restructurée de façon linéaire (DT-18b) ? |
||
Tout tableau de présentation est-il exempt des attributs et des balises réservés à un tableau de données (SW-22c) ?
|
Critère 5.8 [Bronze] Chaque tableau de mise en forme ne doit pas utiliser d'éléments propres aux tableaux de données. Cette règle est-elle respectée ? | ||
Sur un site Web public seulement, un tableau complexe de données comporte-t-il un résumé, codé avec l'attribut <summary> de la balise <table>, qui décrit brièvement les grandes catégories d’information présentées par colonnes et par lignes, et qui note, s’il y a lieu, la présence d’irrégularités dans le nombre de lignes ou de colonnes (SW-22e) ? Examiner la page pour identifier les tableaux complexes.
|
Critère 5.1 [Bronze] Chaque tableau de données a-t-il un résumé ? Critère 5.2 [Bronze] Pour chaque tableau ayant un résumé, celui-ci est-il pertinent ? |
La comparaison entre les standards SGQRI et WCAG 2.0
Le critère de succès 1.3.1 des WCAG 2.0 est un principe général qui s'applique à plusieurs situations. Dans les standards SGQRI, on a plutôt choisi une approche plus concrète qui précise la portée de ce critère de succès en s'appuyant sur les techniques proposées par le W3C. Le tableau qui précède énumère les exigences des standards SGQRI qui découlent de ce critère de succès en ce qui concerne les tableaux. Toutefois, les standards SGQRI privilégient l'une des technique d'association (celle qui fonctionne avec tous les lecteurs d'écran) parmi celles proposées par le W3C et circonscrivent l'utilisation d'un résumé aux tableaux complexes dans les sites Web publics, c'est-à-dire aux tableaux ou ce résumé est réellement utile. Il est bon de rappeler ici que les techniques proposées par les WCAG 2.0 le sont à titre indicatif et qu'elles n'ont pas de valeur normative.
Nous avons donc vu que les standards SGQRI comportent des exigences qui correspondent au critère de succès 1.3.1 sur trois grands aspects : la perception de la structure, les formulaires et les tableaux.
Dans ce contexte, un site Web qui applique les exigences des standards SGQRI en matière de tableau est conforme au critère de succès 1.3.1 des WCAG 2.0. Toutefois, un site Web qui applique, conformément aux WCAG 2.0, une autre technique pour l'association des cellules que celle reconnue par les standards SGQRI sera non conforme aux standards SGQRI.
Voir aussi :
- Comprendre la règle 1.3 [Adaptable]
- Comprendre le critère de succès 1.3.1 [Information et relations]
Retour en haut de page