Hide text & image replacement

-

Quels impacts peuvent avoir les différentes méthodes pour cacher du texte sur le référencement et l’accessibilité.

Deux méthodes qui font du bruit en ce moment, celle de Nicolas Gallagher et celle de Scott Kellum de L. Jeffrey Zeldman une mise à jour de la méthode "Phark".

"Thinking_outside_the_box" qu’il disait, mais pas trop quand même

Avec son célèbre text-indent: -9999px, la méthode Phark, permet de cacher du texte sans pour autant casser l’accessibilité. Le problème étant que cette méthode créer une boite géante de 9999px et de ce fait créer différents problèmes de lenteurs et ralentissements, certains vont même jusqu’à mettre -999em sur une base de 16px cela fait environ 16 000 px !
Depuis, cette méthode a été mise à jour, voici le code :

.hide-text,.ir {
    text-indent : 100%;
    white-space : nowrap;
       overflow : hidden;
}

Concrètement

text-indent:100% décale le texte hors de cette boite, à sa limite, à 100% de cette boite, pour le comprendre, il suffit de remplacer cette valeur par 99%.

white-space : nowrap, permet d’avoir un affichage sur une seule ligne du texte, sans ce nowrap, si votre texte fait plus d’une ligne, il n’y aura que la première ligne de texte qui sera indenté à 100% la suite restera dans sa boite.

overflow : hidden, sans lui tout le texte indenté reste visible, donc cachez le !

Accessibilité

JAWS (11.0.1476, 10.0.1178) , dans ses anciennes version affiche le texte à la lecture sur Firefox 10 ainsi que SAToGo 3.3.32 pour IE9 . NVDA s’en sort très bien.

La méthode de Gallagher

Cette méthode permet aussi d’éviter la création de boite de 9999px, donc éviter les ralentissements, etc. Il n’y a pas non plus besoin de cacher les débordements de texte, étant donné que le texte ne prend pas de place font : 0/0 a. Et aussi , plus besoin de code>white-space : nowrap, puisqu’il n’y a pas d’indentation de texte, donc plus besoin de mettre en inline. Elle fonctionne aussi sur les blocs en inline-block

.ir,.hide-text {
              font : 0/0 a;
       text-shadow : none;
             color : transparent;
}

Concrètement

font : 0/0 a , est un raccourci permettant d’avoir un font-size : 0; line-height : 0 et de définir une police a ,sans celle-ci ce dernier ne fonctionne pas.

Pour passer la validation CSS , mettre font : 0px/0 a.

text-shadow : none , on s’assure qu’aucune ombre de texte ne sera portée sur l’image ou autre.

color : transparent , permet de palier au fait que certains navigateurs ne veulent pas du font : 0/0 a

IE6 affiche quand même le texte en toute toute petites pattes de mouches

Accessibilité

Seul Window-Eyes ne comprend pas cette méthode.

Référencement, CSS Spamming

Ce que Matt Cutts en dit :

If you’re straight-out using CSS to hide text, don’t be surprised if that is called spam. I’m not saying that mouseovers or DHTML text or have-a-logo-but-also-have-text is spam ; I answered that last one at a conference when I said “imagine how it would look to a visitor, a competitor, or someone checking out a spam report. If you show your company’s name and it’s Expo Markers instead of an Expo Markers logo, you should be fine. If the text you decide to show is ‘Expo Markers cheap online discount buy online Expo Markers sale …’ then I would be more cautious, because that can look bad.

Plutôt que de chercher ici et là des informations concernant ces méthodes sur le référencement, j’ai décidé de faire le test moi-même, sur différentes chaînes.

La méthode Gallagher

oignoncactusdereferencementanodin

La méthode Phark à jour

bieretraditionetoilecestsuperlavie

Après une semaine passée dans les tuyaux de google, il se trouve que les 2 méthodes sont correctement référencées avec phark , bieretraditionetoilecestsuperlavie et Gallagher , oignoncactusdereferencementanodin , donc rien à redire à ce niveau.

Catégorie : Référencement · Tags :