Articles sur les sprites CSS [Résolu]

Bonjour à tous

J'ai découvert ce matin cet article, http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html, et je me posais une question.

Il est dit ceci :

a écrit :
Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple).

Mais dans l'article, pour que le texte soit inclus en dur dans le html, il utilise le code suivant :

<!-- pour le XHTML --> 
<a href="#" title="L'édito" id="editorial"><span>L'édito</span></a> 

#editorial span{ 
  text-indent: -5000px; 
} 

Il y a des risques pour cette méthode ne fonctionne pas et rende impossible la lecture par un navigateur non-graphique ?

Merci d'avance de vos réponses !
Modifié par marc.suisse (17 Aug 2010 - 23:55)

Salut,

marc.suisse a écrit :
Il y a des risques pour cette méthode ne fonctionne pas et rende impossible la lecture par un navigateur non-graphique ?

Le problème est lié aux configurations CSS activé / Images désactivées.

Voir cet autre sujet qui en parle.

Salut

J'avoue avoir lu le lien, mais j'ai de la peine à comprendre.

Par contre, peut être rien à voir, mais j'ai essayé une chose avec un site que je suis en train de développer.

Celui-ci : http://orangedrink.ch/index.html

J'ai fais attention de mettre des "alt" dans les images du menu, j'ai ensuite téléchargé l'application pour webmaster de firefox et je me suis amusé à désactiver la feuille de style.

Eh bien, les "alt" ne sont pas pris en compte et je ne vois rien comme inscription.

Par contre si je laisse la feuille de style et que je désactive les images, là je vois les inscriptions "alt".

PS : Ne regardez pas le codage de cette page, pour l'instant c'est une maquette, enfin toute critique est la bienvenue.

Bonjour,

L'attribut alt n'apparait que si les images ne s'affichent pas. Lorsque tu désactives les CSS, les images (<img>) restent visibles. Dans ton cas, le problème est que les images de ton menu sont des png transparents avec uniquement du texte blanc. En désactivant les CSS, tu n'as plus la couleur de fond, donc tes images se retrouvent texte blanc sur fond blanc. Rapidement, je dirais que la solution serait de mettre la couleur de fond dans les images.

Sinon, c'est Accueil, et non Acceuil, une erreur qui se perpétue depuis des siècles et des siècles.
Modifié par Tony Monast (16 Aug 2010 - 23:51)

Et bien le code de ton menu est accessible... à ceci près que tes images sont en png et correspondent au texte écrit en blanc. Donc blanc sur fond blanc ça ne marche pas très bien !

Si tu avais laissé le fond de la même couleur que celui de ton menu ce serait parfait.

Sinon pour le principe c'est assez simple : tout le contenu, pour être accessible, doit se trouver dans le code HTML (et en cas d'images porteuses d'informations il faut utiliser un élément IMG avec attribut alt qui va bien et pas un background CSS). La "ruse" utilisée dans le tutoriel sur les sprites consiste à ne pas mettre d'élément IMG mais un SPAN que l'on cache via le CSS (text-indent: -5000px;) en partant du principe que si les images sont désactivées le CSS l'est aussi et que du coup le SPAN réapparaîtra... sauf que ça n'est pas forcément le cas.

Edit: grillé... (je devrais pas regarder Le Parrain III en même temps que je poste !)
Modifié par Heyoan (16 Aug 2010 - 23:57)

Bonjour à vous deux et merci de ces précisions

Eh bien j'ai l'air bête, c'est vrai que c'est évident

Et je vais corriger le mot Accueil

En tout cas merci beaucoup !

De rien !

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre.