Question accessibilité tableau, headers & cie

5 views
Skip to first unread message

Thomas Parisot // Oncle Tom

unread,
Nov 25, 2009, 5:12:06 AM11/25/09
to webd...@googlegroups.com
J'ai un collègue qui me posait la question au sujet de l'attribut «headers» des <table> mais j'avoue que je sèche.
Moteur, action !

~~

J'ai une petite question HTML !
Je veux faire un tableau (pour des données tabulaires), avec des lignes de cette façon :

<table (...)>
[<caption> tout ça, tout ça, mais pas de tr avec que des th = pas de ligne "d'entête"]
<tr>
  <th scope="row">
    Mon titre de ligne
  </th>
  <td>
    ma belle valeur 1
  </td>
  <td>
    ma encore plus belle valeur 2
  </td>
  <td>
    ma valeur un peu moins belle 3
  </td>
</tr>
<tr>
  (...)
</tr>
</table>

et ma question est de savoir si les headers marcheront pour un lecteur d'écran dans mon cas. C'est à dire faire un truc dans ce genre :

<table (...)>
[<caption> tout ça, tout ça, mais pas de tr avec que des th = pas de ligne "d'entête"]
<tr>
  <th id="ma-super-ligne" scope="row">
    Mon titre de ligne
  </th>
  <td headers="ma-super-ligne">
    ma belle valeur 1
  </td>
  <td headers="ma-super-ligne">
    ma encore plus belle valeur 2
  </td>
  <td headers="ma-super-ligne">
    ma valeur un peu moins belle 3
  </td>
</tr>
<tr>
  (...)
</tr>

</table>

J'ai envie de penser que ça ne pose pas de problème, et que les lecteurs d'écrans vont bien associer la valeur à l'entête de ligne, mais ce n'est qu'une supposition. Quelqu'un a un JAWS qui tourne pour tester ? Vous voyez quelques choses pour améliorer l'accessibilité d'un tableau comme ça ?

--
Thomas PARISOT
Consultant Web, accessibilité et respect des standards
http://case.oncle-tom.net/
http://twitter.com/oncletom
Mobile : +336 08 40 35 49

Julien Wajsberg

unread,
Nov 25, 2009, 6:16:38 AM11/25/09
to webd...@googlegroups.com
j'ai pas de jaws dans un coin mais je suis assez confiant pour dire
que ça marchera bien, meme sans les attribut headers.

2009/11/25 Thomas Parisot // Oncle Tom <tho...@oncle-tom.net>:

Felipe (Alsacréations)

unread,
Nov 25, 2009, 6:18:18 AM11/25/09
to Professionnels francophones du développement web
Bonjour,

c'est bien comme ça que fonctionne id et headers MAIS il est
recommandé de ne pas mélanger id/headers et scope : c'est soit l'un
soit l'autre.
Un exemple de critère et tests du futur Accessiweb 2 (version pas
définitive) http://www.braillenet.org/accessibilite/appel-commentaire-aw2/index.php
au critère 5.7 (et tu as la correspondance avec le RGAA 2.2)

En résumé,
- scope ne convient que pour associer toutes les cellules d'une
colonne ou ligne à un entête
- id/headers convient pour associer tout ou partie des cellules d'une
colonne ou ligne à un/des entêtes
- scope et id/headers ne doivent pas être utilisés simultanément

--
Philippe Vayssière
http://www.alsacreations.fr

Thomas Parisot // Oncle Tom

unread,
Nov 26, 2009, 3:57:02 AM11/26/09
to webd...@googlegroups.com
Merci pour vos retours. C'est vrai que les critères Accessiweb 2 sont explicites à ce sujet.

Je vous soumettrai le tableau final une fois en ligne, car c'est un affichage d'horaires de transports en commun et c'est potentiellement reproductible pour beaucoup d'occasions :)

2009/11/25 Felipe (Alsacréations) <philippe....@gmail.com>

Thomas Parisot // Oncle Tom

unread,
Apr 15, 2010, 8:58:16 AM4/15/10
to webd...@googlegroups.com
Hello,

plusieurs mois après, voici la mise en  application d'un tableau d'affichage d'horaires.

Des remarques particulières ? Notamment vis à vis des dates et passages par un trajet alternatif ?

Merci

2009/11/26 Thomas Parisot // Oncle Tom <tho...@oncle-tom.net>
Merci pour vos retours. C'est vrai que les critères Accessiweb 2 sont explicites à ce sujet.

Je vous soumettrai le tableau final une fois en ligne, car c'est un affichage d'horaires de transports en commun et c'est potentiellement reproductible pour beaucoup d'occasions :)

2009/11/25 Felipe (Alsacréations) <philippe....@gmail.com>


Bonjour,

c'est bien comme ça que fonctionne id et headers MAIS il est
recommandé de ne pas mélanger id/headers et scope : c'est soit l'un
soit l'autre.
Un exemple de critère et tests du futur Accessiweb 2 (version pas
définitive) http://www.braillenet.org/accessibilite/appel-commentaire-aw2/index.php
au critère 5.7 (et tu as la correspondance avec le RGAA 2.2)

En résumé,
- scope ne convient que pour associer toutes les cellules d'une
colonne ou ligne à un entête
- id/headers convient pour associer tout ou partie des cellules d'une
colonne ou ligne à un/des entêtes
- scope et id/headers ne doivent pas être utilisés simultanément

--
Philippe Vayssière
http://www.alsacreations.fr

--~--~---------~--~----~------------~-------~--~----~
Vous avez reçu ce message, car vous êtes abonné au groupe Groupe "Professionnels francophones du développement web" de Google Groupes.
 Pour transmettre des messages à ce groupe, envoyez un e-mail à
l'adresse webd...@googlegroups.com
 Pour résilier votre abonnement à ce groupe, envoyez un e-mail à
l'adresse webdevfr+u...@googlegroups.com
 Pour afficher d'autres options, visitez ce groupe à l'adresse http://groups.google.fr/group/webdevfr?hl=fr
-~----------~----~----~----~------~----~------~--~---




--
Thomas PARISOT
Consultant Web, accessibilité et respect des standards
http://case.oncle-tom.net/
http://twitter.com/oncletom
Mobile : +336 08 40 35 49
Reply all
Reply to author
Forward
0 new messages