Après lecture des moultes documents sur l'accessibilité, il apparait qu'un site devrait abandonner toute mise en page via les tableaux et opter pour une mise en page par CSS.

Quand je lis les points de controles ici le niveau 1 semble ne pas exclure les tables pour la mise en page. Mais quand je lis là les tables ne doivent etre utilisées que pour des données tabulaires et non pour la mise en page.

Ma question est peut on faire un site accessible (A, ou AA) avec cependant une mise en page par tables? et si oui quelles sont les regles à respecter? (car malheuereusement les developpeurs sont extremement reticents à abandonner les sacro sainte tables...)

Sémantiquement, c'est en effet une erreur d'utiliser des tableaux pour sa mise en page.
Et il est possible de s'en affranchir par l'utilisation de la surcouche CSS. Théoriquement...

En pratique, les propriétés CSS sont actuellement, tu le sais, très mal implémentés dans certains navigateurs et c'est pourquoi il est encore toléré d'utiliser quelques tableaux pour la présentation globale.

Et afin de rendre accessible ces fameux tableaux, je te conseille de suivre cet exemple.
Cela permet de linéariser correctement l'information, tout simplement.

En espérant avoir répondu correctement à ta question et n'avoir pas trop dit de bêtises.

Bonjour,

Jusqu'il y a peu, ma réponse aurait été catégorique : pas de tableau pour la mise en page !
Aujourd'hui j'hésite, notamment depuis que j'ai testé des sites avec Lynx et Jaws.
Ce qui est absolument à éviter, ce sont les tableaux imbriqués bien sûr puisqu'ils ne permettent en aucun cas une lecture des informations dans un ordre logique.
Je t'invite à relire Les critères d'accessibilité d'un site où yobiwan s'est battu seul contre tous


Oui c'est possible, mais il faut veiller à ce que les informations soient réparties dans le tableau de manière à être lues de manière logique (comme s'il n'y avait pas de tableau, ce qui peut se tester avec Opera en décochant l'option "Tableaux" dans Fichiers>Préférences>Style de la page>Mode utilisateur).
Il ne faut pas utiliser les balises th et caption, à réserver aux tableaux de données.
Et bien sûr ne pas utiliser de tableaux imbriqués.

J'ai un petit coté calimero je sais ;o)

Je te resumerais donc ce que j'avais avancé à l'époque et que je continue de pense meme si j'espere pouvoir me tromper un jour.

WAI n'interdit pas (je me répète non ? ) de faire des tableaux pour la mise en forme à partir du moment ou leur contenus est linearisable, totu en préconisant de faire des CSS pour la mise en forme lorsue c'est possible.

Aujourd'hui comme le dit bien 20cent


En plus du fait que les solutions proposées ne répondent pas toujours aux problèmes d'accessibilité sous jacents.

Les solutions mixtes sont pour moi la meilleure solution a partir du moment ou l'on évite les tableaux imbriqués et qu'on utilise les CSS au max des possibilités/limites qu'elles nous fournissent.

Ouf merci de vos réponses! Car c'est tres dur de faire changer les habitudes de production/programmation. Aussi, si on peut trouver des compromis c'est tres bien, mieux vaut tendre vers plus d'accessibilité que pas d'accessibilité du tout

En utilisant les tableaux HMTL simples (en limitant le nombre de rowspan et de colspan) et en évitant les imbrications qui n'en finissent plus, on peut arriver à créer des tableux qui se linéarisent pas si mal... Du coup, la lecture avec un synthétiseur vocal est toujours possible, bien que parfois plus ardue. Rien ne battra des <div> bien positionnés, mais quand on ne dispose pas d'autres choix, il faut bien vivre avec.

Cependant, pour aider un peu l'utilisateur, je préconiserais d'utiliser l'attribut "summary" dans les <table>, ne serait-ce que pour leur indiquer que le tableau qui suit sert uniquement à faire de la mise en page.

L'astuce dans l'article cité plus haut utilise pourtant rowspan pour présenter le contenu avant le menu?



Ca ne va pas au contraire parasiter le contenu?

Ah bin justement ce post tombe bien (merci Sebastien !!) car je me pose actuellement la question.

Ceux qui fréquentent la section "html - css" verront qu'en ce moment les CSS hantent mes nuits et mes jours car je profite de la refonte totale d'un modeste site perso pour me plonger dans la création via CSS et tant que faire se peut, de l'accessiblité qui va avec.

Or, au fur et à mesure de mon avancement, je me pose sincèrement la question ... faut-il du 100 % CSS ? Certes le 100 % <table> n'est pas LA solution mais ... peut-être est-ce parce que je ne maitrise que 5% des possibilités CSS, parfois j'ai l'impression que le recours à un tableau tout simple avec qq lignes et qq colonnes m'éviterait la création et la superposition de couches et autres <div> même si je l'avoue modestement, cela ne serait pas forément pour mettre en page des données tabulées.

En effet, la structure globale de mes pages est en classe d'éléments, je ne reviens pas dessus et j'apprécie d'ailleurs l'avantage apporté par cette technique récemment découverte.

Mais ... lorsque dans mon cadre de contenu principal, je souhaite insérer une photo tantot en haut à droite, tantot en bas à droite, tantot à gauche, tantot au centre .... devrais-je créer autant de classes que de positions pour mon (ou mes) images ?

En tant que newbie de chez newbie, qui vient de l'école <table>, j'aurais tendance à vouloir appliquer des CSS pour la structure globale de mes pages, sans pour autant négliger la facilité de quelques tableaux simples et bien pensés pour gagner en praticité dans quelques pages que je voudrais différencier ...

Ai-je totalement tort ?

.... De toutes façons je suis du genre ... ne rien faire dans l'excès ... donc pas d'excès de <table> et pas d'excès de CSS ... car avec les modestes connaissances dont je dispose en CSS ... je sens que je vais devoir multiplier les <div> .... ce que je répugne à faire ... (parait que c pas bien ....) ;-)

J'ai bien dit de limiter le nombre de rowspan et de colspan, pas de les éradiquer complètement de tes habitudes. Le problème, c'est lorsqu'il y en a tellement qu'une confusion est créée lors de l'interprétation linéaire au moment de la lecture.

Non, puisque visuellement, c'est invisible et que pour un contexte de synthèse vocale, ça aidera à comprendre ce quis'en vient comme contenu.

Bonjour Wanbli,

Une des grosses difficultés quand on a appris a travailler avec les tableaux, c'est de se défaire de l'idée que "cellule = div". Il faut s'habituer à utiliser des balises spécifiques.

Un exemple pour afficher une alternance du genre
texte image
image texte
texte image
basé sur l'article Boîtes bloc, boîtes en ligne et propriété display d'Openweb

la css

le html

Cela te donnera la même disposition qu'avec un tableau de 2 colonnes et 3 lignes.

Certes Monique certes ...

En fait en m'instruisant progressivement, je pense que je me détache de cette idée <cell> = <div> ... c'est déja une victoire au niveau des menus ...

Je suis tout à fait consciente que c'est le manque de connaissances qui m'incite à faire des erreurs et à me cacher derrière ce qui est inconnu ... Car l'inconnu fait peur ...

Question subsidiaire : quelle technique pour une présentation d'images en vignettes ? Là, vous me confirmez qu'un tableau tout bête de 5 lignes x 5 cellules régulières est quand meme une solution adaptée ?

Oui, selon moi, c'est adapté.

Mais il existe toutefois d'autres alternatives avantageuses :

• http://www.pompage.net/pompe/listesdefinitions/
• http://www.pompage.net/pompe/csspratique/

C'est d'ailleurs ce que j'ai (rapidement) réalisé sur mon site : http://www.20cent.net/docs/

Pour une liste de vignettes, le mieux et le plus simple, c'est encore d'utiliser un float:left... Enfin c'est un avis personnel évidemment

Oui, en autant que les contenus de chacuns des éléments en float: left; soient sensiblement de même dimensions (au moins en terme de hauteur)...

Bien bien bien .....

Je note ......


Je testerai dès que poss' .... et après tests concrets j'apporterai mon humble avis sur la question ....

Dans le cas on je ne peux pas utiliser l'astuce cité à http://www.la-grange.net/accessibilite/day_10.html puis-je faire un tableau classique mais placer un lien "acceder au contenu directement" invisible aux navigateurs graphique? L'accessibilité me semble ainsi preservée

non, pas vraiment, parce que celui qui navigue par l'intermédiaire d'un navigateur graphique (soit au clavier, soit avec un lecteur d'écran comme Jaws, qui est une surcouche d'IE) ne pourra pas utiliser ces liens s'ils sont masqués.

Le mieux est donc de les faire discrets, certes, mais quand même utilisables dans un navigateur graphique...

Ok merci Nudrema

Très intéressant tout ça.
Bon, en pratique, la plupart des sites ont un tas de tableaux imbriqués.
Par quoi faut-il commencer pour les transformer de manière "propre" ?

Pour être simple (désolé si c'est trop simple pour vour):

comment remplacer ceci de manière accessible:

<table>
<tr>
<td> <table>
<tr>
<td>ligne1</td>
</tr>
<tr>
<td>ligne2</td>
</tr>
<tr>
<td>ligne3</td>
</tr>
<tr>
<td>ligne4</td>
</tr>
</table></td>
<td> contenu </td>
</tr>
</table>

Bonjour,

Il est certainement préfèrable de réserver les éléments table à leur véritable destination (présenter des données tabulaires) et de privilégier l'utilisation des CSS pour la mise en page.
A ce sujet, tu liras certainement avec intérêt cette longue discussion acharnée Les critères d'accessibilité d'un site.

Ce qu'il faut à tout prix éviter, ce sont les tableaux imbriqués qui brisent la logique de lecture.
Il faut savoir qu'un tableau est lu ligne par ligne. Dans cet exemple, le 1er tableau sera lu correctement (dans l'ordre logique des nombres), le 2eme non


Dans ton exemple, le tableau imbriqué peut être remplacé par une liste

avec une règle de style pour supprimer les puces


Je te recommande ces deux sites pour découvrir les techniques de mises en pages CSS, qui permettent d'éviter les tableaux
- OpenWeb
- Alsacreations

Et surtout, n'hésite jamais à poser une question, même si tu la crois simple... tout le monde est débutant en abordant un nouveau domaine B)

Allez, je vais t'aider mais pas de la manière que tu attends

IL existe un petit livret nommé "Créer des sites web accessibles à tous" qui donne ceci :

-1- créer un résumé - attribut summary de l'élément table - pour expliquer brièvement la fonction de ce tableau, et le type d'informations apportées.
-2- utilisez l'élément caption pour donner un titre au tableau.
-3- identifiez correctement les entêtes de colonne - élément th
-4- utilisez les éléments thead, tbody, tfoot

Pour finir, le W3C fourni un utilitaire nommé Tablin : http://www.w3.org/WAI/References/Tablin/

Tu n'a rien compris ? ne sais pas ce que sont les éléments th, thead, tbody, tfoot ?
Lis donc cet article de l'OpenWeb Group sur l'habillage des tableaux en CSS : http://openweb.eu.org/articles/tableaux_css/

PS : ooops, le temps d'écrire ce post et Monique te répondait déjà... ce qui est une autre possibilité intéressante !

Merci ste, je ne connaissais pas le Tablin B)

Elo,

Je ne connaissais pas non plus, jusqu'à ce que j'achète ce petit bouquin sur l'accessibilité...
et, je suis prêt à parier qu'il y'en a pas beaucoup qui le connaisse

Pour info, la linéarisation d'un tableau peut aussi être faite sans application ou script spécifique, avec une simple CSS utilisateur.

Je reproduis ici celle par défaut d'Opera (mode utilisateur disable table):

Ca marche que sous Mozilla non ?
sous IE 6 et opera 7 a pas l'air d'être efficace sur mon PC.

Je sais c'est au navigateurs à s'adapter mais bon ... si encore 95 % des utilisateurs trouvent les données en tableau alors que le developpeur veut mettre du linéaire ca reste dommage.

heu... C'est une des CSS fournie par défaut avec Opera... qui s'applique quand on choisit le style utilisateur "Disable table"... Donc on peut espérer que ça marche dans celui-ci

Sinon, ça ne marche effectivement pas dans IE, trop pauvre sur le support de "display".

ça n'est pas à utiliser au final, mais plutôt comme un autre moyen de voir ce que donne un tableau une fois linéarisé.