28172 sujets

CSS et mise en forme, CSS3

Text-indent:-9999px : bon ou mauvais pour le SEO ?

Pages :
(reprise du message précédent)

jb_gfx a écrit :
Si c'est tout ce qui te dérange, tu peux très bien utiliser les techniques sprites, hover sans utiliser de background CSS.


Je suis curieux d'avoir des exemples Smiley murf . Suis prêt à parier que ça posera le même type de problèmes que ces text-indent et autres folies ...
Modifié par yodaswii (14 Apr 2011 - 12:47)
yodaswii a écrit :


Je suis curieux d'avoir des exemples Smiley murf . Suis prêt à parier que ça posera le même type de problèmes que ces text-indent et autres folies ... 



.foo {
	display: inline-block;
	width: 100px;
	height: 20px;
	overflow: hidden;
}

.foo:hover img {
	margin: -20px 0 0 0;
}

<span class="foo">
<img src="images/foo.png" alt="desc contenu image" />
</span>

Modifié par jb_gfx (14 Apr 2011 - 13:13)
Donc tu fais reposer la restitution du contenu sur de la présentation ...
Bizarre, il me semblait que la séparation contenu / présentation était le fondement de CSS Smiley cligne .

La problématique est différente de celle du tabindex négatif mais ça reste problématique (l'utilisateur doit pouvoir changer la présentation complète d'un site même si ça plait pas aux concepteurs du dit site).
Modifié par yodaswii (14 Apr 2011 - 14:50)
N'importe quoi... regarde le logo qui se trouve en haut de ce site, une image avec un alt renseigné. Wahou ! Y'a même peut être un ou deux autres sites sur le Web qui utilisent la même chose... 


l'utilisateur doit pouvoir changer la présentation complète d'un site même si ça plait pas aux concepteurs du dit site.


Alors là...
Modifié par jb_gfx (14 Apr 2011 - 15:46)
jb_gfx a écrit :
N'importe quoi... regarde le logo qui se trouve en haut de ce site, une image avec un alt renseigné. Wahou ! Y'a même peut être un ou deux autres sites sur le Web qui utilisent la même chose...


Il fut un temps où tout le monde faisait des tableaux ... Smiley rolleyes

jb_gfx a écrit :
Alors là...


Juste connaître le média, ça peut être utile ... Smiley rolleyes
Juste pour ma culture personnelle : si pour afficher un logo tu ne peux pas utiliser une image en renseignant l'attribut alt, ni utiliser un background avec un text-indent, tu proposes quoi comme solution ?
jb_gfx a écrit :
si pour afficher un logo tu ne peux pas utiliser une image en renseignant l'attribut alt

L'image avec alt est une solution imparfaite, mais c'est la solution standard en HTML4 et c'est donc celle-ci qui est le plus efficacement exploitée par les agents utilisateur (même si Webkit fait de la merde en la matière).

Le principe, c'est qu'on va utiliser le standard en laissant aux agents utilisateur le soin de faire un boulot correct. Donc <img alt="...">, <a><img alt="..."></a>.

Ensuite, chacun est libre de faire différemment s'il le souhaite:
- Soit qu'il trouve qu'utiliser <img> c'est pas cool, ça respecte pas bien le média ou ce qu'on veut.
- Soit qu'il trouve que faire ses effets de survol en JavaScript c'est prise de tête, alors qu'en CSS ça fait un code quand même moins verbeux (ça, c'est pas contestable), et tant pis pour l'accessibilité du truc.
jb_gfx a écrit :
Juste pour ma culture personnelle : si pour afficher un logo tu ne peux pas utiliser une image en renseignant l'attribut alt, ni utiliser un background avec un text-indent, tu proposes quoi comme solution ?


Corrige-moi si je me trompe dans ton exemple ton image contient plusieurs contenus (redondants ou non). Si c'est le cas, peu importe l'alternative textuelle c'est une mauvaise pratique. Dans tous les cas, une image véhiculant de l'information se fait via la balise correspondante et son attribut alt pertinent. Le hover se fera via CSS si il s'agit juste d'un changement d'arrière plan et via JS si le texte est impacté par cet état.

<edit> Pour éviter d'être perçu comme une contradiction, pas de saut de ligne entre les deux phrases. Pour la conclusion cf. les deux posts de Florent dans cette discussion.

Grilled by Florent et bon résumé soit dit en passant Smiley cligne .
Modifié par yodaswii (15 Apr 2011 - 09:36)
yodaswii a écrit :

Corrige-moi si je me trompe dans ton exemple ton image contient plusieurs contenus (redondants ou non). Si c'est le cas, peut importe l'alternative textuelle c'est une mauvaise pratique.


Mauvaise pratique en terme de quoi ? D'accessibilité ? Pourquoi ?

yodaswii a écrit :

Dans tous les cas, une image véhiculant de l'information se fait via la balise correspondante et son attribut alt pertinent.


Comment se contredire en 4 posts...
jb_gfx a écrit :
Mauvaise pratique en terme de quoi ? D'accessibilité ? Pourquoi ?

Avec une sprite non décorative:
- Soit l'image sprite est déclarée en image de fond, avec un texte HTML masqué. Si l'image n'est pas disponible (bug, problème réseau, désactivation volontaire...) mais le CSS appliqué on perd l'information.
- Soit l'image sprite est déclarée en contenu HTML (<img alt="...">, parties qui dépassent sont masquées via un overflow:hidden). Si les styles correspondant ne sont pas disponibles (bug, problème réseau, désactivation volontaire...) on se retrouve avec une image présentant plusieurs informations visuelles erronées ou en doublon. Ça peut être pas trop gênant si c'est un simple doublon de texte, et beaucoup plus si on a 15 instances d'une image sprite portant 30 ou 40 textes, boutons et éléments de décoration.
Après mure réflexion, je pense que je vais utiliser la balise img avec un sprites. Cela me semble être un bon compromis.

Ex :

<a title="Mon titre" href="http://www.google.fr"><img alt="Mot cle" src="images/global-sprites.png"></a>

avec :

img {
position: absolute;
clip: rect(20px, 291px, 79px, 0);
margin-top: -20px;
}

Clip permettant de cacher les autres images de mon sprite non souhaitées. Qu'en pensez vous ? L'idée étant d'avoir un bon SEO tout en ne sacrifiant pas l'accessibilité.
Pages :
Sujet clos
Aller à