Bonjour à tous,
C'est un petit défi que je me suis lancé, et j'espère l'avoir en partie gagné.
Comme je ne suis pas très doué en graphisme (j'ai du mal à faire simple et propre...), et que l'on m'a conseillé de mieux mettre en valeur le menu de mon site, j'ai pensé à remplacer le texte de mes liens par des images, afin d'utiliser une police un peu originale et que l'on remarque mieux.
Puis, j'ai voulu mettre en place un rollover sur ces images, de façon à ce que le texte change de couleur. Et ce en CSS pur, sans utiliser javascript !
J'ai lu quelques topics concernant les problèmes d'accessibilité liés à ce type de script, et cela m'a fait pas mal gamberger. J'ai fini par mettre en oeuvre la solution que vous pouvez voir à cette adresse :
http://www.bigbangmag.com/
Pour réaliser le menu horizontal sous la bannière, j'ai créé des images transparentes au format png, qui forment en quelque sorte le négatif du texte affiché. Elles sont en effet découpées en épousant la forme du texte, comme un patron, et c'est l'arrière plan, en rollover, qui change de couleur.
Mes images en png sont donc fixes, et ont toutes un attribut "alt".
Comme il fallait que le texte reste tout de même visible quand les css sont désactivés, j'ai fait en sorte que la transparence ne soit pas totale, et qu'il reste une trame suffisamment opaque pour être lisible sur un fond blanc. Ce n'est pas, je vous l'accorde, d'une parfaite netteté, mais on distingue bien le texte en gris clair.
Peut-être cette solution est-elle connue depuis longtemps, mais il ne me semble pas l'avoir vue formulée aussi simplement.
Elle a aussi l'avantage d'être beaucoup plus légère qu'un rollover avec deux images, puisque les fichiers générés sont peu volumineux.
Qu'en pensez-vous, d'un point de vue pratique comme sur le plan de l'accessibilité ?
C'est un petit défi que je me suis lancé, et j'espère l'avoir en partie gagné.
Comme je ne suis pas très doué en graphisme (j'ai du mal à faire simple et propre...), et que l'on m'a conseillé de mieux mettre en valeur le menu de mon site, j'ai pensé à remplacer le texte de mes liens par des images, afin d'utiliser une police un peu originale et que l'on remarque mieux.
Puis, j'ai voulu mettre en place un rollover sur ces images, de façon à ce que le texte change de couleur. Et ce en CSS pur, sans utiliser javascript !
J'ai lu quelques topics concernant les problèmes d'accessibilité liés à ce type de script, et cela m'a fait pas mal gamberger. J'ai fini par mettre en oeuvre la solution que vous pouvez voir à cette adresse :
http://www.bigbangmag.com/
Pour réaliser le menu horizontal sous la bannière, j'ai créé des images transparentes au format png, qui forment en quelque sorte le négatif du texte affiché. Elles sont en effet découpées en épousant la forme du texte, comme un patron, et c'est l'arrière plan, en rollover, qui change de couleur.
Mes images en png sont donc fixes, et ont toutes un attribut "alt".
Comme il fallait que le texte reste tout de même visible quand les css sont désactivés, j'ai fait en sorte que la transparence ne soit pas totale, et qu'il reste une trame suffisamment opaque pour être lisible sur un fond blanc. Ce n'est pas, je vous l'accorde, d'une parfaite netteté, mais on distingue bien le texte en gris clair.
Peut-être cette solution est-elle connue depuis longtemps, mais il ne me semble pas l'avoir vue formulée aussi simplement.
Elle a aussi l'avantage d'être beaucoup plus légère qu'un rollover avec deux images, puisque les fichiers générés sont peu volumineux.
Qu'en pensez-vous, d'un point de vue pratique comme sur le plan de l'accessibilité ?
