Menu graphique

Bonjour,
Je lisais le livre de ce cher raphael et je me suis emmélé les pinceaux sur un passage.

Je veux faire ceci :

image avec nom du menu dessus
menu

Je voulais faire ainsi :

<h1><img src="" alt="nom du menu" /></h1>
<ul>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
</ul>

Mais dans ce cas, le livre dit (ou j'interprete mal) que ce 'est pas très bon pour l'accessibilité de mettre une image. (je n'ai pas d'autre choix, le design est ainsi).

Serait-ce mieux de mettre l'image en background du h1 et mettre un titre dans le h1 avec visibility : hidden; par exemple ?

Je suis un peu perdu

Dans cet exemple :
http://css.alsacreations.com/modelesmenus/g01.htm
C'est un peu ça. Mais le menu n'a même plus de titre sans l'image alors..je sais pas si c'est mieux
Modifié par Dark elf (06 Jul 2005 - 14:34)

Dark elf a écrit :

Mais dans ce cas, le livre dit (ou j'interprete mal) que ce 'est pas très bon pour l'accessibilité de mettre une image. (je n'ai pas d'autre choix, le design est ainsi).

Uniquement si cette image est en arrière plan.
Si tu utilises l'élément <img> avec la propriété "alt", le problème est réglé.

Dark elf a écrit :

<h1><img src="" alt="nom du menu" /></h1>
<ul>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
</ul>

Mais dans ce cas, le livre dit (ou j'interprete mal) que ce 'est pas très bon pour l'accessibilité de mettre une image. (je n'ai pas d'autre choix, le design est ainsi).

si le livre dit ça (ce qui m'étonnerait), il y a comme un problème avec le livre !
C'est tout à fait accessible.

Dark elf a écrit :

Serait-ce mieux de mettre l'image en background du h1 et mettre un titre dans le h1 avec visibility : hidden; par exemple ?

Justement non. Théoriquement, ce serait très bien. En pratique, des problèmes d'accessibilité surgissent avec les lecteurs d'écran qui vont comprendre de travers et ignorer le texte qu'ils devraient lire.

Mieux vaut en rester avec la solution classique de l'image HTML.

ha, et bien parfait alors
Une image dans un titre comme ça, ça ne choque personne ?
Non, parfait

Je ne pense pas que livre dise ça, j'ai du mal interpreter. Je vais vous retrouver la page
Modifié par Dark elf (06 Jul 2005 - 14:46)

Laurent Denis a écrit :
Justement non. Théoriquement, ce serait très bien. En pratique, des problèmes d'accessibilité surgissent avec les lecteurs d'écran qui vont comprendre de travers et ignorer le texte qu'ils devraient lire.

Mieux vaut en rester avec la solution classique de l'image HTML.

?!! Cà pose problème ce code?

h1 {
background: url(fondmenu.png);
text-indent: -30000px; }

avec:

<h1>Menu</h1>
<ul>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
<li><a href="#"> lien </a></li>
</ul>

Modifié par koala64 (06 Jul 2005 - 14:50)

Non, ça ne pose pas de problème en soit, ça marche très bien.
Je me demandais si c'était très sémantique et accessible.

Pour info, c'est la page 73 qui m'a fait douté.

Et pour ton code Koala, le titre du menu est compris dans l'image.
C'est pour ça, je me demandais.
Si je met l'image direct dans le code, ça sépare pas bien la forme du contenu.
Et si je la met en background, pour l'accessibilité..plus de titre pour certains navigateur quoi.

Là est mon problème..
Modifié par Dark elf (06 Jul 2005 - 14:51)

euh... çà doit pas être la page 73 m'est avis.

Pour mon code, le titre apparait sur l'image mais aussi dans le code html. C'est avec text-indent que je le déporte hors du champ visuel donc çà doit rester accessible même sur les éditeurs non graphiques.

Dark elf a écrit :

Si je met l'image direct dans le code, ça sépare pas bien la forme du contenu.

Ah...

Les images seraient-elles désormais interdites dans le contenu ? Une nouvelle norme ZHTML2bis, peut-être ?

Soyons sérieux : un titre mis en image est une information, pas de la déco. Ce n'est peut-être pas le moyen le plus "strict" de traiter cette information, mais l'image a tout à fait sa place dans le contenu, heureusement. Et l'attribut alt la rend parfaitement accessible.

Dark elf a écrit :

Et si je la met en background, pour l'accessibilité..plus de titre pour certains navigateur quoi.

si tu tiens à passer par un background CSS, utilise le style suivant, qui limite le plus les risques :

position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;

Pour les différentes méthodes, voir http://www.mezzoblue.com/tests/revised-image-replacement/ et http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image
Modifié par Laurent Denis (06 Jul 2005 - 15:03)

ta solution me parait (après lecture) très convenable.

Cependant, je m'interroge toujours sur le fait qu'il y ait besoin d'un positionnement en asbolu..je vasi chercher encore un peu ce qu'il vient faire là..

mm, il me semble avoir compris, ça positionne le titre 500 pixels plus haut, ce qui fait que celui ci n'est pas visible pour le visiteur lambda, masi accessible pour les lecteurs d'écran.

500pixel, c'est peut être pas suffisant dans ce cas..
Modifié par Dark elf (07 Jul 2005 - 19:37)

Bha il sert à virer l'élément de la partie visible de la page...

Dark elf a écrit :
500pixel, c'est peut être pas suffisant dans ce cas..

lol. Tout à fait suffisant, ne t'inquiète pas : les lecteurs d'écrans ne sont pas trop sportifs. Ils auront du mal, si tu met le titre plus haut, à sauter pour l'attraper et le remettre dans la page

(Désolé, je n'ai pas pu m'en empêcher )