28173 sujets
CSS et mise en forme, CSS3
"En quoi est-ce que cela ne "serait pas génial au niveau de l'accessibilité" ?
J'ai du mal à comprendre confus " Raphael
A mon avis pour un déficient visuel, une telle mise en page n'est pas très explicite, l'empoi du tableau n'étant pas justifié par rapport à son contenu. Mais je peux me tromper, ça ne pose pas de soucis d'accessibilité ?
Modifié par bill_baroud (01 Dec 2006 - 13:19)
J'ai du mal à comprendre confus " Raphael
A mon avis pour un déficient visuel, une telle mise en page n'est pas très explicite, l'empoi du tableau n'étant pas justifié par rapport à son contenu. Mais je peux me tromper, ça ne pose pas de soucis d'accessibilité ?
Modifié par bill_baroud (01 Dec 2006 - 13:19)
bill_baroud a écrit :
A mon avis pour un déficient visuel, une telle mise en page n'est pas très explicite, l'empoi du tableau n'étant pas justifié par rapport à son contenu. Mais je peux me tromper, ça ne pose pas de soucis d'accessibilité ?
Un tableau ne pose de problème d'accessibilité que lorsqu'il est lourdement imbriqué et/ou non lisible de façon linéaire.
Dans ton cas, il n'y aurait que deux cellules, c'est à dire tout autant que de <div> si tu procédais à l'aide de <div>. Aucune différence donc en terme d'accessibilité pure.
Par contre, oui en effet, théoriquement un tableau n'est pas prévu pour cela... ce qui ne veut pas dire qu'il rendra ta page inaccessible
(Ne pas mélanger les choses est indispensable pour concevoir proprement les pages)
Petite lecture pour le week-end : http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-5-6.html
Modifié par Raphael (01 Dec 2006 - 13:36)
bill_baroud a écrit :
interressant, merci. Apparemment il faut utiliser l'attribut summary="" pour préciser que c'est un tableau de mise en forme.
En fait, summary s'applique à tous les tableaux (pas forcément pour la mise en forme).
Il s'agit d'un résumé de ce que contient le tableau (ex : "tableau comparatif des moyennes de la classe", ...)
Dans le cadre d'un tableau de mise en forme, je suis justement assez perplexe sur l'usage de cet attribut
Quelle information y mettrais-tu ?
EDIT : en relisant la guide Accessiweb, on se rend bien compte que l'attribut summary est vide. Je crois effectivement que c'ets la meilleure solution dans le cadre d'un tableau de mise en forme.
Modifié par Raphael (01 Dec 2006 - 14:01)
bonjour ,
si tu veut vraiment te passer d'un tableau , une fois de plus je remet un exemple sans tableau :
Il y a deja eu d'autre posts "recents" a ce sujet ...
raccourcie d'explication:
Aux navigateurs recents :
application partielle de la mlethode des display:table; table-cell ...
Le contenu s'aligne verticalment au centre de son conteneur , se comportant comme une cellule de tableau;
Pour IE
Transformation de l'element block en element inline , puis on active le layout pour les dimensionnés.
Le contenu dimensionne en hauteur les conteneurs.
Les conteneurs (doté de layout et d'un comportement "inline" ) s'alignent verticalement par leur centre vertical les uns aux autres.
Resultats ,
si l'on ne veut pas de tableau et un alignement vertical "ponctuel" , au gré des pages ou styles appliqué , cette solution peut paraitre avantageuse.
Maintenant , , un tableau est un tableau et rien ne le remplace semantiquement , et surtout pas une famille de div imbriqués
, ... et vice versa .
++
Modifié par gcyrillus (01 Dec 2006 - 15:29)
si tu veut vraiment te passer d'un tableau , une fois de plus je remet un exemple sans tableau :
Il y a deja eu d'autre posts "recents" a ce sujet ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"
lang="fr">
<head>
<title>X' test vertical-align</title>
<style type='text/css'>
img {
border:5px solid;
background:#FBC900;
color:#333;
}
.col2 img {
background:#E8E5D8;
}
div {
display:table;
padding:5px;
background:#4A483F;
width:560px;/* dimension a fournir pour IE */
margin:auto;
color:#F8F8F5;
}
div p {
display:table-cell;
vertical-align:middle;
padding:0.5em;
}
.col1 {
width:160px;/* dimension a fournir pour IE */
}
.col2 {
width:360px;/* dimension a fournir pour IE */
}
</style>
<!--[if IE]>
<style type="text/css">
p {
display:inline;
zoom:1;
}
</style>
<![endif]-->
</head>
<body>
<h1>X'eme test sur valign sans tableau sur elements block.</h1>
<div>
<p class="col1">
<img src='shttp://forum.alsacreations.com/upload/5827-testAlignV.png' alt='images'
width="150" height="150" />
</p>
<p class="col2">
<img src='shttp://forum.alsacreations.com/upload/5827-testAlignV.png' alt='images'
width="350" height="50" />
banal texte banal bla bla banane et hi han l'âne !
</p>
</div>
<p><b>Imbrication des balises</b> : div -> p -> image et textes . (economie : si l'on peut dire ça comme ça
, 1 tag par rapport aux tableau , si l'on exclut l'usage de paragraphe dans les cellules.</p>
<p>
<b>Avantage</b>: il n'y a pas la rigidité imposé par un tableau
</p>
<p>
<b>Inconvenient</b>: demande un peu plus de reflexion avant de faire usage de cette methode inhabituelle.
</p>
</body>
</html>raccourcie d'explication:
Aux navigateurs recents :
application partielle de la mlethode des display:table; table-cell ...
Le contenu s'aligne verticalment au centre de son conteneur , se comportant comme une cellule de tableau;
Pour IE
Transformation de l'element block en element inline , puis on active le layout pour les dimensionnés.
Le contenu dimensionne en hauteur les conteneurs.
Les conteneurs (doté de layout et d'un comportement "inline" ) s'alignent verticalement par leur centre vertical les uns aux autres.
Resultats ,
si l'on ne veut pas de tableau et un alignement vertical "ponctuel" , au gré des pages ou styles appliqué , cette solution peut paraitre avantageuse.
Maintenant , , un tableau est un tableau et rien ne le remplace semantiquement , et surtout pas une famille de div imbriqués
, ... et vice versa . ++
Modifié par gcyrillus (01 Dec 2006 - 15:29)