Business Geek

Tout développeur de site web a été confronté à cette problématique et la réponse technique que l’on rencontre dans 99% des cas est de mettre un tag <img />. Cela répond certes à la problématique mais ce n’est en aucun cas bulletproof^[1] et ne respecte pas les rudiments du web design.

En effet, les moteurs de recherche ne considèreront pas comme pertinente l’information, les outils d’accessibilité risquent d’être perdus et votre code HTML peut devenir vite inmaintenable avec cette forme de conception. Comment faire pour palier à ces problématiques ? Un webdesigner vous répondra : CSS biensur ! Et je ferai la même réponse.

Repartons du début :

1. Toujours commencer par trouver la sémantique correcte. Pour un titre, on met un tag <h1/> (ou h2, etc.)
2. on met le titre de façon TEXTUELLE pour être compris par les outils donc <h1 id="maintitle">ici mon super titre</h1>
3. l’image est décorative donc on la met dans le style. Dans votre CSS, vous aurez
   #maintitle { background:url(title.gif) ; }
4. à ce stade, tout semble correct sauf que le texte apparait au dessus de l’image, il faut donc le faire disparaître. Il existe 2 solutions.
5. 1ère solution (la plus élégante) : mettre un tag dit technique pour faire disparaître le texte. Le HTML devient <h1 id="maintitle"><span>ici mon super titre<span></h1>.
   Ensuite, il suffit de faire disparaître le <span> en CSS : #maintitle span {visibility:hidden[2] ;}
   Attention : vous aurez certainement des problèmes de padding à régler.
6. 2ème solution (à proscrire mais bon) : on a pas besoin du span et on décale le texte pour le faire sortir de la fenêtre #maintitle { text-indent:99999px; } 

^[1]: j’adore ce terme et vous le trouverez souvent dans mes propos (au même titre que le très fameux : « ça poutre »)
^[2]: on peut utiliser un display:none mais la taille du rendu du h1 devient minuscule (voire invisible); visibility:hidden permet de garde la taille que le texte aurait pris