Rendre accessible un tableau

Bonjour,

Je gère le site web d'un organisme avec un système de gestion de contenu.

Seulement le code généré pour les tableaux n'est pas "accessible" : il n'y a pas de moyen d'établir de lien entre les lignes et les colonnes. L'objectif est donc de linéariser la lecture de ce tableau.

En passant en mode html, j'ai donc introduit les attributs id pour les colonnes et headers pour les lignes. Mais le couplage ne fonctionne pas.

Voir ci-dessous le code source et en copie un aperçu avec le navigateur Lynx.

Merci de me dire ce qui cloche et de me mettre sur la voie !

Cordialement



Code source

<table align="" border="1" cellpadding="2" cellspacing="2" width="95%">
<tbody>
<tr>
<th id="t1" style="color: rgb(179, 80, 17); font-weight: bold;">Pays</th>
<th id="t2" style="font-weight: bold; color: rgb(179, 80, 17);">Organisme</th>
<th id="t3" style="font-weight: bold; color: rgb(179, 80, 17);">Ville</th>
<th id="t4" style="font-weight: bold; color: rgb(179, 80, 17);">Domaine</th>
<th id="t5" style="font-weight: bold; color: rgb(179, 80, 17);">N° places </th>
<th id="t6" style="font-weight: bold; color: rgb(179, 80, 17);">Durée</th>
<th id="t7" style="font-weight: bold; color: rgb(179, 80, 17);">Date limite 1er semestre</th>
<th id="t8" style="font-weight: bold; color: rgb(179, 80, 17);">Date limite 2ème semestre</th>
</tr>
<tr>
<td headers="t1" style="color: rgb(179, 80, 17); font-weight: bold;">Algérie</td>
<td headers="t2"><a href="http://www.enset-oran.dz/">ENSET d'Oran</a></td>
<td headers="t3">Oran</td>
<td headers="t4">Sciences de l'éducation</td>
<td headers="t5"> ND</td>
<td headers="t6">ND</td>
<td headers="t7">Voir SRI</td>
<td headers="t8>VoirSRI</td>
</tr>
<tr>
<td headers="t1" style="color: rgb(179, 80, 17); font-weight: bold;">Australie</td>
<td headers="t2"><a href="http://www.qut.edu.au/">Queensland University of Technology</a></td>
<td headers="t3">Brisbane</td>
<td headers="t4">Tous domaines</td>
<td headers="t5"> 3</td>
<td headers="t6">2 semestres</td>
<td headers="t7">15 novembre</td>
<td headers="t8">1er mai</td>
</tr>
<tr>
<td headers="t1" style="color: rgb(179, 80, 17); font-weight: bold;">Australie</td>
<td headers="t2"><a href="http://www.qut.edu.au/"> Université de Sydney</a></td>
<td headers="t3">Sydney</td>
<td headers="t4">Anglais / sciences sociales</td>
<td headers="t5"> 3</td>
<td headers="t6">1 semestre ou 1 an</td>
<td headers="t7">31 novembre</td>
<td headers="t8">31 mars
</td>
</tr>
</tbody>
</table>

Modifié par Moran (28 May 2008 - 11:41)

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Moran a écrit :
Mais le couplage ne fonctionne pas.

Avec quels outils?
Si le seul test effectué est avec Lynx, c'est un peu léger pour affirmer que ça ne fonctionne pas.

Est-ce que tu as également essayé d'utiliser l'attribut scope pour les TH? C'est sensiblement plus simple à utiliser.

Pour mémoire, référence HTML 4.01:
http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.4.1

Et côté RGAA:
http://rgaa.dgme.fr/index.php/front/web/points_de_controle/5_2

Pour finir, je déplace ce sujet dans le salon qui va bien.

Pour les aides techniques, si le tableau est structuré correctement, il n'y a même pas besoin de ça. Là où ça commence à être nécessaire avec scope et/ou header/headers, c'est quand le nombre de lignes ou de colonnes change à mesure qu'on parcourt le tableau. Le plus important, c'est de mettre des th aux endroits adéquats.
A vue de nez, il s'agit ici d'une simple présentation d'informations provenant de base de donnée avec un enregistrement par ligne. Maintenant je n'ai pas lu le code en détail, peut-être que je me trompe...

Bonjour,

Toutes mes excuses pour l'entorse à l'édition du code.

Merci à vos précieuses indications. Voici le code édité selon les recommandations, avec l'attibut scope (effectivement plus facile à utiliser) :

<table style="height: 428px;" align="" border="1" cellpadding="1" cellspacing="1" summary="Liste des accords internationaux de l'Ecole"><tbody><tr><th colspan="6" scope="colgroup">Accords internationaux</th> </tr><tr style="color: rgb(179, 80, 17);"><th scope="col" style="text-align: center; font-weight: bold;">Pays</th><th scope="col" style="font-weight: bold; text-align: center;">Ville</th><th scope="col" style="font-weight: bold; text-align: center;">Etablissement</th><th scope="col" style="font-weight: bold; text-align: center;">Domaine</th><th scope="col" style="font-weight: bold; text-align: center;">Nbr de places</th><th scope="col" style="font-weight: bold; text-align: center;">Durée</th></tr><tr><td scope="row" style="font-weight: bold; color: rgb(179, 80, 17);">Allemagne</td><td>Braunschweig</td><td><a href="http://www.tu-braunschweig.de/">Technische Universitãt Braunschweig</a></td><td>Sciences pour l'ingénieur
</td><td>2</td><td>3 mois
</td></tr><tr><td scope="row" style="color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td>Berlin</td><td><a href="http://www.hu-berlin.de/">Humboldt Universität, Wirtschaftswissenschaftliche Fakultät, Institut für Finanzwissenschaft</a></td><td>Economie</td><td>2</td><td> 5 mois
</td></tr><tr><td scope="row" style="color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td>Berlin</td><td><a href="http://www.hu-berlin.de/">Humboldt Universität, Institut für Sozialwissenschaften</a></td><td>Sciences sociales</td><td>2</td><td>9 mois</td></tr><tr><td scope="row" style="color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td>Berlin</td><td><a href="http://www.geschichte.hu-berlin.de/site/alias__geschichte.hu-berlin/lang__de/mid__11291/ModeID__0/PageID__381/3551/default.aspx">Humboldt-Universität-Institut für Geschichtswissenschaften</a></td><td>Histoire</td><td>2</td><td> 10 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td style="vertical-align: top;">Dusseldorf
</td><td style="vertical-align: top;"><a href="http://www.fh-duesseldorf.de/">Fachhochschule Dusseldorf</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur</td><td style="vertical-align: top;">1
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Allemagne
</td><td style="vertical-align: top;">Kaiserslautern
</td><td style="vertical-align: top;"><a href="http://www.uni-kl.de/">Technische Universität Kaiserslautern</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur</td><td style="vertical-align: top;">1
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td style="vertical-align: top;">Kassel</td><td style="vertical-align: top;"><a href="http://cms.uni-kassel.de/">Universitãt Kassel</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur</td><td style="vertical-align: top;">1
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Belgique
</td><td style="vertical-align: top;">Louvain
</td><td style="vertical-align: top;"><a href="http://www.uclouvain.be/">Université catholique</a></td><td style="vertical-align: top;">Ingénieries et technologies
</td><td style="vertical-align: top;">2
</td><td style="vertical-align: top;">10 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Belgique
</td><td style="vertical-align: top;">Anvers
</td><td style="vertical-align: top;"><a href="http://www.ua.ac.be/">Universiteit Antwerpen</a></td><td style="vertical-align: top;">Economie
</td><td style="vertical-align: top;">3
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Espagne
</td><td style="vertical-align: top;">Valencia
</td><td style="vertical-align: top;"><a href="http://www.upv.es/menuc.html">Universidad Politécnica de Valencia</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur
</td><td style="vertical-align: top;">2
</td><td style="vertical-align: top;">6 mois
</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Espagne</td><td style="vertical-align: top;">Madrid</td><td style="vertical-align: top;"><a href="http://www.uc3m.es/">Universidad Carlos III de Madrid</a></td><td style="vertical-align: top;">Economie</td><td style="vertical-align: top;">2</td><td style="vertical-align: top;">9 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Espagne</td><td style="vertical-align: top;">Madrid
</td><td style="vertical-align: top;"><a href="http://www.uc3m.es/">Universidad Carlos III de Madrid</a></td><td style="vertical-align: top;">Histoire</td><td style="vertical-align: top;">2</td><td style="vertical-align: top;">9 mois
</td></tr><tr></tbody></table>

La fonction mise en valeur de la Web accessibility toolbar sous IE donne un résultat satisfaisant (cf. copie écran).

J'ai néanmoins encore un doute sur l'accessibilité de ce tableau. Lorsque je teste la linéarisation avec la WAT sous IE ou avec Lynx, je n'obtiens pas une présentation qui me semble complètement satisfaisante : les entêtes de colonne ne sont pas répétées pour chaque cellule.

Je connais cependant mal les interfaces qui permettent à une personne handicapée de lire un tel tableau. Est-ce que vous pensez que ce tableau répond aux critères d'accessibilité ?

Merci.

Cordialement

Bonjour,

Le tableau me semble correct, à deux nuances près:

1. Sauf erreur de ma part, le premier TH (sur toute la largeur) devrait être un CAPTION et pas un TH.

2. Il me semble qu'il est techniquement possible d'utiliser l'attribut scope sur un élément TD, mais d'après les descriptions de cet attribut il est prévu uniquement pour les éléments TH. Quoi qu'il en soit, le scope="row" sur le premier TD de chaque ligne me semble superflu. Ou bien il faut utiliser des TH à la place des TD pour ces premières cellules de chaque ligne, ce qui serait plutôt cohérent avec la présentation graphique (tableau à double entrée). Je ne sais pas laquelle des deux structures serait la plus juste.

Ah oui, et «Nbr de places» devrait être écrit «Nombre de places» ou peut-être «<abbr title="Nombre">Nbr</abbr> de places». Mais c'est un détail.
Modifié par Florent V. (03 Jun 2008 - 14:03)

... N'oublie pas non plus d'indiquer les changements de langue avec des <td lang="de"> quand c'est nécessaire...

Le summary devrait indiquer la structure du tableau, c'est-à-dire aider la personne qui y accès par un lecteur d'écran à s'en faire une image mentale : décris le nombre de colonnes, les relations entre les lignes, etc. En l'état, le summary reprend le caption (même remarque que Florent V. à ce sujet), ce qui est un indice de mauvais emploi soit de l'un, soit de l'autre: le summary décrit le tableau, le caption en donne une légende.

a écrit :

Ah oui, et «Nbr de places» devrait être écrit «Nombre de places» ou peut-être «<abbr title="Nombre">Nbr</abbr> de places». Mais c'est un détail.

Non, ce n'est pas un si petit détail que ça. IL ne faut pas oublier que certains lecteurs d'écran sont configurables pour lire l'en-tête à chaque fois, d'où une abréviation qui peut devenir nécessaire. Sauf erreur de ma part, la balise th possède un attribut abbr à cet effet. Je n'en connais pas l'utilisation exacte cependant, cf. la spec.

QuentinC a écrit :
Sauf erreur de ma part, la balise th possède un attribut abbr à cet effet. Je n'en connais pas l'utilisation exacte cependant, cf. la spec.

Effectivement, abbr est à la fois un élément et un attribut.

Bonjour,

Merci pour vos indications.
J'ai corrigé le tableau en fonction de vos indications (summary, caption, abbr., etc.)
J'ai néanmoins gardé le scope="row", dans la mesure où il est recommandé par le W3C : http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.4.1


Voici le code source du tableau corrigé, qui peut intéresser d'autres personnes confrontées à cette problématique.

<table style="height: 428px;" summary="Ce tableau donne la liste des accords internationaux par pays de l'Ecole. Il est composé de 6 colonnes correspondant aux champs suivants : pays, ville, établissement, domaine, nombre de places, durée. Les 12 rangées du tableau présentent les pays concernés par ordre alphabétique d'Allemagne à Espagne" align="" border="1" cellpadding="1" cellspacing="1"><tbody><tr></tr></tbody><caption>Liste des accords internationaux par pays</caption> <tbody><tr style="color: rgb(179, 80, 17);"><th scope="col" style="text-align: center; font-weight: bold;">Pays</th><th scope="col" style="font-weight: bold; text-align: center;">Ville</th><th scope="col" style="font-weight: bold; text-align: center;">Etablissement</th><th scope="col" style="font-weight: bold; text-align: center;">Domaine</th><th scope="col" style="font-weight: bold; text-align: center;"> <abbr title="Nombre">Nbr</abbr> de places</th><th scope="col" style="font-weight: bold; text-align: center;">Durée</th></tr><tr><td scope="row" style="font-weight: bold; color: rgb(179, 80, 17);">Allemagne</td><td>Braunschweig</td><td><a href="http://www.tu-braunschweig.de/">Technische Universitãt Braunschweig</a></td><td>Sciences pour l'ingénieur
</td><td>2</td><td>3 mois
</td></tr><tr><td scope="row" style="color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td>Berlin</td><td><a href="http://www.hu-berlin.de/">Humboldt Universität, Wirtschaftswissenschaftliche Fakultät, Institut für Finanzwissenschaft</a></td><td>Economie</td><td>2</td><td> 5 mois
</td></tr><tr><td scope="row" style="color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td>Berlin</td><td><a href="http://www.hu-berlin.de/">Humboldt Universität, Institut für Sozialwissenschaften</a></td><td>Sciences sociales</td><td>2</td><td>9 mois</td></tr><tr><td scope="row" style="color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td>Berlin</td><td><a href="http://www.geschichte.hu-berlin.de/site/alias__geschichte.hu-berlin/lang__de/mid__11291/ModeID__0/PageID__381/3551/default.aspx">Humboldt-Universität-Institut für Geschichtswissenschaften</a></td><td>Histoire</td><td>2</td><td> 10 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td style="vertical-align: top;">Dusseldorf
</td><td style="vertical-align: top;"><a href="http://www.fh-duesseldorf.de/">Fachhochschule Dusseldorf</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur</td><td style="vertical-align: top;">1
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Allemagne
</td><td style="vertical-align: top;">Kaiserslautern
</td><td style="vertical-align: top;"><a href="http://www.uni-kl.de/">Technische Universität Kaiserslautern</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur</td><td style="vertical-align: top;">1
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Allemagne</td><td style="vertical-align: top;">Kassel</td><td style="vertical-align: top;"><a href="http://cms.uni-kassel.de/">Universitãt Kassel</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur</td><td style="vertical-align: top;">1
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Belgique
</td><td style="vertical-align: top;">Louvain
</td><td style="vertical-align: top;"><a href="http://www.uclouvain.be/">Université catholique</a></td><td style="vertical-align: top;">Ingénieries et technologies
</td><td style="vertical-align: top;">2
</td><td style="vertical-align: top;">10 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Belgique
</td><td style="vertical-align: top;">Anvers
</td><td style="vertical-align: top;"><a href="http://www.ua.ac.be/">Universiteit Antwerpen</a></td><td style="vertical-align: top;">Economie
</td><td style="vertical-align: top;">3
</td><td style="vertical-align: top;">6 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Espagne
</td><td style="vertical-align: top;">Valencia
</td><td style="vertical-align: top;"><a href="http://www.upv.es/menuc.html">Universidad Politécnica de Valencia</a></td><td style="vertical-align: top;">Sciences pour l'ingénieur
</td><td style="vertical-align: top;">2
</td><td style="vertical-align: top;">6 mois
</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Espagne</td><td style="vertical-align: top;">Madrid</td><td style="vertical-align: top;"><a href="http://www.uc3m.es/">Universidad Carlos III de Madrid</a></td><td style="vertical-align: top;">Economie</td><td style="vertical-align: top;">2</td><td style="vertical-align: top;">9 mois</td></tr><tr><td scope="row" style="vertical-align: top; color: rgb(179, 80, 17); font-weight: bold;">Espagne</td><td style="vertical-align: top;">Madrid
</td><td style="vertical-align: top;"><a href="http://www.uc3m.es/">Universidad Carlos III de Madrid</a></td><td style="vertical-align: top;">Histoire</td><td style="vertical-align: top;">2</td><td style="vertical-align: top;">9 mois
</td></tr><tr></tr></tbody></table>

...et un petit td { vertical-align: top; } pour alléger le tout ?

Bonjour,

Voici quatre ressources intéressantes :

* tutoriel "Des tableaux plus simples" par Frédéric Cavazza (pas-à-pas) ;
* article "Au tableau !" sur Pompage : comment utiliser les tableaux pour mettre en forme des données tabulaires ;
* article anglophone " Accessible Data Tables" sur WebUsability (déja cité dans le sujet "[ajout de tuto- deja fait] Réalisation d'un tableau") ;
* outils "constructeur de tableau accessible" sur Accessify (j'ignore ce qu'il vaut).
Modifié par accessibilisation (07 Jul 2008 - 10:20)

il est également déconseillé d'utiliser scope pour des tableaux à double entrées (entete en sens de lecture horizontale et verticale) car certaines versions de lecteurs d'écran ne le gèrent pas correctement. Dans ce cas, il est préférable d'utiliser les attributs id et headers

Bonjour, je fais remonter le sujet parce que j'ai un problème avec un tableau et JAWS.

J'ai construit mon tableau en suivant les recommandation de cette page :

<table>
	<tr>
		<th id="t1">Header 1</th>
		<th id="t2">Header 2</th>
		<th id="t2">Header 3</th>
	</tr>
	<tr>
		<td headers="t1">Line header 1</td>
		<td headers="t2">Cell 1</td>
		<td headers="t3">Cell 2</td>
	</tr>
	<tr>
		<td headers="t1">Line header 2</td>
		<td headers="t2">Cell 3</td>
		<td headers="t3">Cell 4</td>
	</tr>
</table>

Mais quand j'utilise JAWS, il ne cite pas les header avant le contenu des cellules comme la recommandation le suppose (oui might c'est pas une certitude mais bon).

Donc, comme je ne suis pas vraiment experte (ni même très à l'aise) avec JAWS, j'aurais voulu savoir s'il s'agit d'un problème de configuration de JAWS ou si c'est mon tableau qui pose problème.

Merci d'avance.

Bonjour,

Quelle est la version de Jaws?
Et le même tableau avec scope plutôt que id et headers, est-ce que ça passe?

Version 7.10

et non, même résultat avec scope