[Résolu]Utilisations d'images quand on survol un lien

Bonjour à tous,

Je post ici ce message pour avoir quelque informations supplémentaires sur les bonnes pratiques CSS lorsqu'on utilise des images (que ce soit pour le référencement, l’accessibilité ...)

Je détaillerai mon problème avec un cas pratique pour mieux vous expliquer ma pensé.

Je souhaite réaliser de manière propre, un lien vers une page d'inscription. Je souhaite que ce lien s'affiche avec une image et que cette image puisse être modifié au survol de la souris.

Jusque là rien de compliqué, voilà ce que j'avais fait en utilisant les background

<div id="inscription">
	<a href="inscription.php"></a>
</div>

Puis le CSS qui va avec

#inscription a:link, #inscription a:visited
{
	display:block;
	height:25px;
	width:190px;
	background: url(../media/inscription.png) no-repeat;
}

#inscription a:hover, #inscription a:active
{
	background: url(../media/inscription.png) 0 25px;
}

En relisant ce code, je me suis posé des questions sur le référencement :
Aucun texte dans mes lien, je pense que niveau référencement c'est moyen ?

Au niveau de l'accessibilité
Si une personne désactive le css, je n'ai pas la possibilité d'afficher un contenu alternatif (avec la balise "alt")


Suite à ces tests, la seul solution qui me parait envisageable consiste à utiliser une balise "img"

<div id="inscription">
    <a href="inscription.php"><img src="inscription.png" alt="contenu alternatif ici ..." /></a>
</div>

avec un peu de CSS

#inscription a:link, #inscription a:visited
{
	display:block;
	overflow:hidden;
	height:25px;
	width:190px;
}

#inscription a:hover img, #inscription a:active img
{
	display:block;
	position:relative;
	left:0;top:-25px;
}

Je me retrouve maintenant avec une balise img, qui contiens un texte alternatif si le CSS est désactivé ou si l'image n'est pas affiché

Maintenant, c'est là que j'ai besoin de votre aide

Est ce que cette seconde façon de faire est plus "propre" ou est ce que ça reviens au même finalement ?

Il y à ensuite la possibilité de faire un rollover en Javascript, mais bon cela reviendrai au même que ce que j'ai fait en CSS pour mon second exemple ?

Dans les deux cas je me retrouve avec un lien pointant vers une page mais le contenu du lien reste vide (ou ne contiens qu'une image)
Est ce que la balise "alt" est prise en compte comme contenu du lien (même lorsque l'image s'affiche) ?
Dans ce cas, il faudrait également penser à mettre des mots clés dans cette balise, ou est ce que ça ne sert encore une fois, à rien ?

Je sais que ce sont des questions déja vues et revues, mais je tombe un peu partout sur des articles soit plus ou moins anciens, ou qui se contredise. Du coup quand on essaye de s'initier aux bonnes pratiques dans son coin, on est jamais sûr si la solution choisie et finalement la bonne

Toute remarque est bonne à prendre, n'hésitez pas à m'éclairer !
Modifié par diementis (12 Apr 2011 - 12:13)

a écrit :
Est ce que cette seconde façon de faire est plus "propre" ou est ce que ça reviens au même finalement ?

Elle est plus propre et à préférer absolument.

a écrit :
Il y à ensuite la possibilité de faire un rollover en Javascript, mais bon cela reviendrai au même que ce que j'ai fait en CSS pour mon second exemple ?

Visuellement, oui, l'effet sera le même ; mais il y a moyen de faire un rollover un peu plus dynamique avec Jquery par exemple.

a écrit :
Dans les deux cas je me retrouve avec un lien pointant vers une page mais le contenu du lien reste vide (ou ne contiens qu'une image)
Est ce que la balise "alt" est prise en compte comme contenu du lien (même lorsque l'image s'affiche) ?

Le contenu du alt est le contenu du lien, donc non le lien n'est pas vide. C'est justement l'intérêt de placer les images porteuses de contenu dans le HTML.

a écrit :
Dans ce cas, il faudrait également penser à mettre des mots clés dans cette balise, ou est ce que ça ne sert encore une fois, à rien ?

Surtout pas ! Le contenu du alt doit correspondre exactement à celui de l'image, rajouter des mots clés c'est le détourner de son but principal (apporter la même information que l'image quand celle-ci ne peux être vue ou affichée).

Fiou, je m'attendais pas à avoir une réponse aussi rapide et aussi précise.

Je prend bien note des mes erreurs précédentes pour ne plus les reproduire. Surtout sur cette manie de vouloir mettre des mots clés partout même la où il n'y en a pas besoin.

Merci pour tout.