[Résolu] un menu avec des images, accessible et esthétique, anti-alias

Bonsoir,

Autrefois, lorsque je n'avais que faire des CSS et de l'accessibilité , mes menus étaient composés d'images représentant du texte.

Depuis, je créé mes menus avec les listes html, et du texte. Mes menus sont depuis devenus accessibles.

Mais aujourd'hui, j'ai envie de revenir à des images, pour avoir un joli menu avec du texte anti-aliasé.

(A quand la possibilité, via les CSS, d'anti-aliaser le texte ?! Evidemment, la couleur de fond intervenant, on peut imaginer que ce n'est pas simple... et pourtant, si. Il suffirait par CSS d'indiquer la couleur de fond pour l'anti-alias, de la même manière que dans Photoshop, lorsqu'on exporte une image en gif)

Bref, je m'égards

Donc, étant désormais soucieux de l'accessibilité, je pensais doubler mon menu par une sorte de barre de navigation, relativement discrète, placée en pied de page, comme cela se faisait il y a longtemps, lorsque les développeurs souhaitaient rendre le site consultable aux navigateurs texte.

Mais cette méthode n'est pas entièrement satisfaisante :

1) au niveau design, comme dit plus haut, cela rappelle les "anciens" sites.
2) placée en pied de page, ce n'est pas le meilleur emplacement pour un menu, si l'utilisateur ne tient pas compte de mes css.

L'autre solution, c'est donc de placer ma bare de navigation textuelle au bon endroit, en la rendant invisible via CSS, mais j'ai lu que visibility:hidden n'était pas conseillé pour l'accessibilité (j'en profite pour demander pourquoi ?)

Je m'en remets à vous, si toutefois vous aviez d'autres idées.

Mais peut-être que la solution est plus simple que ce que je recherche, à savoir placer les images du menu dans le code html, plutôt qu'avec les CSS ? Ainsi, le menu apparaîtra quoi qu'il arrive. Si l'utilisateur ne souhaite pas afficher les images, il accédera aux liens grâce aux l'attributs alt et tittle des images, non ?

Sauf que dans ce cas, je ne dissocie pas vraiment le fond et la forme, en intégrant les images de mon menu dans le code html.

Je crois donc qu'il n'y a pas de solution 100% satisfaisante.

Mais d'après-vous, qu'elle est la meilleure ? (En dehors de celle qui consisterait à renoncer aux images pour mon menu )

Merci de m'avoir lu.
Yhann.

Note : je précise que je parle bien de texte. Je sais comment placer des images sous le texte de mes menus, sans préchargement etc. Mais en fait, je parle bien du texte lui-même des liens du menu
Modifié par Yhann (26 Mar 2005 - 11:53)

Hmmm....
Si je te suis bien, tu pense que avec CSS, tu ne parvient pas a faire du joli et tu veut faire du menu image.
Pas bien sur de comprendre ton probleme ...
Tu peu faire des menus en image avec du css...

Si pour une raison obscure tu veux absolument que ton menu soit Full image sans texte, mais malgré tout avoir du texte pour l'accessibilité (dieu que tu est compliqué), on peu assez facilement imaginer de placer 2 conteneur l'un sur l'autre avec un z-index différent, dessous ton texte accessible et dessus ton image.

La possibilité aussi de cacher ton menu de secours avec les option du 'Display:none;'

Mais je ne comprend pas bien ton problème avec le texte.

Slt, je n'ai pas bien saisie toutes les subtilités de ton message mais peut-être que tu pourras trouver ton bonheur en cherchant des polices non crénelées et assez grasses, c'est une supposition gratuite
Modifié par ocb2b (25 Mar 2005 - 21:48)

Merci pour vos réponses !

Euh... je suis si peu clair ?

Alors je vais faire plus simple :

Je dois réaliser un menu, avec "Accueil", "Contacts", etc.
Les textes doivent être rouges sur fond blanc (j'ai pas le choix).

Je n'ai pas envie d'écrire le texte, donc de l'afficher avec de l'arial ou verdana, parce que la taille va être assez importante, et ce sera crênelé (non anti-aliasé). Et ce, d'autant plus que le rouge et le blanc contraste plutôt bien.

Je veux donc utiliser des images contenant les textes du menu "Accueil", Contacts", etc. Ces images, faites dans Photoshop avec un lissage de la police, verront les lettres rouges anti-aliasées se fondrent dans le blanc.

Mon post avait pour but d'avoir votre avis sur la meilleure méthode pour ce type de menu (basé sur des images, donc) en vue de ne pas trop pénaliser l'accessibilité.

Faut-il mettre les images du menus dans le code html ?
- avantages : même sans css, le menu reste accessible. Et si l'utilisateur n'affiche pas les images, il peut cliquer dessus en les identifiant par leur attribut alt
- problème (relatif) : le fond et la forme se retrouve mélangés

Faut t-il afficher le menu en placant les images (du menu) comme background d'une liste html, par exemple, via CSS ?
- avantages : fond et forme sont dissociés
- problème : sans CSS, le menu ne s'affiche plus !

D'où, pour palier à ce dernier problème, la nécessiter d'afficher le menu sous forme textuel (en plus de sa version graphique) en bas de chaque page de mon site (avec les inconvénients exposés dans mon précédent post)

Ou la solution que Lorr Hyde me propose, en superposant des <div> et en jouant sur les z-index. Le problème, c'est que les z-index (sauf erreur) sont parfois incompatibles avec certains navigateurs, et je trouve (mais c'est personnel) que ca fait un peu "bricolage".

Quant à utiliser des <div> non affichés (avec leur propriété display:none), j'avais lu (je ne retrouve pas le message correspondant) que ce n'était pas une bonne méthode car cela posait problème pour l'accessibilité.

J'espère que j'ai été plus clair (pas sûr )

Tenez moi au courant

bon ... alors à mon avis les images sont, dans ce cas du contenu, et donc doivent être dans le html et pas dans le CSS.

Il est vrai que les div supperposés sont de la bricole .. j'ai honte de l avoir dit .

Je ne suis pas spécialiste de ce genre de choses mais je pense qu'avec dans balises alt bien remplies du genre "Accés à la section accueil" ca devrait être accessible même si la sémantique des balises n'est pas respecté.
Celà reste une opinion personnelle.

Yhann a écrit :
Mon post avait pour but d'avoir votre avis sur la meilleure méthode pour ce type de menu (basé sur des images, donc) en vue de ne pas trop pénaliser l'accessibilité.

Définitivement : le menu avec <img> et texte alternatif pertinent. Voire même un tableau simple si la gestion du positionnement s'avère délicate en CSS.

Yhann a écrit :

- problème (relatif) : le fond et la forme se retrouve mélangés

Purisme déplacé.
- Il s'agit manifestement d'un site donnant une certaine importance au graphisme. Dès lors, il est tout à fait normal qu'il ait un code HTML moins abstrait du media de restitution, et plus orienté vers le visuel.
- Ce n'est un obstacle ni à la validité, ni à l'interopérabilité du document.

ocb2b a écrit :
Je ne suis pas spécialiste de ce genre de choses mais je pense qu'avec dans balises alt bien remplies du genre "Accés à la section accueil" ca devrait être accessible même si la sémantique des balises n'est pas respecté.

Sémantique non respectée ? Ou ça ?

<img> est fait pour inclure une image dans le document. alt est fait pour en donner un bref équivalent textuel. Il n'y a aucune atteinte à la sémantique dans le fait d'utiliser <img alt="..."> pour un menu de navigation.

D'autre part, pour les textes alternatifs... Please ! Pas de "Accès à la section accueil et patati et patata" ! Contentez-vous d'un simple alt="Accueil", point. Les utilisateurs de lecteurs d'écran ne sont pas des neuneus et comprennent très bien les mêmes mots que vous dans le même contexte. Et ils apprécient autant que vous la concision

Dsl si ma remarque n'est pas assez pertinante à ton goût mais j'aimerais savoir si en désactivant l'affichage des images dans ie on obtient le même résultat qu'avec un lecteur d'écran? C'est un monde qui m'est inconnu, je n'ai vu que des textes sur ce sujet mais jamais d'exemple visuel.
Modifié par ocb2b (26 Mar 2005 - 10:20)

Merci pour votre participation !

Laurent D. > Ta réponse m'enlève une grosse épine du pied. Je faisais fausse route en souhaitant absolument dossocier le fond et la forme. Dans Firefox, j'ai pris l'habitude de voir mes pages en désactivant le CSS, et je n'aimais pas y trouver autre chose que les images apportant du contenu réel. C'est vrai que le menu, tout graphique qu'il soit ne devrait pas poser de soucis.

a écrit :
ocb2b : j'aimerais savoir si en désactivant l'affichage des images dans ie on obtient le même résultat qu'avec un lecteur d'écran? C'est un monde qui m'est inconnu, je n'ai vu que des textes sur ce sujet mais jamais d'exemple visuel.

Même question, la réponse m'intéresse au plus au point

Je redis ici que ce serait vraiment bien si les prochains navigateurs pouvaient, avec les CSS, procéder au lissage des polices. A qui faut-il soumettre cette idée, au W3C ?

Bon week-end !

Les lecteurs d'écran lisent l'attribut alt quand il y a une image. IE avec image désactivé affiche un "cadre" avec le alt dedans .

Ah ? Ok.

Je vais placer un "Résolu" au titre, et je vous remercie tous