Réflexion sur la syntaxe des liens

Bonjour,

je me pose une question sur la syntaxe de liens avec image.
Les images étant principalement utilisée pour palier au problème de fonts, et donc incorporant le texte du lien également, je me demande quelle serait la meilleurs façon de coder :

Soit en imbriquant l'image dans le code html, dans ce cas je dispose de la balise alt.
Soit en utilisant le CSS pour faire un background image.

Sachant que les 2 méthodes fonctionnent et sont valides selon les analyseurs w3c...
vos avis m'intéresse.

PS: je développe en xhtml 1.0 strict.

Merci d'avance.

Pure a écrit :
Soit en imbriquant l'image dans le code html, dans ce cas je dispose de la balise alt.

Bien.

Pure a écrit :
Soit en utilisant le CSS pour faire un background image.

Pas bien.

La première solution (la bonne) n'est pas très élégante, car elle demande de modifier le code HTML lorsque l'on souhaite modifier la mise en forme, notamment lorsqu'on souhaite passer d'un texte simple (mis en forme avec CSS) à un texte en image (avec texte alternatif). C'est cependant la seule solution logique et accessible.

Utiliser une image de fond porteuse d'un texte n'est pas correct, car les feuilles de styles gèrent uniquement la mise en forme, pas les contenus. Placer un contenu dans la feuille de styles, c'est prendre le risque (avéré) que des utilisateurs n'y aient pas accès, sans parler des moteurs de recherche.

Pour palier à ce problème et utiliser quand même CSS (parce que CSS c'est fun et branché, frais et bigarré), on a inventé nombre de techniques visant à remplacer un contenu HTML (un texte) par une image de fond CSS.

Le problème de ces techniques, c'est que ça suppose deux actions: 1) cacher le contenu réel et 2) afficher l'image de fond. Et comme ces deux actions ne sont pas liées: si l'image de fond n'est pas chargée ou désactivée par l'utilisateur, le navigateur ne saura pas qu'il doit afficher le texte à la place (contrairement au fonctionnement des éléments IMG en HTML). Et donc l'information sera manquante.
Modifié par Florent V. (20 Feb 2009 - 17:42)

Simple et efficace.
Merci pour la réponse.

Hello Pure,

Personnellement j'utilise la balise img pour afficher une image qui va être cliquable par l'utilisateur en fesant :

<a href=""><img src="ton_image" alt="alt_de_ton_image" /></a>

Si c'est pour de la décoration à ce moment la je met un background en css

edit : oups je viens de voir qu'on t'avais répondu
Modifié par mathieu.b (20 Feb 2009 - 17:40)

Pure a écrit :
Soit en imbriquant l'image dans le code html, dans ce cas je dispose de la balise alt.

Non, pas bien.

Je vais très souvent sur des sites étrangers dont je ne maitrise pas la langue (japonais, allemand, etc... l'anglais ça va merci mais c'est pas forcément le cas de tout le monde) et les titres ou liens (ou quoi que ce soit de textuel) présenté en images n'est pas traduit quand on passe par Google Traduire cette page.
Alors à quoi ça sert de mettre un alt pour 0 et quelques pourcent de visiteurs qui n'ont pas les images affichées si c'est pour en même temps priver d'utilisabilité les milliards (bon, ok, les dizaines) de visiteurs étrangers potentiels ?

Le web est par nature international, faut pas l'oublier. Alors OK on se dit oui je suis en France et c'est un site qui n'intéressera que localement etc. Et la Suisse et ses 3 langues ? et la Belgique ? et le Canada ? etc.
Donc SVP laissez les mécanismes adaptés à l'internationalisation des contenus fonctionner correctement et ne les entravez pas avec vos titres ou liens dans des polices dont tout le monde se fout sauf vous. Celle-là ou une autre, franchement en tant qu'utilisateur on s'en tamponne.

Hello,

a écrit :
Pour palier à ce problème et utiliser quand même CSS (parce que CSS c'est fun et branché, frais et bigarré), on a inventé nombre de techniques visant à remplacer un contenu HTML (un texte) par une image de fond CSS.

Comme on peut le voir sur le menu principal de ce site

C'est aussi ce que je te conseille. Le site sur lequel je travaille actuellement utilise que des images en fond css, cela offre aussi beaucoup d'avantages (sprites css, économie de requêtes, etc) mais ça reste du cas par cas.

Pour du titrage seulement, j'inclurai via la balise <img> puis alt.

@ Arsene : Après les intégristes, les idéalistes
Certains sites vendent des produits ou des services, on vise donc une clientèle et c'est bien pour ça qu'on retrouve souvent une technologie flash pour les sites vitrines... C'est pire pour l'accessibilité de la langue pourtant d'un point de vue marketing c'est le bon choix !
Finalement ça dépend du type de site ! (On vérifiera si ton boot est multilingue )
Modifié par copperfield (21 Feb 2009 - 01:17)

AspiGeek a écrit :
Comme on peut le voir sur le menu principal de ce site

Bien tenté mais non, perdu. Le menu principal de la V3 d'Alsacréations est justement une illustration de l'utilisation d'éléments IMG avec attribut alt qui va bien. Si tu m'crois pas eh, t'as qu'à voir avec ton Firebug à la récré.
Modifié par Felipe (24 Feb 2009 - 11:33)

***Porte un bonnet d'âne***
Des fois il vaut rien dire quitte à se faire passer pour un boulet que dire quelque chose et prouver qu'on en est un

En effet, l'image est dans le <body> mais le halo est en css, c'est des économies en bout de chandelles tout ça

AspiGeek a écrit :
@ Arsene : Après les intégristes, les idéalistes
Certains sites vendent des produits ou des services, on vise donc une clientèle et c'est bien pour ça qu'on retrouve souvent une technologie flash pour les sites vitrines... C'est pire pour l'accessibilité de la langue pourtant d'un point de vue marketing c'est le bon choix !

AspiGeek tu triches, parce que selon que tu as écrit ça dans ton message original (21h47) ou dans le correctif (1h17) ça change tout. Dans le premier cas c'est un bon gros troll du vendredÿ autorisé, dans l'autre c'est de l'incompréhension.

Pour en revenir à la question posée sous le titre Réflexion sur la syntaxe des liens

a écrit :
Les images étant principalement utilisée pour palier au problème de fonts, et donc incorporant le texte du lien également, je me demande quelle serait la meilleurs façon de coder

j'ai juste dit que si la question est de restituer des contenus utiles (titres, liens) sous forme d'images juste pour des probs de fonts il est de loin préférable, ne serait-ce que pour l'argument d'internationalisation possible (tirée de mon expérience quotidienne, mais il y a encore d'autres arguments) de ne pas se livrer à ce genre d'astuce parce qu'il a plus à perdre (des visiteurs) qu'à gagner (du look). Je ne vois pas d'idéalisme là-dedans mais au contraire du pur pragmatisme : accroître la portée et l'utilisabilité des contenus.

Je n'ai vu nulle part dans la question mention d'un site ciblé en particulier vers un public défini ou requérant des technologies particulières, mais au contraire une réflexion d'ordre général ayant trait aux bons usages. J'ai donc donné mon point de vue. S'il n'est pas recevable et qu'il est mieux de mettre des titres et des liens en images il faut m'argumenter ça, ça m'intéresse.
Modifié par Felipe (24 Feb 2009 - 11:33)

Non ce n'était pas le troll du vendredÿ (je l'ai fait une fois malheureusement je ne suis pas sur que internautes de passage comprennent bien le délire...)

http://forum.alsacreations.com/topic-9-39925-1-CSS-3--mais-quattend-on-pour-valider-cette-norme-.html#p286002

En revanche j'en ai rajouté un peu parce que c'était toi surtout quand je sais ton goût pour le RIA et SL c'était purement ironique (d'où la référence à ton boot).

Pour être sincère j'avais jamais pris en compte le problème que pouvais engendrer les traductions de page, donc je confirme mon mode boulet sur ce billet et me coucherai moins bête ce soir.