"cacher" du contenu sous une image (css/xhtml)

Bonjour,

Je suis à la recherche de la méthode la plus optimale pour "cacher" du contenu sous une image, pour être plus précise, je souhaite simplement mettre du texte html derrière un logo.

J'ai trouvé ce topic http://forum.alsacreations.com/topic-23-26179-1-Cacher-un-titre-derriere-un-logo---IE7.html Une des méthodes serait donc avec text-indent, cependant le sujet datant de 2007, peut etre une nouvelle technique a vu jour avec css3 par exemple...

Donc l'idée principal :

<div id="header">
<h1 id="titrecaché">Titre de mon site</h1>
</div>

J'opterai pour un background-image pour la div header et le text-indent pour le h1. Est ce la meilleure option donc?
Sinon avec les z-index peut etre...?


Merci de votre aide.

Salut et bienvenue à toi,

C'est pas une idée géniale, et si ton titre est dans une image, il vaut mieux tout simplement mettre cette image dans le code html, avec l'attribut alt qui va bien :

<div id="header">
<h1><img src="le_logo_de_mon_entreprise.png" alt="mon entreprise"></h1>
</div>

Que la personne ait accès à l'image où non, elle aura accès à l'information, soit celle visuellement présente dans l'image, soit son alternative textuelle.
Modifié par Mikachu (30 Apr 2010 - 16:23)

Hello,

Je suis vraiment bête... j'avais oublié qu'on pouvait appliquer les hn pour des images...

Merci de ton aide!
Modifié par Selda.M (30 Apr 2010 - 16:28)

Les moteurs de recherche ignorent les images, et se contentent d'en lire les alternatives visuelles lorsqu'elles existent.

Ainsi, pour le code que je viens de te suggérer, Google verra ceci :

<h1>mon entreprise</h1>

En terme de sémantique, ton image est un titre, donc si elle est contenue dans une balise de titre, elle sera interprétée comme un titre.
Modifié par Mikachu (30 Apr 2010 - 16:29)

J'ai une autre question dans ce cas, même si je pense avoir une réponse, peut être pourras tu me le confirmer.

L'idée est donc de mettre une image en titre, avec le texte alternatif. Avec la solution proposée pas de problème.
Cependant, si par exemple il y avait un souci pour charger l'image, le visiteur verrait donc le texte sans réel formatage, juste avec l'attribut h1. Ce que je souhaitais faire (ça me revient maintenant!) c'etait de proposer une alternative visuel à l'image un peu plus développée que le simple h1.

Je m'explique, l'image représente le nom du site avec une police inventée, donc quelque chose de purement graphique. Néanmoins, il y a un jeu de couleur, la moitié du nom est en blanc, l'autre en noir, s'il n'y avait pas la question de police, le css suffirait donc.

Je cherchais donc une possibilité pour présenter au visiteur le titre en noir et blanc, même s'il y a un souci avec le chargement de l'image. Est ce que c'est possible ou je risque de devoir me tourner vers php ou tout autre langage dynamique...


Récapitulons :

<h1>
<!-- si tout va bien : -->
<img src="logo.jpg" alt="titre de mon site">
<!-- si l'image ne se charge pas : -->
<span style="color: #000000;">Titre Début</span>Titre Fin en Blanc
</h1>

J'ai mis à la ligne pour bien découper la logique à laquelle je fais appel (qui est peut être faussée!! )

L'idéal serait de pouvoir mettre <span style="color: #000000;">Titre Début</span>Titre Fin en Blanc dans le alt mais ce n'est pas possible à ma connaissance...


Merci !

Salut,

Je pense que tu te prends un peu beaucoup la tête à vouloir faire cela. C'est peut être possible avec php, mais je ne suis pas spécialiste en la matière. C'est à mon avis une mauvaise idée de chercher cet effet, car l''information de couleur connaîtra toujours des limites, notamment auprès des non voyants qui n'auront pas accès à cette séparation optique entre deux partie de ton titre.

La technique de couper en span peut poser problème d'accessibilité s'il s'agit d'un seul mot, car si je ne me trompe pas, il sera lu par les navigateurs vocaux comme deux mots séparés, pouvant du coup rendre sa compréhension difficile voir incompréhensible.

Pour finir, il ne faut pas oublier qu'il ne s'agit que d'une alternative textuelle, et à priori les seules personnes qui accèderont à l'information de cette manière là seront ceux qui de toute manière ne peuvent pas percevoir la différence de couleur tout court.

D'accord, je comprends les inconvénients. C'était simplement dans le cas d'un souci de chargement d'image afin de permettre tout de même quelque chose d'esthétique, mais si cela n'est pas compatible avec l'accessibilité autant oublier...

Je vais donc me contenter du alt

Merci!

Bonjour,

non ce n'est pas possible tel quel : alt est un mécanisme très simple qui n'accepte que du texte brut.
Une possibilité serait d'utiliser deux images comportant chacune une des moitiés du texte MAIS :
- les personnes qui n'affichent pas les images s'attendent à ne pas voir restitué l'intégralité des détails de la charte graphique d'un site, c'est vraiment pas important pour eux ... Du moment que c'est lisible (pas de blanc sur blanc)
- les non-voyants utilisateurs d'un lecteur d'écran vont entendre à chaque page "image alsa image créations", c'est un petit peu lourdingue à force, enfin je pense

Seule contre-indication : une newsletter. Là oui, la majorité des destinataires ne va pas afficher les images et le texte alternatif a son importance !

Merci beaucoup pour ces précisions, notamment pour la newsletter!

Remarque en passant: avec object ce serait possible.

<h1 id="logo">
  <object type="image/png" data="logo.png">
    <strong>Nom</strong>
    <span>du site</span>
  </object>
</h1>

(Je suis plus sûr de la syntaxe exacte.)

Bien sûr, le problème de cette syntaxe c'est que certains navigateurs l'interprètent mal. Je vous laisse deviner lequel en particulier.

Je n'ai jamais utilisé cette balise "object" pour ma part... je vais donc creuser Merci

Tu peux voir dans ce billet si ça s'affiche bien dans IE.

IE6 n'aime pas les object imbriqués.

Super comme méthode! Me reste juste à voir si je peux bouder les utilisateur d'IE6 ou non

Selda.M a écrit :
Super comme méthode! Me reste juste à voir si je peux bouder les utilisateur d'IE6 ou non

Normalement les object non-imbriqués fonctionnent, donc le code de Florent devrait fonctionner.

Il faut voir aussi quel est le support par les lecteurs d'écran, le rendu en cas d'indisponibilité de l'image, etc.

Florent V. a écrit :
Il faut voir aussi quel est le support par les lecteurs d'écran(...)

À l'époque du billet, le contenu alternatif n'était pas pris en compte.

Salut tout le monde,

Qu'est ce que vous pensé de la solution #8 de ce lien ?

c'est à dire pour les flémard le html :

<h1 class="technique-eight">
	<span></span>CSS-Tricks
</h1>

et le css :

h1.technique-eight {
   width: 350px; height: 75px;
   position: relative;
}
	
h1.technique-eight span {
   background: url("images/header-image.jpg");
   position: absolute;
   width: 100%;
   height: 100%;
}

D'ailleurs en fait qu'est ce que vous pensez de ces techniques tout court, vu que certaines ont des impactes au niveau SEO

Mikerob a écrit :
Qu'est ce que vous pensé de la solution #8 de ce lien ?

Elle est intéressante mais impose de figer les dimensions de l'élément, ce qui n'est pas toujours pratique. Les éléments figés en hauteur, notamment, c'est le mal.
Ponctuellement pour des menus de navigation avec images, rollovers «simples» en CSS plutôt que JS (ce qui évite d'avoir à faire des préchargements d'images), et si on n'a pas de contrainte de certification ou validation de l'accessibilité, pourquoi pas.

Mikerob a écrit :
D'ailleurs en fait qu'est ce que vous pensez de ces techniques tout court, vu que certaines ont des impactes au niveau SEO

Deux choses:
- Premièrement, mon avis sur une technique n'est pas conditionné entièrement ou principalement par son impact ou non sur le SEO.
- Deuxièmement, la règle numéro 1 des forums de développement web c'est que quand un mec dit que ceci ou cela a un impact sur le SEO, il y a 99% de probabilité pour que ça soit des bêtises. À quelles techniques fais-tu référence exactement («certaines»...), et où sont les études qui montrent leur impact pour le SEO?

Quitte à digresser sur le SEO, un billet récent de Sébastien Billard:
SEO : ces optimisations qui ne servent à rien (ou presque).

Je pense qu'il fait référence au H1 qui est utile en seo, et avec les méthodes que vous proposez on peut avoir un rendu graphique interessant en conservant des optimisations seo.