Tableau et accessibilité

Bonjour

J'essaye d'améliorer un tableau pour le rendre plus accessible, mais je ne suis pas très sure de ce que je fais : par exemple, le nommage des id est-il important ? je n'ai pas mis d'id au premier th "Voiture", préférant mettre un en-tête de ligne avec la marque, est-ce bien, mal ?
Merci d'avance.

<table summary="Tableau des tarifs journaliers de location de voitures en basse saison avec catégories et caractéristiques pour chaque voiture">
<caption>Tarifs journaliers basse saison  - De mai à juin et de septembre à novembre</caption>

<thead>
<tr>
<th>Voiture</th>
<th id="categorie">Catégorie</th>
<th id="caracteristiques">pl=places - p=portes</th>
<th id="1-semaine">1-6 jours</th>
<th id="2-semaines">7-14 jours</th>
<th id="3-semaines">15-29 jours</th>
<th id="1-mois">30 jours et plus</th>
</tr>
</thead>

<tbody>
<tr>
<th id="voiture-1">Nissan Micra</th>
<td headers="voiture-1 categorie">A</td>
<td headers="voiture-1 caracteristiques">5pl 5p essence</td>
<td headers="voiture-1 1-semaine">24&euro;</td>
<td headers="voiture-1 2-semaines">23&euro;</td>
<td headers="voiture-1 3-semaines">22&euro;</td>
<td headers="voiture-1 1-mois">19&euro;</td>
</tr>
<tr>
<th id="voiture-2">Opel Corsa</th>
<td headers="voiture-2 categorie">B</td>
<td headers="voiture-2 caracteristiques">5pl 5p essence</td>
<td headers="voiture-2 1-semaine">28&euro;</td>
<td headers="voiture-2 2-semaines">26&euro;</td>
<td headers="voiture-2 3-semaines">24&euro;</td>
<td headers="voiture-2 1-mois">22&euro;</td>
</tr>
<tr>
<th id="voiture-3">Opel GT Roadster</th>
<td headers="voiture-3 categorie">G</td>
<td headers="voiture-3 caracteristiques">2pl 2p essence</td>
<td headers="voiture-3 1-semaine 2-semaines" colspan="2">190&euro;</td>
<td headers="voiture-3 3-semaines 1-mois" colspan="2">Nous consulter</td>
</tr>
</tbody>

</table>

Modifié par cilou (30 Dec 2011 - 17:29)

Salut,

Beau travail. Deux remarques, toutefois :
1. la valeur de l'attribut id ne doit pas commencer par un chiffre ;
2. il est préférable d'inverser l'ordre de présentation des valeurs des attributs headers, en commençant par celle de l'en-tête de colonne, puis par celle de la ligne, de façon à s'assurer que les lecteurs d'écran, lorsqu'ils restituent les associations entre la cellule de données lue et les cellules d'en-tête correspondantes, disent bien, par exemple : « 7-14 jours, Nissan Micra, 23 € ».

Victor BRITO a écrit :
1. la valeur de l'attribut id ne doit pas commencer par un chiffre ;

Hello,

Pour apporter mon petit grain de sel inutile : les id commençant par un chiffre sont autorisés en HTML5

Bonnes fêtes !

Ah tiens, même un chiffre seul (pléonasme) : http://www.w3.org/TR/html5/elements.html#the-id-attribute

Je sais qu'il ne faut pas mélanger les sujets mais comme mon tableau ne rentrait pas en largeur dans Windows Phone Emulator (testé aussi sous IE9 en rétrécissant la fenêtre), j'ai du rajouter

table {
  width: 100%;
  table-layout: fixed;
}

à la feuille de style de base pour le web mobile (http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html) pour que le word-wrap: break-word soit pris en compte.

Raphael a écrit :
Pour apporter mon petit grain de sel inutile : les id commençant par un chiffre sont autorisés en HTML5

Tu aurais pu ajouter qu'en HTML 5, l'attribut summary était condamné ou, du moins, que son avenir était incertain.

<troll>
De toute façon, HTML 5 et accessibilité ne font pas (encore) bon ménage.
</troll>

les id/headers ne sont pas systématiquement interprétés par JFW13+IE9. En fait, ils ne deviennent vraiment utiles que quand il y a plus d'une ligne ou plus d'une colonne d'en-têtes, ou quand il y a des cellules fusionnées. Pour les tableaux réguliers avec une ligne et une colonne d'en-têtes, ce n'est pas forcément nécessaire.

LE plus important étant caption et une distinction correcte entre cellules de données et d'en-têtes, et ne pas vouloir remplacer un titre par une caption. Summary est toujours interprété mais outre qu'il risque effectivement de disparaître en HTML5, il n'est après tout pas si indispensable que ça.

IL faudrait tester sur une page, mais à priori ton exemple est tout bon.

Merci Quentin pour ces précisions.