Exemples de tableaux
Résumé
Vous trouverez sur cette page plusieurs tableaux analysés du point de vue de leur accessibilité. Il y a un bon exemple et 3 mauvais exemples. Dans chaque cas, vous trouverez une explication des problèmes rencontrés et vous pourrez même vous mettre à la place d'un internaute non-voyant qui utilise un logiciel de lecture d'écran.
- Bon exemple de tableau respectant les directives d'accessibilité.
- Mauvais exemple de tableau ne respectant pas les directives d'accessibilité.
- Mauvais exemple de tableau réalisé sous forme d'image.
- Mauvais exemple de tableau copié-collé depuis un traitement de texte.
Bon exemple de tableau respectant les directives d'accessibilité
Exemple
| Etapes | Qui | Quoi | Quand |
|---|---|---|---|
| 1 | Mark et Samantha | Idées et esquisses du projet | 1er janvier 2006 |
| 2 | Félix et Hans | Visite des projets à Gland et Ollon | 15 mai 2006 |
| 3 | Comité central de l'ASMA | Lancement de l’avant-projet | 1er juin 2006 |
| 4 | Fritz | Recrutement et évaluation des agents | 3 janvier 2007 |
Commentaires
Ce tableau a été réalisé dans Typo3. Il respecte les directives d'accessibilité :
- Il a une légende (titre du tableau).
- Il propose un résumé à l'internaute non-voyant.
- Les en-têtes de colonnes et de ligne sont balisés correctement.
- Les titres sont courts (moins de 15 caractères).
- Les acronymes et abréviations sont balisés correctement.
Mettez-vous maintenant à la place d'un internaute non voyant en écoutant le logiciel de lecture d'écran interpréter ce tableau. Vous entendrez d'abord la légende et le résumé du tableau, puis la lecture de la ligne d'en-tête, puis des lignes correspondant aux étapes 1 et 2.
Ecouter le logiciel de lecture d'écran lire les 3 premières lignes de ce tableau (étapes 1 et 2)
Ensuite nous simulerons sur les lignes des étapes 3 et 4 une série de déplacements dans les lignes 4 et 5 (voir tableau ci-bas). Dans chaque déplacement de cellule, vous entendrez le logiciel de lecture d'écran indiquer à l'internaute dans quelle ligne et quelle colonne il se trouve.
Ecouter le logiciel de lecture d'écran lire les 2 dernières lignes de ce tableau (étapes 3 et 4)
Mauvais exemple : tableau ne respectant pas les directives d'accessibilité
Exemple
| Etapes du projet | Responsable de l'étape | Tâches ou actions à entreprendre | Délais à respecter |
|---|---|---|---|
| 1ère étape | Mark, Samantha | Idées, esquisses du projet | 1 janv.06 |
| 2e étape | Félix, Hans | Visite des projets à Gland, Ollon | 15 mai 06 |
| 3e étape | Comité central de l'ASMA | Lancement de l'avant-projet | 1 juin 06 |
| 4e étape | Fritz | Recrutement, évaluation des agents | 3 janv. 07 |
Commentaires
Créé dans Typo3, ce tableau n'est pas complètement accessible en raison de problèmes au niveau du contenu des cellules.
- Les titres de colonnes et de rangée dépassent parfois les 15 caractères. Plus les titres sont courts, mieux c'est car le logiciel de lecture d'écran répète les titres pour situer l'internaute. Par exemple, il vaut mieux écrire "qui" plutôt que "responsable de l'étape".
- Le contenu des cellules doit être compréhensible visuellement, mais aussi vocalement. Par exemple, écrire "Mark et Samantha" plutôt que "Mark, Samantha".
- Les acronymes et abréviations n'ont pas été balisés.
- Mettez-vous à la place d'un malvoyant en cliquant sur le lien ci-dessous et en fermant les yeux.
Ecouter le logiciel de lecture d'écran lire ce tableau difficilement accessible
Mauvais exemple : tableau réalisé sous forme d'image
Exemple
Commentaires
Ce tableau est composé d'une image qui a été insérée dans Typo3. On gagne beaucoup de temps en procédant ainsi, mais une image (en format jpg ou gif) demeure ce qu'il a de plus inaccessible pour un malvoyant ou un aveugle.
Sans titre ni texte de remplacement, le logiciel de lecture d'écran ne peut pas lire le contenu d'une image. Mettez-vous à la place d'une personne non voyante en écoutant, les yeux fermés, comment le logiciel de lecture d'écran interprète l'image ci-dessus.
Ecouter le logiciel de lecture d'écran lire ce tableau totalement inaccessible
Mauvais exemple : tableau copié-collé depuis un traitement de texte
Exemple
Etapes à suivre pour la mise en oeuvre du projet de centre d'appel
Etapes | Qui | Quoi | Quand |
1 | Mark et Samantha | Idées et esquisses du projet | 1er janvier 2006 |
2 | Félix et Hans | Visite des projets à Gland et Ollon | 15 mai 2006 |
3 | Comité central de l'ASMA | Lancement de l’avant-projet | 1er juin 2006 |
4 | Fritz | Recrutement et évaluation des agents | 3 janvier 2007 |
Commentaires
Ce tableau copié-collé depuis un traitement de texte tel que Word ressemble au modèle à suivre mais il présente plusieurs problèmes d'accessibilité :
- Le titre du tableau a été saisi comme un paragraphe indépendant du tableau. Le logiciel de lecture d'écran n'indiquera pas qu'il s'agit du titre du tableau.
- Le tableau n'a pas de résumé. L'internaute non-voyant sera obligé de parcourir l'ensemble du tableau pour savoir si le contenu l'intéresse.
- Les en-têtes de lignes et de colonnes ne sont pas définis comme tels. Ils en ont seulement l'apparence. Le logiciel de lecture d'écran sera incapable d'expliquer à l'internaute non-voyant dans quelle colonne et quelle ligne se situe la cellule qu'il est en train de lire.
- Mettez-vous à la place d'une personne non-voyante en écoutant comment le logiciel de lecture d'écran interprète ce tableau.
Ecouter le logiciel de lecture d'écran lire ce tableau copié-collé depuis un traitement de texte