[clos] Div, Background et H1 caché (avec CSS) / apparent (sans CSS)

Bonjour,

Faire un code XHTML valide sans pour autant négliger l'esthétique.
J'ai lu qu'il n'était pas souhaitable de mettre des éléments en display:none et visibility:hidden, si on souhaite qu'ils soient pris en compte par les les lecteurs textuels et par google et les autres robots pour le référencement.

Est-ce que la solution ci-dessous vous semble correcte ? J'avais lu un post sur le sujet, mais est-ce que cette technique est touours d'actualité ?

Merci !

[b]CSS[/b]

div{
   background:url(image.png) no-repeat top left;
   width:1000px;
   height:135px;
   margin:0;
   padding:0;
  }
h1{
  position:absolute;
  top:-9999px;
  left:-9999px;
}

[b]HTML[/b]

<div>
    <h1>Titre apparent quand les CSS sont désactivées</h1>
</div>

Modifié par EricLB (07 Jun 2006 - 14:25)

Bonsoir,

Je ne sais pas si cette technique marche dans tous les cas et dans tous les navigateurs graphiques ou non...
Mais il y en a au moins un où elle ne suffit pas : le cas des images désactivées AVEC css actif.
Il y a une discussion récente qque part sur le forum (trop fatigué pour chercher moi-même désolé ) qui traite du sujet.
Tout dépend bien sûr de ton image (en particulier si elle est transparente ou non, et quelle taille elle a par rapport à ton titre à cause du zoom), mais la méthode qui consiste tout simplement à mettre le texte SOUS l'image me semble assez bonne, surtout pour un titre.

Mpok a écrit :

Mais il y en a au moins un où elle ne suffit pas : le cas des images désactivées AVEC css actif.

Bien vu ! Même si l'image est appelée en background dans la CSS, le fait de désactiver les images supprime effectivement AUSSI les images de background.

Damned ! Encore une solution qui n'est pas 100% satisfaisante.

Le problème est que faire un site qui prend en compte, à la fois, que les internautes peuvent :
- Désactiver les CSS,
- Désactiver les images,
- Désactiver Javascript,
- Ne pas avoir le plug-in Flash,
- Grossir les polices de caractère de 2 tailles.

Le tout dans un contexte professionnel avec des contraintes autres que technique, ça relèvent vraiment de la gageure, voire même de l'impossibilité quelques fois...

Dans le cas présent existe-t-il une meilleure solution ?
Modifié par EricLB (07 Apr 2006 - 10:39)

bonjour,

Si c'est dans le cas d'un logo en h1 pourquoi ne pas utiliser l'image avec un texte alternatif.

Mettre un titre en image et rester accessible
Modifié par knarf (07 Apr 2006 - 12:50)

EricLB a écrit :

Le problème est que faire un site qui prend en compte, à la fois, que les internautes peuvent :
- Désactiver les CSS,
- Désactiver les images,
- Désactiver Javascript,
- Ne pas avoir le plug-in Flash,
- Grossir les polices de caractère de 2 tailles.

Tu peux ajouter aussi :

Knarf a écrit :

Les personnes n'ayant plus de pile dans leur souris.
les personnes ayant perdu leur souris sur le bordel ambiant du bureau.
le fil de la souris que le chat à bouffé.
Les personne ayant un probléme de motricité avec les membres supérieurs
Les personnes valides pour qui le surfe au clavier est un choix (doit y en avoir non?).
Le mec qui as le bras dans le plâtre et qui est infoutu de se servir d'une souris de l'autre pendant 2 semaines.

Et encore :

- ceux qui n'ont pas d'écran à regarder mais des hauts-parleurs à écouter
- ceux qui attendent leur rendez-vous chez l'ophtalmo depuis 6 mois pour changer de lunettes
- ceux qui sont incapables de déplacer leur souris avec une précision inférieure à 5mm
- ceux qui sont affectés de daltonisme
- ceux trackpadent avec les orteils
- ceux qui ont 2,5 grammes dans chaque bras, incapables de coordonner leurs mouvements, et qui cherchent un taxi pour rentrer
- ceux qui etc...

a écrit :

« ...ces personnes estimées au nombre de douze millions en France sont à ce jour brutalement mises en face d'une évidence, aujourd'hui l'accès au réseau Internet n'est globalement pas pensé pour eux, et ce malgré les efforts du World Wide Web Consortium (W3C) ». Livre Blanc Accessibilité du web

Au boulot !!!

Salut EricLB,

Une question me vient à l'esprit à chaque fois que je vois ce genre de topic ... : Mais pourquoi diable caché le texte de ces balises "h1" ?!?!?

J'espère que ce n'est pas pour ce que je crois ...

Les navigateurs textuels ne gèrent pas les CSS ; tout ce qui est caché avec display fonctionne très bien dedans.

Toutes les solutions utilisées présentent toujours un inconvénient : soit si on désactive les images, soit pour les lecteurs d'écran...

... sauf une, paraît-il :

BALISAGE :

<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>

CSS :

.replace {
position: relative;
margin: 0px;
padding: 0px;
/* hide overflow:hidden from IE5 \*/

overflow: hidden;
/* */
}

.replace span {
display: block
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
/* for Opera 5 and 6 */
}

#myh1, #myh1 span {
height: 25px; 
width: 300px;
background-image: url(thyme.png);
}

Pour : accessible aux lecteurs d'écran. Aucun span superflu. Résolution du problème des images désactivées lorsque les CSS sont activées.
Contre : les images transparentes doivent être évitées*. Lourdeur de la CSS.
Prise en charge : Windows - IE 5+, Netscape 7, Opera 6+, Firefox. Macintosh - IE 5.2, Safari, Firefox.

* Cette technique cache le titre derrière une image : si celle-ci est transparente, le texte devient visible derrière elle.

Source : le zen des css, dave Shea & molly holzschlag

Quelques liens :
Pour la FIR:
www.digital-web.com/articles/in_defense_of_fahrner_image_replacement
www.alistapart.com/articles/fir
Diverses méthodes :
http://www.mezzoblue.com/tests/revised-image-replacement

Pandore a écrit :
Salut EricLB,

Une question me vient à l'esprit à chaque fois que je vois ce genre de topic ... : Mais pourquoi diable caché le texte de ces balises "h1" ?!?!?

J'espère que ce n'est pas pour ce que je crois ...

N'est ce pas exagéremment soupçonneux ? Au vu du code donné par Eric cela ne me parait pas du tout justifié.

Je sais qu'EricLB est très très respectueux des sandards du W3C et des normes d'accessibilités.

Mais tu sais quand je vois balises h1 et cachées, ça me fait tout de suite penser à mot-clés et référencement ...

Mais non, mais non, je ne suis pas soupçonneux clb56

La question n'est pas de savoir si l'auteur est respectueux des standards, quand les éléments donnés (en l'occurence le code) sont parfaitement transparent quant à l'objectif (remplacer un texte par une image background) ce genre de considération est à mon avis en trop (et ce d'autant plus qu'elle a, quelque soit le contexte, le poids énorme que donne l'expression de la vérité). J'ai vu des questions naïves littéralement tuées par ce genre de considération et donc je réagis systématiquement.

Evidemment Je doute qu'eric soit naîf sur ces questions et ce n'est pas toi que je qualifie de soupçonneux mais bien la question telle qu'elle est posée.

Il faut je pense être très vigilant là dessus
Modifié par clb56 (08 Apr 2006 - 10:43)

Bonjour à tous,

Le lien donné par Franck répond en détail à la question posée Mettre un titre en image et rester accessible, en détaillant chaque possibilité et leur inconvénient ...

Il n'y a effectivement pas de quoi fouetter un chat ...

Pauvre chat !

Modifié par Vero (08 Apr 2006 - 12:56)

Pandore a écrit :
Salut EricLB,

Une question me vient à l'esprit à chaque fois que je vois ce genre de topic ... : Mais pourquoi diable caché le texte de ces balises "h1" ?!?!?

J'espère que ce n'est pas pour ce que je crois ...

Bonjour Pandore, je ne sais pas ce que tu crois, mais vu le ton de ce message je ne pense pas que ce soit bon... Peut-être devrais-tu être plus explicite. Ca ressemble un peu à un début de procès d'intention, qui n'a pas vrament sa place ici je pense. Et comme je n'ai pas envie de me justifier, je ne le ferais donc pas.

Si tu relis mon message, tu verras que le but n'est pas de "cacher" le texte de la balise h1, mais de faire en sorte qu'en désactivant les CSS les internautes puissent avoir l'information du titre qui est en image. Si le titre est en image, c'est qu'il utilise une police spéciale pour une marque de produit. Bien sur la solution serait peut-être de mettre un alt="" à cette image. J'espère bien en postant ce genre de message avoir des avis éclairés et engager la discussion sur la meilleure des solutions à adopter !

Merci à tous pour vos réponses

Pandore a écrit :

Mais tu sais quand je vois balises h1 et cachées, ça me fait tout de suite penser à mot-clés et référencement ...

Mais non, mais non, je ne suis pas soupçonneux clb56

Est-ce que faire un site bien référencé en utilisant les standards du web et un code XHTML bien formé est condamnable ? Je ne parle pas de combines qui consistent à truffer la page de mots clés à l'intérieur de balises h1, mais d'un site utilisant des balises h1, h2, h3, h4, h5, h6, p, etc.

Puisque je travaille pour une entreprise commerciale, on pourra aussi me demander : qu'est-ce qui est meilleur pour le référencement un texte à l'intérieur d'une balise h1 ou un texte à l'intérieur d'un attribut alt ?

A moi de concilier standards du web et efficacité...