Bonjour,
Merci à Laurent Denis et à [ neko] pour les liens...
Après avoir lu attentivement toutes ces références, voilà ce que j'en ai tiré.
Tout d'abord, l'article de Laurent traite du cas d'un
logo (ou titre). Il évoque au début le
choix (selon des considérations sémantiques ou autres) entre l'utilisation de la balise img et l'utilisation d'un background css.
Dans ce cas, la balise
img semble la mieux à même de répondre au problème de l'accessibilité grâce à l'attribut "alt" qui est fait pour ça.
Se poser la question "
mon logo/titre fait-il partie intégrante du contenu ou n'est-il qu'un élément de présentation ?" est à mon avis une perte de temps et surtout va amener des réponses diverses selon les personnes, ce qui fait qu'à la fin on ne sera pas plus avancé...
Bon, donc img, fin du problème.
Sauf que dans certains cas
on ne peut pas utiliser img, comme par exemple si l'image du header est un .png transparent (parce qu'il faut dans ce cas penser à IE<7, donc utiliser un background css avec une feuille de style en commentaire conditionnel).
Et on en revient alors au choix de la méthode pour le background css avec un "span" pour ceux qui n'ont soit pas d'images, soit pas de css.
Les deux méthodes proposées dans l'article de Laurent ne permettent pas de traiter le cas où on a les css mais pas les images, comme il est spécifié en conclusion...
(
remarque en passant : la méthode du "clip" m'a paru
particulièrement horrible , peut-être plus "élégante" au niveau du html, mais bien lourde côté css...)
On en vient à l'article sur
mezzoblue qui semble relativement exhaustif sur le sujet...
Comme l'a signalé [neko ], seule la méthode "
Gilder/Levin" semble traiter le cas de la désactivation des images tout en gardant les css.
C'est donc celle que j'ai employée.
(
remarque en passant : la méthode décrite ci-dessus par [ neko] (arrgh... mais qui a autorisé les utilisateurs à avoir un "[" dans leur pseudo ! on ne peut plus citer correctement
...) est
différente de celle citée sur mezzoblue : dans le "
Gilder/Levin" de mezzoblue, il n'y a pas de "overflow", ni de "z-index", mais en revanche un "width:100%", ceci dit le principe est le même)
Pour ceux que ça intéresse, voici le code auquel j'ai abouti.
Je me replace dans le cadre initial du topic (cf. premier post) qui parlait de
lien avec effet
hover (donc ce n'est pas un logo, et on ne peut pas utiliser la balise img).
Pour aller jusqu'au bout, j'ai supposé que l'on voulait faire un lien "Accueil" ou "Home" avec un
bouton graphique 3 états : état normal, état survolé et état "actif", chacun des états étant représenté par une image différente.
Code php :
<div id="home">
<?php
if ($page != 'Accueil')
echo " <a href=\"accueil.php\" title=\"Accueil\"><span></span>Accueil</a>\n";
else echo " <span><span></span>Accueil</span>\n";
?>
</div>
Partie css (légèrement simplifiée, je vous fais grâce des couleurs par exemple) :
#home a, #home span {
position: relative;
display: block;
width: 90px;
height: 40px;
text-align: center; /* pour centrer sous le bouton, important pour le zoom */
}
#home a span, #home span span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#home a span {
background: url(accueil_off.png) no-repeat;
}
#home a:hover span, #home a:focus span {
background: url(accueil_on.png) no-repeat;
}
#home span span {
background: url(accueil_active.png) no-repeat;
}
Si on désactive les images
et/ou on désactive le css, le texte alternatif situé sous l'image apparait.
On a donc (a priori, car j'ai pas de lecteur d'écran pour confirmer, ni tous les navigateurs pour tester, je fais confiance aux auteurs originaux) résolu le problème.
Les
limitations (car comme il est rappelé dans les deux articles, il n'y a pas de méthode miracle unique qui marche dans tous les cas) :
- un "span" vide dans le html.
- si l'image choisie est transparente en son milieu, ça ne marche pas puisque le texte alternatif apparaît en-dessous (en revanche, si elle est transparente uniquement sur les bords, pas de problème).
- un point "oublié" par les auteurs (en tout cas non signalé sur
mezzoblue) : à partir d'un niveau de zoom suffisant, le texte "déborde" sous le bouton. Dans mon cas, (avec une taille de 90x40), cela ne se voit qu'à partir des niveaux +8/-6 d'agrandissement/diminution sous FF, donc tout à fait acceptable.
(désolé d'avoir été un peu long...
)
(23 Mar 2006 - 08:57)