tableaux : headers, id, scope

[shangailily]

Bonjour,

Je vois que pour les tableaux, il faut donc associer chaque cellule à son-tête correspondant.

D'après le référentiel AccessiWeb, il faut utiliser TH et ID pour les en-têtes, et HEADERS pour les cellules pour assuer l'association de la donnée à son-entête.

Alors que le W3C parle d'utilser

TH SCOPE="col"

pour les en-têtes de colonne et

TH SCOPE="row"

pour les en-têtes de ligne.

Qu'est-ce qui est mieux d'utiliser pour les personnes atteintes de cécité ?

Chaque méthode apporte-t-elle des avantages identiques ou différentes ?

Je trouve que c'est compliqué d'utiliser les codes suggérés d'AccessiWeb si on doit automatiser les tableaux avec les CMS. Vous ne trouvez pas ?

Une dernière question, quelle méthode est antérieure à l'autre ?

Merci des infos.

Modifié 13 Juin 2005 par shangailily

[Nissone]

Et pourqoi pas les deux ?!

[shangailily]

Euh oui, c'est vrai, je n'ai pas pensé à utiliser les 2 mais pour simplifier le codage, c'est mieux de n'en utiliser qu'une. ...

[Nissone]

Ce que je voulais dire c'est que je ne suis pas sûre que les deux méthodes donnent les mêmes renseignements ; pour moi, elles sont complémentaires.

th et id : pour faire correspondre un en-tête avec une cellule qui lui correspond.

thead : pour indiquer le groupe d'ensemble des th

scope : pour visualiser un peu mieux le tableau

Mais je n'en suis absolument pas sûre ! Attendons une réponse de gourou !

[shangailily]

Ohé les gourous ? Modifié 13 Juin 2005 par shangailily

[Steph. K.]

Le Seul Gourou officiel, le w3c nous dit (en français parce que bon) :

http://www.la-grange.net/w3c/html4.01/stru...s.html#h-11.2.6

C'est l'un ou l'autre. D'un point de vue accessibilité il vaut mieux utiliser les headers.

[shangailily]

Merci Steph mais en quoi les headers sont mieux que les scope en terme d'accessibilité ?

[Monique]

Bonjour,

En guise d'exemple, voilà un petit morceau d'un calendrier.

<table summary="Calendrier" border="1">
<tr>
<th id="lundi">Lundi</th>
<th id="mardi">Mardi</th>
</tr>
<tr>
<td headers="lundi">1</td>
<td headers="mardi">8</td>
</tr>
<tr>
<td headers="lundi">2</td>
<td headers="mardi">9</td>
</tr>
</table>

Dans un tableau complet sans headers, il n'est pas facile de savoir à quel jour correspond une date.

Avec l'utilisation de headers et id, une synthèse vocale ne dira pas simplement 9 mais bien mardi 9

Avec scope on aurait

<table summary="Calendrier" border="1">
<tr>
<th scope="col">Lundi</th>
<th scope="col">Mardi</th>
</tr>
<tr>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>9</td>
</tr>
</table>

Pour un tableau simple, la lecture ne sera pas différente.

Pour un tableau plus complexe, l'utilisation de scope ne donnera pas de points de repère suffisamment précis.

[Nullette]

Merci Monique

Sur tes conseils clairs j'ai modifié mes tableaux en "scope" et "col" en les remplaçant par headers et id.

Et pendant que j'y suis :

la balise <tbody> sert-elle à quelque chose ?

[shangailily]

Ok Monique, ta réponse a dissipé mes questions !

Je t'en remercie !

Bonne journée à tous ! Il fait beau, beau à Paris....

[Kennyad]

On pourrait même rajouter un caption et le tableau serait encore plus accessible. Je sais c'est pas le sujet mais comme ça on a un exemple complet

<table summary="Calendrier" border="1">
<caption>Calendrier Juin 2005</caption>
<tr>
<th id="lundi">Lundi</th>
<th id="mardi">Mardi</th>
</tr>
<tr>
<td headers="lundi">1</td>
<td headers="mardi">8</td>
</tr>
<tr>
<td headers="lundi">2</td>
<td headers="mardi">9</td>
</tr>
</table>

[Nullette]

Et au sujet de ma petite question ? :

la balise <TBODY> sert-elle à quelque chose ?

[Steph. K.]

la balise <TBODY> sert-elle à quelque chose ?

Extrait de

http://www.acces-pour-tous.net/fichiers_co...hp?rub=tableaux

Remarque préliminaire : bien que cela puisse paraître étrange, les éléments d'un tableau doivent être envoyés dans l'ordre suivant : en premier les entêtes <thead> puis le pied du tableau <tfoot> et enfin le corps du tableau <tbody>.

Cela permet lors de l'impression d'un tableau de voir se répéter sur chaque page les entêtes et le bas de votre tableau.

[Dudu]

Et au sujet de ma petite question ? :

la balise <TBODY> sert-elle à quelque chose ?

Toute seule, non. Il faut qu'elle soit accompagnée de <thead> et <tfoot>.

Ensuite, est-ce utile de mettre ces 3 balises-là ou non -> çà dépend du tableau.

[Matthieu Faure]

Salut,

Réponse un peu tardive, mais mieux vaut tard que jamais

En deux mots: scope est plus simple d'emploi mais plus limité. Cette technique est acceptable lors d'une certification.

Utiliser les HEADERS et ID peut paraitre un peu plus compliqué. Maintenant, une fois que tu as compris le fonctionnement ça roule tout seul . L'intérêt de cette méthode c'est qu'elle permet de gérer les tableaux à double entrée.

Exemple sur un site labelisé (Planetarium Galilée):

http://www.planetarium-galilee.com/infos-p...res-des-seances

où le contenu d'un header fait référence à deux ID de TH: une entête de ligne (l'heure) et une entête de colonne (le jour).

Matthieu

[Nullette]

Merci pour vos réponses. Cela fait longtemps que je me casse la tête avec les tableaux.

Je devrais prendre quelques jours de repos pour tout lire à ce sujet

Ce qui me bloque (façon de parler) est que au départ j'avais un tableau tout simple.

Puis je me suis intéressée à l'accessibilité et j'ai mis mes tableaux avec les "scope" et "col", puis avec les "tbody" "tfoot" et, dernièrement avec les "headers". Là où je "bloque" est que, à l'affichage, je ne vois aucune différence et ne me rends donc pas compte des plus et des moins.

Le seul problème que j'ai est que mes colonnes se déforment lorsque le texte est trop long et je remplis mes colonnes de la balise <br> (dans les tableaux de Planetarium se problème n'est pas présent, je suppose qu'il y a quelque chose à indiquer dans la feuille de style).

Bon, j'arrête mon bla-bla sur les tableaux et continue de vous lire et d'apprendre.

[Nullette]

Bonjour,

au sujet des tableaux, W3C me signale des erreurs car j'ai plusieurs tableaux sur une même page, qui traitent des mêmes sujets :

ID "DATE" already defined, ID "Sujet" already defined, etc

Si je modifie les "ID" les tableaux ne seront plus lisibles côté accessibilité.

Comment pourrais-je corriger ?

[Monique]

Bonjour,

Un identificateur assigne un nom à un élément, il doit donc forcément être unique dans un document sous peine de confusion.

La seule solution est donc de les différencier comme tu pourrais le faire dans une feuille de style pour des identificateurs de menus par exemple #menu-vertical, #menu-horizontal...

A toi de voir dans ton cas

[Nullette]

Merci Monique. Tu m'as fait prendre conscience que j'avais mal compris le rôle de l'identificateur.

J'avais cru que mon identificateur "Date" était lu ou vu par les personnes mal voyantes ou mal entendantes.

J'avais vraiment tout faux !!

PS

Ceci dit, à mes heures perdues j'ai retiré quelques tableaux non indispensables dans une de mes pages.

Modifié 5 Août 2005 par Nullette