Mise en page par tables et accessibilité

[Sebastien]

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...)

[20cent]

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.

Modifié 16 Juin 2004 par 20cent

[Monique]

Bonjour,

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.

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

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...)

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.

[yobiwan]

yobiwan s'est battu seul contre tous

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 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."

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.

[Sebastien]

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

[Denis]

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.

[Sebastien]

en limitant le nombre de rowspan et de colspan

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

je préconiserais d'utiliser l'attribut "summary" dans les <table>

Ca ne va pas au contraire parasiter le contenu?

[Wanbli]

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 ....) ;-)

[Denis]

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

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.

Ca ne va pas au contraire parasiter le contenu?

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

[Monique]

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

.enligne li {
 	 display: inline;
 	 list-style-type: none;
 	 padding: 0.5em;
 	 margin: 1em;
  width: 10em;
  }
  img {
 	 border: 0;
 	 vertical-align: middle;
  }

le html

<ul class="enligne">
  <li>texte texte texte texte</li>
  <li><img alt="hub" src="hub.png" height="80" width="140" /></li>
</ul>
<ul class="enligne">
  <li><img alt="hub" src="hub.png" height="80" width="140" /></li>
  <li>texte texte texte</li>
</ul>
<ul class="enligne">
  <li>texte texte texte texte texte</li>
  <li><img alt="hub" src="hub.png" height="80" width="140" /></li>
</ul>

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

[Wanbli]

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 ?

[20cent]

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/

[Nudrema]

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

[Denis]

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

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)...

[Wanbli]

Bien bien bien .....

Je note ......

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

[Sebastien]

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

[Nudrema]

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...

[Sebastien]

Ok merci Nudrema

[finidori]

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" ?

[finidori]

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>

[Monique]

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

<table>
 <tr>
   <td>un</td>
   <td>deux</td>
</tr>
 <tr>
   <td>trois</td>
   <td>quatre</td>
 </tr>
</table>


<table>
 <tr>
   <td>un</td>
   <td>trois</td>
</tr>
 <tr>
   <td>deux</td>
   <td>quatre</td>
 </tr>
</table>

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

<ul>
<li>ligne1</li>
<li>ligne2</li>
<li>ligne3</li>
<li>ligne4</li></ul>

avec une règle de style pour supprimer les puces

  li {
 	 list-style-type: none;
  }

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

[ste]

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 !

Modifié 28 Juillet 2004 par ste

[Monique]

Merci ste, je ne connaissais pas le Tablin

[ste]

Merci ste, je ne connaissais pas le Tablin 

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

[LaurentDenis]

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):

@charset "UTF-8";
/*
Name: Disable tables
Version: 1.01
Author: Opera Software ASA
Description: This style sheet disables tables.

Copyright © 2003 Opera Software ASA.
*/

table, caption, tr, thead, tfoot, tbody, th, td {
	display: block !important;
	float: none !important;
	max-width: none !important;
	min-width: 0px !important;
	width: auto !important;
	max-height: none !important;
	min-height: 0px !important;
	height: auto !important;
/*	text-align: left !important;*/
}

thead, th {font-weight: bolder !important;}