8 techniques CSS pour remplacer du texte HTML par une image

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

8 techniques CSS pour remplacer du texte HTML par une image

Il est courant d’afficher le logo d’un site web sous la forme d’une image au lieu de mettre le nom du site au format texte HTML. Les préoccupations grandissantes des webmasters concernant l’optimisation SEO ont popularisées les titres HTML composés de mots-clés optimisés puis masqués au profit d’un logo sous forme d’image. Pour y parvenir, les intégrateurs HTML & CSS ont plusieurs cordes à leur arc. Malheureusement certaines solutions présentent des défauts, notamment en ce qui concerne l’accessibilité des contenus cachés, qui peuvent rester inaccessibles pour certains (agents) utilisateurs. Sans parler du risque (faible dans ce cas) de passer aux yeux de Google pour un vilain petit cachottier. Voici donc un florilège de techniques CSS pour cacher ce texte que l’on ne saurait voir, mais qui a son importance.

Jouer sur la taille des caractères avec font-size

.texte-a-cacher {
    font-size: 0;
}

Déplacer le texte hors du Viewport avec text-indent ou position

.texte-a-cacher {
    text-indent: -9999em;
}
.texte-a-cacher {
    position: absolute;
    left: -9999em;
}
.texte-a-cacher {
    position: absolute;
    top: -9999em;
}
.texte-a-cacher {
    position: absolute;
    top: -9999em;
    left: -9999em;
}

Sortir le texte du flux avec display

.texte-a-cacher {
    display: none;
}

Masquer le texte avec visibility

.texte-a-cacher {
    visibility: hidden;
}

Placer le texte derrière l’image avec z-index

.texte-a-cacher {
    position: relative;
    z-index: -1;
}

Exemples de marquages HTML

jQuery for Designers
<h1>
    <a href="http://jqueryfordesigners.com">
        <span>jQuery for Designers</span>
    </a>
</h1>
#header h1 a {
    background: url(http://jqueryfordesigners.com/wp-content/themes/j4d/static/images/logo.gif) no-repeat 0px 0px;
    border: none;
    display: block;
    height: 30px;
    width: 258px;
}
#header h1 a span {
    display: none;
}
KLOUT
<a href="/"><h1><span>Klout is </span>the Standard for Influence</h1></a>
h1 {
    background: url(/public/images/logos.png) no-repeat;
    color: #605459;
    font: normal 20px/85px Arial;
    font-style: italic;
    height: 51px;
    padding-left: 125px;
}
h1 span {
    display: none;
}
Ici et ailleurs (Neokraft)
<div id="top">
    <h1><a href="/">ici &amp; ailleurs</a></h1>
</div>
#top {
    background: transparent url(http://neokraft.net/css/2009-10/img/top_bg.png) no-repeat 0px 3px;
    height: 120px;
}
#top h1 {
    font-size: 0px;
    text-indent: -5000px;
}
W3C
<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C" />
    </a>
    <span class="alt-logo">W3C</span>
</h1>
h1 a {
    display: block;
    float: left;
    background: url('../images/logo-w3c-screen-lg') no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: white;
}
SOHTANAKA
<h1>Web Designer & Front-end Developer - Soh Tanaka</h1>
h1 {
    background: url(images/homepage_banner.gif) no-repeat center top;
    height: 219px;
    text-indent: -99999px;
}

C’est quoi le plus mieux bien ?

A la lecture des billets de Laurent Denis et de Raphaël Goetter, il semblerait que les solutions à base de display: none, ne soit pas très accessibles aux lecteurs d’écran. Voici une solution qui semble robuste et efficace :

<h1>
    <span>Blog & Blues</span>
</h1>
span {
    position:absolute;
    left: 0;
    top: -500px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
Les solutions à base de text-index: -9999em semblent également intéressantes

C’est fini

Il ne s’agit pas d’une liste exhaustive des solutions possibles (vous en trouvez bien plus dans les liens présents dans la Linkographie, ci-dessous), mais de quelques bouts de code que l’on rencontre assez souvent.

Linkographie

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



21 commentaires pour “8 techniques CSS pour remplacer du texte HTML par une image”

  1. DuaelFr dit :

    Personnellement j’utilise la plus souvent la méthode text-indent qui a le gros avantage de ne nécessiter aucun markup html supplémentaire !

  2. [...] This post was mentioned on Twitter by Bruno LesBonsTuyaux, Yann Le Du, Emmanuel Egu, acs04, Dotpress and others. Dotpress said: Remplacer du #texte #HTML par une #image avec #CSS: Il est courant d’afficher le #logo d’un site web sous la forme d… http://goo.gl/fb/PhUv1 [...]

  3. Thomas dit :

    Bonjour Bruno !

    Très belle liste de solution. Perso je déconseille le text-ident sur les liens, car l’outline est alors complètement étiré sur la gauche. Ce qui n’est pas très beau et désoriente ceux qui naviguent au clavier.

    Bonne journée, Thomas.

  4. Très belle liste de solution. Je cherchais ce que la semaine dernière. Merci pour le partage ce poste utile.

  5. Anonyme dit :

    Le mieux est d’utiliser convenablement l’attribut alt, le reste n’est que bidouille qui n’améliorent pas l’accessibilité au contraire. Fournir un texte aux lecteurs d’écran est bien mais il faut également prendre en compte les personnes qui utilisent le zoom. Un zoom sur une image ne donnera jamais le même effet que le zoom sur un texte.

    Les textes cachés restent intéressant pour donner des éléments de structures, un bon exemple est l’utilisation que Google en fait http://truffo.fr/2010/09/google-utilise-les-textes-caches-une-pratique-seo-black-hat/.

    • Je réponds à part sur la première partie de ton commentaire (j’approuve bien entendu).

      Par contre moins la seconde :) Les informations de structure données par des textes cachés (souvent des titres) sont plus perturbantes qu’autre chose (par exemple pour des personnes se basant sur les titres et leur vue pour naviguer).

      Mieux vaut tenter d’apporter ces informations par d’autres moyens : - ARIA - HTML5 offre de nouvelles possibilités (même si le support des technologies d’assistance est encore très loin d’être parfait sur ces deux points)

      • truffo dit :

        Je suis d’accord dans l’idéal toutes informations devrait être visible quelques soient les circonstances.

        Le problème que tu soulève est bien entendu réel. Malheureusement, suivant les contextes projets, on doit souvent faire le choix entre faire des trous dans la structure de titre ou une utilisation de titres cachés. J’ai tendance à croire qu’il vaut mieux privilégié une structure de titre cohérente au problème que tu soulève. Je me trompe peut être ?

        • Nous sommes donc d’accord dans l’idéal :)

          Tu as raison, il faut privilégier une structure de titres cohérente, mais je pense sincèrement qu’on peut souvent s’en sortir sans cacher des titres (ou sans trop cacher), et ça devrait être de plus en plus le cas avec HTML5.

  6. Hello Bruno,

    Chose promise, chose due, sur le plan d’accessibilité donc :

    Effectivement en utilisant display: none; le contenu masqué ne sera pas restitué par les lecteurs d’écran (type Jaws ou NVDA). Cette remarque est également valable pour la propriété visibility: hidden; Un point important que tu retrouveras dans tout référentiel d’accessibilité : l’information doit rester lisible et visible lorsque les CSS et/ou les images sont désactivées. Un texte caché deviendra visible sans CSS (et l’image disparaitra) mais en conservant la CSS et en désactivant les images seulement : plus rien :)

    Désactive les images de ce site par exemple : http://www.stage.fr/page/accueil.aspx Hop, plus rien ou presque : - Les textes cachés le restent et les images de fond disparaissent ; (- Sans compter les textes non cachés qui ne deviennent plus ou peu lisibles parce que les images de fond ne sont pas doublées de couleur de fond similaires)

    Éventuellement la seule implémentation que j’ai croisée qui fonctionne images désactivées est le menu de la home de http://grdf.fr/. Les textes cachés le sont parce que blancs sur la partie blanche de l’image de fond. Si on désactive les images, la couleur de fond étant sombre les textes deviennent lisibles.

    Un peu de lecture en anglais : Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information http://www.w3.org/TR/WCAG-TECHS/F3.html « The CSS background-image property was designed for decorative purposes » « Therefore, it is a failure to use this property to add images to convey important information.  » Outre l’absence d’alternative d’une image de fond (que l’on pourrait justement croire remplaçable avec un texte caché) : « Embedding information into a background image can also cause problems for people who use alternate backgrounds in order to increase legibility and for users of high contrast mode in some operating systems. « 

    Donc, comme le précise bien truffo, pour l’accessibilité rien ne vaut une bonne image avec une alternative appropriée.

  7. [...] solution CSS accessible pour remplacer du texte HTML par une image Dans l’article remplacer du texte HTML par une image avec CSS, j’ai listé un certains nombre de techniques efficaces permettant d’avoir un titre de [...]

  8. très bon conseil…je vais essayer de ce pas sur une page test pour voir la répercution de cacher du texte à google ;)

    http://www.next-conseil.fr/conseil-e-marketing/referencement/referencement-naturel/

  9. Rémy RICHARD dit :

    Qu’en disent les SEO ? perso j’utilise le text-indent. mais cette technique de cacher du texte peut, a défaut d’etre considéré comme black Hat, etre au minimum une alerte (cf. http://www.cssbakery.com/2010/09/image-replacement-text-indent-and-seo.html ) Matt cutts semble préconiser le alt sur l’image (dans l’exemple d’un logo) http://www.youtube.com/user/GoogleWebmasterHelp#p/search/0/fBLvn_WkDJ4 … mais bon les roll-over en css ne sont plus vraiment possible :( … (et puis finalement le spam est aussi possible dans le alt de l’image aussi ? donc …

  10. [...] pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une [...]

  11. [...] pourra lui réserver la balise h1 avec un background pour l’image. On pourra masquer le texte d’une manière ou d’une [...]

  12. Pour moi je préfére utiliser le Mysql Le server fait lapassage entre des fichiers sur le disque dur (l’emplacement « physique » des données) et ce que l’on appel des tables. Un serveur traite des bases de données qui elle même contiennent des tables. Une table est un essemble de champ permettant de décrire quelque chose et insert into carnetadresse (nom,prenom,tel) values (‘moogli’,’jungle’,’0123456789′);

  13. Samuel ROZE dit :

    Merci pour l’article.

    Juste pour information, il y a une petite erreur à la fin dans la phrase « Les solutions à base de text-index: -9999em semblent également intéressantes ». La propriété CSS est text-indent et non text-index.

  14. BONJOUR,

    Pour moi je préfére utiliser le Mysql Le server fait lapassage entre des fichiers sur le disque dur (l’emplacement « physique » des données) et ce que l’on appel des tables. Un serveur traite des bases de données qui elle même contiennent des tables. Une table est un essemble de champ permettant de décrire quelque chose et insert into carnetadresse (nom,prenom,tel) values (‘moogli’,’jungle’,’0123456789′);

    MERCI B…

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site