[Résolu] Titres avec images

Bonjour
Je souhaiterai que mes titres de niveau h2 par exemple soit des images mais en conservant la lisibilité textuelle pour la hiérarchie du contenu.

Vaut-il mieux faire :
<h2><img ... alt="mon titre"...></h2>

ou
<h2 class="img_titre">mon titre</h2>
Est-ce que la class peut cacher le titre textuel ?

Merci d'avance pour votre aide

--------
Modifié par bluety (21 Apr 2019 - 16:43)

Bonjour,

J'ai tendance à le faire comme ça :

<h2 class="img_1">Mon titre</h2>

h2 { 
text-indent:-9999px; }

h2.img_1 { 
width:...; /* largeur de ton image */
height:...; /* hauteur de ton image */
background:...; /* image */ }

A noter que si tes images ont la même largeur et/ou hauteur, tu pourras optimiser ton code en mettant le width et/ou le height dans le sélecteur commun.

Mais je précise que l'on peut très bien utiliser la balise <img> directement dans le <h2>, vu que cette image est significative.
Modifié par BeliG (29 Apr 2010 - 12:13)

Bonjour,

BeliG a écrit :
J'ai tendance à le faire comme ça

Est c'est exactement ce qu'il ne faut pas faire si on se soucis un minimum d'accessibilité (on ne parle pas que des aveugles). Dans ce cas, si les images ne se chargent pas (problème serveur, de connexion...) le titre restera masqué, donc il n'y aura plus de titre.

La seule BONNE solution est la première que tu proposais, avec une <img>. Le alt est tout aussi bien référencé que du texte "en dur".

Laurie-Anne a écrit :
Dans ce cas, si les images ne se chargent pas (problème serveur, de connexion...) le titre restera masqué, donc il n'y aura plus de titre.

Je suis d'accord.

Si le chemin vers l'image est incorrect, ou si l'image n'est plus sur le serveur, ça craint.

Par contre, si le problème concerne la feuille de styles, pas de problème (l'intitulé est tout de même présent dans le code HTML). Cette façon de faire ne doit pas poser de souci non plus aux navigateurs vocaux.

EDIT : Je finis mon message, je n'ai pas eu le temps tout à l'heure.

Être rigoureux, c'est bien, par contre je ne suis pas pour être radical. Je pense que la solution de mettre l'image en arrière-plan présente plus d'avantages que d'inconvénients (c'est valable pour les titres, mais aussi pour les menus, voir les logos dans une certaine mesure) :
- En terme de maintenance, c'est quand même plus pratique d'avoir tous les titres dans une CSS qu'une image sur chaque page du site,
- En terme de vitesse d'affichage, les images d'arrière-plan sont chargées une fois, ensuite le navigateur va les chercher dans le cache. Les images placées en dur avec <img> sont quant à elles téléchargées à chaque chargement de la page.
Modifié par BeliG (29 Apr 2010 - 13:50)

Je viens d'éditer mon message précédent.

Ok merci à tous pour vos réponses éclairées !

Donc :
- utiliser <img> pour mon titre en l'occurence et toute image significative
- utiliser background en css, pour les images décoratives, arrière-plan
Modifié par titi222 (29 Apr 2010 - 15:03)