Bien styliser un titre à image en CSS

Cela fait maintenant plusieurs années que je réalise des mises en page de sites web en xhtml/css.
Avec le temps et l’expérience, mes techniques ont bien évoluées, mais il subsiste encore quelques points noirs et certains choix difficiles à réaliser, même pour des intégrateurs confirmés.

Aujourd’hui nous allons nous attarder sur les titres à images.
Comprenez par là un titre affichant une image plutôt que du texte.

Il existe plusieurs méthodes pour arriver à nos fins, je vais essayer de toutes les lister en vous expliquant pourquoi certaines sont préférables à d’autres.

La méthode du « display: none »

A mes tous débuts, j’avais tendance à énormément utiliser cette technique.
La structure html se présente sous cette forme :

<hx><span>Mon titre</span></hx>

La CSS :

hx { background: url('monimage.gif') no-repeat; width: 100px; height: 50px; } hx span { display: none; }

Le « hx » nous sert à afficher l’image et à avoir une sémantique correcte pour la définition du titre, tandis que le « display: none » sur le span permet de retirer le texte.

Le gros problème de cette méthode est l’indexation Google.
En effet, il semblerait que Google interprète les « display: none » de la CSS. Il ne prend donc pas en compte le texte de votre titre.
Pis encore, à cause de cette méthode, certains sites ne sont plus du tout référencé !

Second problème, moins important pour la plupart des sites mais très mal vu pour l’accessibilité des non-voyants, le « display: none » est lui aussi interprété correctement par les lecteurs d’écrans, qui, lorsqu’ils tombent sur un « display: none » ne le lisent pas.

La méthode du « span » vide

Cette méthode consiste à ajouter un span vide dans la balise « hx », à côté du titre :

<hx>Mon titre<span></span></hx>

Contrairement à la méthode précédente, l’image est cette fois ci affichée en passant par le span.
On garde le titre dans le <hx>, mais grâce à la propriété z-index on passe l’image du span au dessus du texte.

hx { z-index: 1; } hx span { background: url('monimage.gif') no-repeat; width: 100px; height: 50px; z-index: 2; }

Le premier problème de cette technique est rencontrée lors de l’utilisation d’images transparentes, puisque le texte en dessous de l’image devient visible.
Second problème, si l’utilisateur décide d’agrandir la taille du texte de la page, il est possible que celui-ci déborde de l’image.
Troisième problème mais qui n’en est pas vraiment un, un span vide.

La méthode du texte caché en bas de l’image

Etudions d’abord le code, car c’est pour l’instant la méthode qui demande le plus de réflexion.

hx { background-image:url(images/titrequidechire.png); width:120px; /* largeur de l'image */ height:0px; padding-top:30px; /*hauteur de l'image*/ overflow:hidden; }

Le padding est là pour définir la hauteur de l’image. Il est obligatoire puisque la hauteur du titre est de 0px. L' »overflow: hidden » sert lui à cacher le texte qui dépasse du titre. En effet, la hauteur du titre étant interprété comment nulle, le texte va forcement dépasser, mais il sera caché grâce à l' »overflow: hidden ».

Le titre quant à lui est tout simplement contenu dans une balise « <hx> ».

C’est peut-être une des meilleurs méthodes, mais le « height: 0px » peut poser quelques problèmes sur certains navigateurs d’écran, celui-ci masquerait le contenu.

Merci à therEDLED pour cette méthode.

La méthode du « text-indent »

Toute l’astuce réside dans le fait de sortir le texte de l’écran en passant par la propriété « text-indent » avec une valeur négative.

&lt;hx&gt;Mon titre&lt;/hx&gt;
hx { background: url('monimage.gif') no-repeat; width: 100px; height: 50px; text-indent: -9999px; }

Le plus gros problème survient lorsque l’utilisateur décide de ne pas afficher les images de la page, il se retrouve dans ce cas sans texte pour les titres.

C’est la méthode que j’utilise, bien que ce ne soit pas la meilleur, elle me convient parfaitement.

La méthode du Clip

Cette méthode utilise la très peu connu propriété « clip » qui consiste à rogner la zone d’affichage d’un élément de votre page.
Pour saisir son fonctionnement, je vous conseille de lire ce très bon article publié sur Blog and Blues.

C’est un peu le même principe que la méthode du span vide, à ceci près que l’on n’utilise pas de display: none, bien mieux pour Google.

Vous comprendrez son fonctionnement complet en lisant cet article : Utiliser Clip pour masquer du contenu de manière accessible ?.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *