FAQ version Beta 0.5
Typographie
Comment cacher un titre (derrière un logo par exemple) ?
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 :
Le style css :
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) :
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 :
http://blog.alsacreations.com/2006/01/29/220-remplacement-dimages-halte-au-display-none
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);
}
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;
}
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 :
http://blog.alsacreations.com/2006/01/29/220-remplacement-dimages-halte-au-display-none
Liens complémentaires