Le but étant, par exemple, d'afficher en mode graphique un logo ou une bannière, tout en fournissant un texte « en dur » dans le code HTML, texte qui sera visible lorsque le site est visité avec un navigateur non graphique.

Il existe plusieurs méthodes, utilisant généralement une image de fond CSS ("background-image"). À noter que la règle "display: none" pose des problèmes aux lecteurs d'écran.

Le code html :

<h1>Ici le titre en texte</h1>

Le style css :

h1 {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
}

Attention : Votre feuille de styles css ne sera plus valide CSS2.0, mais CSS2.1.

Autre possibilité (non prise en compte sous Internet Explorer 5.0 et précédents) :

h1 {
text-indent: -5000px;
}

IMPORTANT : dans tous les cas, éviter les masquages à l'aide de "display none" ou "visibility hidden" car cette technique rend l'information inaccessible sur certains lecteurs d'écran (lire à ce sujet Remplacement d'images : halte au display none !)