Menu css standard avec rollover ?

Salut à tout le monde !

Je travaille actuellement sur un site que je souhaite le plus accessible possible. Seulement je me retrouve face à un problème.

Dans mon menu (dans mon header), je souhaite représenter l'accès à chaque parties du site par un bouton sans texte, seulement avec une image. J'aimerais que lorsque je passe ma souris dessus, une autre image apparaissent. Le problème ne vient pas de là car alsacréations regorge de ce type de tutoriels. Mon problème concerne l'accessibilité de mon site. Car si j'utilise les techniques trouvées sur ce site (par exemple celle de "l'image coulissante"), il faut que je définisse mes images en tant que background dans mon css ce qui empêche certains navigateurs (pour les personnes defaillantes visuellement par exemple) de les voir.

Existe-t-il une solution ou dois je modifier mon graphisme ?

Merci d'avance à tout le monde.

Tu peux toujours utiliser une image (GIF transparent) de 1px x 1px qui sera dans ta div et tu lui donne une class avec un width et un height de 100% ce qui donnera la largeur de ta div qui a un background. Ensuite tu donne attribut ton alt a ton images (le gif transparent).

Bonjour,

La solution la plus accessible consiste à utiliser une image HTML (balise <img>) avec attribut alt ad hoc. L'effet de rollover se fera alors en Javascript (et non, Javascript çaypaleumal).

Les autres solutions, notamment celles de remplacement d'images (par exemple celle proposée par Zial) sont correctes, mais posent toutes des problèmes d'accessibilité plus ou moins importants.

Il y a aussi un moyen de faire la méthode des portes coulissantes avec une tag <img> donc avec ton image. Dans une div avec un overflow et un margin négatif sur le lien.

Je m'y connais peu en accessibilité alors il y a certaines choses que je comprend pas trop. Si un de vous pouvez m'aider.

a écrit :
Les autres solutions, notamment celles de remplacement d'images (par exemple celle proposée par Zial) sont correctes, mais posent toutes des problèmes d'accessibilité plus ou moins importants.

Je comprend pas trop en quoi cette méthode pose problème. Je n'y avait pas pensé ! Au premier abord, ça parait simple !

a écrit :
L'effet de rollover se fera alors en Javascript (et non, Javascript çaypaleumal).

Le fait d'utiliser du javascript ne réduit-il pas l'accessibilité, imposant à l'utilisateur de l'activer ?

C'est encore moi désolé !

a écrit :
Il y a aussi un moyen de faire la méthode des portes coulissantes avec une tag <img> donc avec ton image. Dans une div avec un overflow et un margin négatif sur le lien.

Je viens de faire quelques essais mais je dois avouer que j'ai pas tout compris.

pusse a écrit :
Je comprend pas trop en quoi cette méthode pose problème. Je n'y avait pas pensé ! Au premier abord, ça parait simple !

En général les méthodes de remplacement d'images posent problème dans l'un des cas suivants:
- images désactivées ou non chargées, et CSS interprétés;
- images correctement chargées, et CSS non interprétés.

Ici c'est le deuxième cas qui semble problématique (l'image chargée est une image vide, transparente, et le texte alternatif ne sera pas accessible en consultation visuelle...).

a écrit :
Le fait d'utiliser du javascript ne réduit-il pas l'accessibilité, imposant à l'utilisateur de l'activer ?

Seulement si l'utilisation de Javascript est nécessaire à l'accès au contenu ou aux fonctionnalités.
Un effet décoratif de rollover ne relève pas de l'accès au contenu ou aux fonctionnalités d'un site. Ce n'est donc pas un problème d'accessibilité. Par contre, on peut à la rigueur se poser la question en termes d'ergonomie, si on estime que l'ergonomie du site sans cet effet de rollover est sensiblement diminuée.

Voila encore une autre méthode

L'une des techniques de remplacement d'image consiste à utiliser le letter-spacing:-9999em qui permet de masquer un texte par le css.

Tu peux donc essayer quelque chose du genre :

a {
background:url("image.jpg") top left no-repeat;
display:block;
width:XXpx; /* Largeur de ton image */
height:YYpx; /* hauteur de ton image */
letter-spacing:-9999em;
}
a:hover {
background-position:bottom left;
}

Bien sur, si comme Florent l'indique l'utilisateur est sous le images désactivées ou non chargées, et CSS interprétés; cela résultera en des liens complétement vide (texte masqué et image de fond non chargée)
A moins que les images de fond chargées par le CSS ne soient pas masquées en ce cas ?

Merci à tous pour toutes ces réponses.

Mon choix va, je pense, s'orienter vers l'utilisation du javascript. Car c'est vrai qu'il s'agit seulement d'un aspect décoratif.

Seulement j'avais une autre question concernant une technique trouvée sur alsa. En fouillant un peu, j'ai trouvé une technique css qui permet d'afficher / masquer des éléments sans javascript :

http://css.alsacreations.com/Tutoriels-et-articles-divers/Afficher-Masquer-des-calques-sans-javascript

Je me demandais si en utilisant une telle technique dans mon cas j'arrivais à combiner l'effet de rollover que je souhaite avec une accessibilité pour certaines personnes.

Qu'en pensez vous ?