5568 sujets

Sémantique web et HTML

Des tableaux accessibles, comment faire ?

J'ai plusieurs questions sur ce qu'il faudrait faire pour rendre un tableau accessible sans surcharger le code :

Faut-il associer un attribut "headers" à chaque <td> ?
Faut-il associer un attribut "scope" à chaque <th> ?
A quoi sert l'attribut "axis" ?

Je suis un peu perdu avec tout ça, merci de votre aide.
D'accord mais les navigateurs pour personnes mal-voyantes ne détèctent pas automatiquement certaines correspondances ? Lorsqu'on a des <td> dont la colonne ne comporte qu'un <th>, il n'est pas détecté automatiquement ?
Il faut expliciter les relations entre les td et les th. Pour cela, il y a deux méthodes qui marchent en pratique.

1. si le tableau est unidimensionnel (par exemple, une ligne ou une colonne de titres sous la forme de th). Dans ce cas, on peut écrire <th scope="row"> ou <th scope="col">. Les lecteurs d'écran comprendront alors le lien logique entre les cellules de données de la ligne (respectivement de la colonne) et la cellule d'entête.

2. Si le tableau a plusieurs entrées. Par exemple, une ligne de titres avec des cours de bourse moyens sur plusieurs mois, et une colonne de titres avec des noms d'entreprise. Dans ce cas, on utilise <th id="jan2006">Janvier 2006</th> et <th id="areva">Areva</th>, et on combine dans le td: <td headers="jan2006 areva">blabla</td>.

Si le titre est trop long (par exemple "Niveau de l'eau dans le puits de la ferme du Grand Matthieu"), on peut l'abréger avec l'attribut abbr: <th abbr="Eau du puits">Niveau de l'eau dans le puits de la ferme du Grand Matthieu</th>. Cela permet aux lecteurs d'écran de ne pas reprendre systématiquement tout l'intitulé à chaque nouvelle cellule de données rencontrée.
Modifié par Gilles (20 Apr 2006 - 19:15)
Donc, tant que mon tableau à une forme du type A (cf ci dessous) le lecteur comprendra la relation entre le titre et la cellule mais dès qu'on passe à un exemple de l'ordre du tableau B, il faut utiliser "headers".

Tableau A (pour reprendre ceux d'Openweb)
http://openweb.eu.org/articles/tableaux_css/annexes/tab3.png

Tableau B
http://openweb.eu.org/articles/tableaux_css/annexes/tab6.png

Je pensais que même dans le second cas on n'avait pas besoin de spécifier la relation qui pourrait être logique, ça m'évitera de faire des erreurs.
Bonjour,

Tout dépend de la complexité de ton tableau. Si celui-ci est relativement simple tu peux te limiter à l'attribut scope pour indiquer les relations.

Par exemple:
<table summary="Tableau des effectifs de Walt Disney">
<caption>Effectifs</caption>
<tr>
<td></td>
<th scope="col">Prénom</th>
<th scope="col">Age</th>
</tr>
<tr>
<th scope="row">Duck</th>
<td>Daffy</td>
<td>80</td>
</tr>
<tr>
<th scope="row">Mouse</th>
<td>Mickey</td>
<td>80</td>
</tr>
</table>


header nécessite de déclarer un id unique à chaque entête, ce qui est utile pour des tableaux plus compliqués ou irrégulier, mais complexifie un peu la réalisation.
Par exemple:
<table summary="Tableau des effectifs de Walt Disney">
<caption>Effectifs</caption>
<tr>
<td rowspan="2"></td>
<th rowspan="2"id="prenom">Prénom</th>
<th colspan="2" id="etatcivil">Etat civil</th>
</tr>
<tr>
<th id="sexe">Sexe</th>
<th id="age">Age</th>
</tr>
<tr>
<th id="duck">Duck</th>
<td>Daffy</td>
<td headers="duck etatcivil sexe">Homme</td>
<td headers="duck etatcivil age">80</td>
</table>
D'accord, donc pour reprendre les exempels que j'ai donné l'asociation des cellules à leurs titres se fera correctement sans indications d'headers même avec l'exemple B ?
Yom a écrit :
D'accord, donc pour reprendre les exempels que j'ai donné l'asociation des cellules à leurs titres se fera correctement sans indications d'headers même avec l'exemple B ?


Tu as mal compris.

Quand il y a une seule ligne de th, ou bien une seule colonne, alors il faut utiliser scope. C'est le cas de l'exemple A. Dans le cas de l'exemple B, il faut utiliser id/headers.

L' « association » ne se fait pas magiquement. Tu dois utiliser soit scope, soit id/headers pour qu'elle ait lieu, et que les lecteurs d'écran associent correctement les td au()x th correspondant(s) (je parle ici non pas d'un être humain qui lirait l'écran, mais bien d'un type de logiciel appelé comme ça).
Pour les lecteurs, je parle moi aussi de ce qui permet à un aveugle de naviger sur le web.

Cependant, si j'en crois Igor même pour l'exemple B l'association est automatiquement comprise (avec le coup de pouce de scope) ...

Tu as l'air de dire que l'on est pas obligé de combiner "scope" et "headers" (+ "id"), je ne trompe pas là dessus ?
Yom a écrit :
Pour les lecteurs, je parle moi aussi de ce qui permet à un aveugle de naviger sur le web.

Cependant, si j'en crois Igor même pour l'exemple B l'association est automatiquement comprise (avec le coup de pouce de scope) ...

Tu as l'air de dire que l'on est pas obligé de combiner "scope" et "headers" (+ "id"), je ne trompe pas là dessus ?


Igor n'a pas analysé l'exemple B. En théorie, scope marcherait pour cet exemple. Mais en pratique, les lecteurs d'écran ne gèrent pas la combinaison de scope="row" et scope="col". Donc dans ce cas, on doit utiliser id/headers.

Et effectivement, on utilise soit scope, soit le duo id+headers. Pas les deux ensemble.
Gilles a écrit :
Mais en pratique, les lecteurs d'écran ne gèrent pas la combinaison de scope="row" et scope="col".

Merci ! C'est exactement ce que je voulais savoir.

Juste pour être bien sûr : axis va permettre d'interroger le tableau sur un point (par exemple : auteur="Tristan Nitot"). Mais pour le rendre efficace il faut préciser les axes avant le tableau (ou dans summary par exemple) ???
Sujet clos
Aller à