5160 sujets

Le Bar du forum

Menu en images full css accessible

Pages :
Bonjour,

Quand une personne désire réaliser un menu avec des images on lui conseille généralement d'utiliser les images directement dans le code html (avec l'attribut alt qui va bien) et, éventuellement, d'installer un rollover en javascript. Pourquoi? Parce que les solutions full css ne fonctionnent pas quand les images sont désactivées, le texte est bien souvent envoyé négativement hors de la page et devient invisible.

Hors, je viens de voir sur le nouveau site de Duoh*, qu'il était possible de faire tout en css sans perdre l'information : ça fonctionne les images désactivées.

Je crois que je préfère cette méthode aux images directement dans le code html, on peut plus facilement adapter le design suivant le media ciblé. Smiley cligne

Qu'en pensez-vous?


*le design est magnifique Smiley eek Smiley ravi
Modifié par Patidou (30 Oct 2008 - 11:36)
Hello,

Ça doit effectivement être une des techniques de remplacement d'image les plus accessibles. Surtout si les items du menu n'ont pas une taille trop réduite (car avec du overflow: hidden, il faut que le texte ait la place de s'afficher!).
Florent V. a écrit :
Surtout si les items du menu n'ont pas une taille trop réduite (car avec du overflow: hidden, il faut que le texte ait la place de s'afficher!).

Tout à fait, c'est d'ailleurs le même problème que pour la technique suivante:
[b][#black]HTML[/#][/b]

<h1>Mon titre</h1>


[b][#black]CSS[/#][/b]

h1:before {display:block; content:url(logo.png)}
h1 {overflow:hidden; height:100px}

Ça n'est envisageable que pour des éléments dont les largeurs et hauteurs sont importantes, par exemple des titres de sections.

Bref, tout ça, c'est beaucoup de bidouillage pour pas grand chose amha. Pour des typos exotiques, je commence personnellement à me tourner vers @font-face en prévoyant une dégradation vraiment gracieuse Smiley ravi
Benjamin D.C. a écrit :
Bref, tout ça, c'est beaucoup de bidouillage pour pas grand chose amha. Pour des typos exotiques, je commence personnellement à me tourner vers @font-face en prévoyant une dégradation vraiment gracieuse Smiley ravi

Gare aux performances, avec @font-face. Outre le fait que le support soit très limité aujourd'hui (Safari 3.1 et le futur Firefox 3.1, et basta?), quand le support en question est assuré il faut télécharger un fichier de fonte TrueType ou OpenType, et ça peut être relativement lourd.

100 Ko pour un Liberation Serif Italic sur ta page de test, par exemple.
Modifié par Florent V. (30 Oct 2008 - 14:17)
Florent V. a écrit :

Gare aux performances, avec @font-face. Outre le fait que le support soit très limité aujourd'hui (Safari 3.1 et le futur Firefox 3.1, et basta?), quand le support en question est assuré il faut télécharger un fichier de fonte TrueType ou OpenType, et ça peut être relativement lourd.

100 Ko pour un Liberation Serif Italic sur ta page de test, par exemple.

Oui, mais ta police tu la charges une seule et unique fois, alors que tes images, c'est à chaque fois un nouveau téléchargement…
Benjamin D.C. a écrit :
Oui, mais ta police tu la charges une seule et unique fois

D'un site à l'autre, tu veux dire, et même si le cache est vidé? Je n'ai rien trouvé au sujet de la mise en cache et de l'installation des fontes par le navigateur. Comment fonctionne l'implémentation de @font-face dans Safari, en ce qui concerne la mise en cache voire l'installation des fontes?

(Quant aux images, je ne reviens pas sur le fonctionnement de la mise en cache par le navigateur, il est connu.)

En passant:
http://blogs.msdn.com/ie/archive/2008/07/21/font-embedding-on-the-web.aspx
a écrit :
Embedded OpenType (EOT) is currently before the W3C in a submission to make it an open Web Standard. The format was previously proprietary to Microsoft. We created it to enable font embedding within Microsoft Word documents in the early 1990s, and it was later extended for use on the Web by Internet Explorer.
J'ai reproduit l'astuce :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>remplacement css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" >
	h1 span {
		background: transparent url(http://lombre.net/dotclear2/public/galeries/autoportraits/manga.jpg) left top no-repeat;
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
	}
	h1 {
		display: block;
		position: relative;
		height: 178px;
		width: 178px;
		overflow: hidden;
		color: #f00;
		font-size: 1em;
		background-color: #0f0;
	}
</style>
</head>

<body>
	<h1><span></span>Le blog de patidou blablabla blablabla blablabla blablabla blablabla </h1>
	<p>Blabalabla</p>
</body>
</html>


Il m'a fallut un moment pour comprendre que je devais mettre le fond du <span> transparent et le <h1> en relative. Smiley sweatdrop Mais bon, ça marche. J'ai réduit la taille du <h1> au cas où le titre serait très long.
Pour l'accessibilité: perdu Smiley cligne

La désactivation des couleurs (Options d'accessibilité dans IE) fait disparaître l'image CSS sans restituer le texte masqué.

(Je sais bien que la découverte et l'appropriation d'une technologie est presque toujours un mouvement de balancier - pas de CSS, puis trop de CSS - Mais cette rage à vouloir utiliser des pseudos-contenus est tout de même curieuse Smiley ravi )
Modifié par Laurent Denis (30 Oct 2008 - 22:14)
Laurent Denis a écrit :
La désactivation des couleurs (Options d'accessibilité dans IE) fait disparaître l'image CSS sans restituer le texte masqué.

Tu veux dire que la désactivation des couleurs dans IE fait disparaitre l'image CSS et ajoute une couleur de fond blanche (ou autre) au SPAN qui viendrait alors cacher le texte? Ça me surprend un peu.

Laurent Denis a écrit :
Mais cette rage à vouloir utiliser des pseudos-contenus est tout de même curieuse Smiley ravi

Personne n'a particulièrement envie d'utiliser des pseudo-contenus. Mais: facilité (relative) de mise en place, optimisation via la technique des sprites CSS, pas de préchargement des différents états à gérer, etc. Ça fait quelques avantages face auxquels le problème d'accessibilité constaté, correspondant à un cas d'usage précis, ne fait pas forcément le poids (modulo objectifs et contraintes du projet, etc.).

Mais faire des pseudo-contenus pour le plaisir... mouais, pas que ça à faire. Smiley cligne
Florent V. a écrit :

Tu veux dire que la désactivation des couleurs dans IE fait disparaitre l'image CSS et ajoute une couleur de fond blanche (ou autre) au SPAN qui viendrait alors cacher le texte? Ça me surprend un peu.


ça ne devrait pas Smiley cligne

Ta suprise vient sans doute du comportement aberrant de Firefox, ou plus exactement de ses extensions d'accessibilité, lorsqu'il s'agit de désactiver les couleurs: les développeurs mozilliens ont en effet eu la curieuse idée d'assimiler désactiver les couleurs avec rendre l'arrière-plan transparent. C'est l'origine de l'un des bugs d'accessibilité les plus évidents de Firefox, qui impacte notamment tous les menus déroulants, et dont la correction sans cesse reportée devrait être enfin réalisée avec sa prochaine version (ouf).

désactiver la couleur dans la logique CSS signifie en effet tout autre chose: imposer la couleur d'arrière-plan de la CSS user. Ce que fait fort bien IE.

En fait, on ne devrait jamais parler de désactiver la couleur, et IE dit d'ailleurs beaucoup mieux Ignorer les couleurs spécifiées sur les pages Web.

Florent V. a écrit :

Personne n'a particulièrement envie d'utiliser des pseudo-contenus. Mais: facilité (relative) de mise en place, optimisation via la technique des sprites CSS, pas de préchargement des différents états à gérer, etc. Ça fait quelques avantages face auxquels le problème d'accessibilité constaté, correspondant à un cas d'usage précis, ne fait pas forcément le poids (modulo objectifs et contraintes du projet, etc.).


Je vais être un peu sec, mais on va oublier les modulo malavisés: mauvaise compréhension sur le fond du rôle de CSS, et retour vicieux sur un acquis pourtant unanimement respecté: CSS sépare le contenu et la présentation. Ce n'est pas juste une question de mise en balance d'avantages supposés et d'un problème d'accessibilité. C'est une monumentale incompréhension des bases de CSS Smiley ravi Cela dit, elle est tellement fréquente aujourd'hui que c'est une case pré-cochée non conforme lorsque j'aborde un audit qualité, accessibilité du contenu ou encore ATAG.

Bon, il faut aussi avouer que ça n'a rien d'évident, nous l'avons déjà abondamment constaté chez Temesis, et il paraît même que, du coup, le W3C y réfléchit Smiley cligne .
Modifié par Laurent Denis (30 Oct 2008 - 23:49)
Laurent Denis a écrit :
Pour l'accessibilité: perdu Smiley cligne

La désactivation des couleurs (Options d'accessibilité dans IE) fait disparaître l'image CSS sans restituer le texte masqué.



Crotte… Smiley decu

Ben on laisse tomber alors… Smiley decu
j'avais fait la même chose avec les balises images

http://forum.alsacreations.com/topic-6-17699-1-Menu-rollover-css-accesible.html

un truc du genre il me semble :

<ul><li><a href="lien.htm"><img src="mon image" alt="texte alternatif pour image desactivés" /> texte pour css desactivé</a></li></ul>

(j'étais visionnaire à l'époque Smiley ravi )

Avec pleins de bidouilles, maintenant, je fais en sorte de tout le temps afficher le texte.

<edit> Dans le menu présent sur le site Duoh on pourrait faire quelque chose comme ca :


<ul><li><a href="lien.htm"><span class="rollover"><!-- ici le rollover --></span><img src="image_normale.png" alt="texte alternatif " /> </a></li></ul>


je pense que c'est la meilleure solution, si on veut éviter d'utiliser javascript.

</edit>
Modifié par bzh (31 Oct 2008 - 09:33)
@Laurent,

Je n'ai pas vu cette option d'accessibilité (IE6 us), ça se trouve où?

edit : Un truc génial serait d'avoir des règles css du genre :

@noscript {}
@noimages{}

Modifié par Patidou (31 Oct 2008 - 10:46)
bzh a écrit :
je pense que c'est la meilleure solution, si on veut éviter d'utiliser javascript.

Je me demande bien pourquoi on voudrait l'éviter. Est-ce qu'on essaye d'utiliser autre chose qu'un marteau pour enfoncer un clou (bon à part si on n'a rien d'autre sous la main Smiley ravi ) ?
Patidou a écrit :
*le design est magnifique Smiley eek Smiley ravi

C'est vrai, tu trouves? Personnellement, ça ne me parle pas vraiment, et j'ai un peu de mal avec le sens de lecture, ça manque d'ordre amha.
Benjamin D.C. a écrit :

C'est vrai, tu trouves? Personnellement, ça ne me parle pas vraiment, et j'ai un peu de mal avec le sens de lecture, ça manque d'ordre amha.


En arrivant c'est un peu déroutant mais ça ne me gène pas et pour finir, amha, tout est à sa place et dans l'ordre de lecture.

En fait, elle a voulu créé un design ludique, ou certains éléments de design apparaissent uniquement sur un grand écran (et sans qu'ils soient nécessaire d'un point de vue informatif). C'est original je trouve. Smiley cligne

edit : mais bon je ne suis pas designer, peut-être que je dis des bêtises... Smiley smile
Modifié par Patidou (31 Oct 2008 - 12:20)
Patidou a écrit :
@Laurent,

Je n'ai pas vu cette option d'accessibilité (IE6 us), ça se trouve où?


Outils > Options Internet > Accessibilité

C'est l'un des crash-tests les plus révélateurs dans un "coup d'oeil rapide" sur l'accessibilité.
Modifié par Laurent Denis (31 Oct 2008 - 12:05)
C'est bien là que j'ai été voir :

a écrit :
Ignore colors specified on web pages


Quand je coche cette case (si c'est bien celle-là), les couleurs disparaisse, les images de fond également et le texte est bien visible. Smiley sweatdrop

upload/4635-ieaccessibi.png


C'est la version xp sp2. Bizarre. Smiley confus
Modifié par Patidou (31 Oct 2008 - 12:15)
Benjamin D.C. a écrit :

Je me demande bien pourquoi on voudrait l'éviter. Est-ce qu'on essaye d'utiliser autre chose qu'un marteau pour enfoncer un clou (bon à part si on n'a rien d'autre sous la main Smiley ravi ) ?


euh, parce que c'est lourd et lent (même si je ne suis pas vraiment partisan des bidouilles).

@ patidou, chez moi, sur ie7 les images de fond deviennent blanche et masquent les liens.
Pages :
Sujet clos
Aller à