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;
}

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

• Comment fonctionne la propriété CSS z-index ?
• Remplacement d’images : halte au display none !
• Mettre un titre en image et rester accessible
• Using background-image to replace text
• Revised Image Replacement

Articles sur le même sujet

• Une solution CSS accessible pour remplacer du texte HTML par une image
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Styler vos champs de formulaires de recherche avec CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• Menu HTML et CSS, sliding doors et item current en PHP

Il suffit parfois d’une coupure de fin de phrase malheureuse pour que le sens global nous échappe ou qu’un double sens politiquement incorrecte voit le jour… Par ailleurs, un mot seul sur sa ligne n’est pas très esthétique visuellement. Voici une fonction jQuery pour remettre les choses en place ^_^

En typographie, on appelle ça la gestion des veuves et des orphelines. En général ces termes s’appliquent plutôt à la première ligne d’un paragraphe qui se retrouve seule à la fin d’une page (opheline) ou la dernière ligne d’un paragraphe qui se retrouve seule en haut d’une page (veuve) cf. Wikipedia.

Le site Learning jQuery propose trois méthodes pour appliquer un espace insécable   entre les deux derniers mots d’un titre pour les solidariser sur la deuxième ligne afin d’éviter d’avoir un titre disgracieux comme celui que vous avez sous les yeux :D

Parmi les trois solutions proposées, j’ai choisi celle qui reposait sur le traitement des chaines de caractères string, mais rien ne vous empêche de choisir la méthode utilisant les tableaux (Array) ou les Expressions régulières.

$(document).ready(function() {
    var h2all, h2a, h2b;
        $('h2 a').each(function() {
        h2all = $(this).text();
        h2a = h2all.slice(0, h2all.lastIndexOf(' '));
        h2b = ' ' + h2all.slice(h2all.lastIndexOf(' ')+1);
         $(this).html(h2a + h2b);
     });
});

La fonction s’applique uniquement aux liens contenus dans la balise de titre de niveau H2 sur l’ensemble de la page.

MAJ : Pour intégrer cette fonction dans WordPress, voici un fichier .zip à décompresser et à placer dans le dossier plugins de votre thème.

Articles sur le même sujet

• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• 139 ressources Javascript et jQuery
• jQuery Splitter — divisez votre contenu en plusieurs parties redimensionnables
• Mise-à-jour de la grosse grosse liste pour webdesigner
• 1000 ressources pour le développement web et WordPress