FIR/RIR : Méthodes de remplacement de texte par une image

novembre26, 2007

Article de Dave Shea, tiré de son blog, traduit par mes soins.

Cet article nous donne des techniques pour remplacer du texte dans une page web (un titre, un lien, etc…) par une image, tout en restant lisible par un navigateur pour malvoyant, ou un navigateur ayant désactivé le css, ou les images, ou les deux.

Designer graphique dont le travail a été largement reconnu et récompensé par de nombreux prix, membre du Web Standard Project (WaSP), Dave Shea est le créateur et le « jardinier » du site CSS Zen Garden. En plus de son poste à la tête de la Bright Creative, une agence de design web, il écrit régulièrement sur tout ce qui a trait au Web sur son site mezzoblue.com.

Problématique : le remplacement doit résoudre les problèmes des navigateurs pour non-voyants, ainsi que le problème du « image off, css on ». On espère également qu’une solution sera trouvée pour réduire le nombre de balises <span> vides requises.

FIR Classique (Fahrner Image Replacement)

En utilisant le tutorial original de Doug Bowman, on entoure le texte de balises <span> vides en les cachant avec display: none;.

Problème : la plupart des navigateurs pour non-voyants ne liront pas le texte puisqu’il n’est pas affiché, rien n’apparaît non plus dans le cas du « image off, css on », et on a besoin de <span> sans aucune fonction sémantiques.

Revised Image Replacement

<h3 id="header">
  <span>Revised Image Replacement</span></h3>
#header {
  width: 329px;
  height: 25px;
  background-image: url('sample-opaque.gif');
}
#header span {
  display: none;
}

Remplacement avec une image d’1px

La solution de Radu Darvas est d’ajouter une image GIF transparente, de 1px par 1px, pour afficher le texte définit dans l’attribut alt.

Problème : un élément sans fonction sémentique est encore ajouté à la page.

Revised Image ReplacementRevised Image Replacement

<h3 id="header">
  <img src="shim.gif" alt="Revised Image Replacement" />
  <span>Revised Image Replacement</span></h3>
#header {
  width: 329px;
  height: 25px;
  background-image: url('sample-opaque.gif');
}
#header span {
  display: none;
}

La méthode Radu

Radu a aussi conçu une méthode nécessitant le positionnement d’une marge pour cacher le texte. En théorie similaire à la méthode de Phark décrite plus bas, cette solution fonctionne sous IE5.

Problème : ne résoud pas le problème du « image off, css on ».

Revised Image Replacement

<h3 id="header">
  Revised Image Replacement</h3>
#header {
  background: url('sample-opaque.gif') no-repeat top right;
  width: 2329px;
  height: 25px;
  margin: 0 0 0 -2000px;
}

La méthode Leahy/Langridge

Seamus Leahy et Stuart Langridge ont tous les deux découvert une méthode qui autorise à retirer le <span> et restore, en théorie (bien que ce ne soit pas confirmé) l’accessibilité grâce à overflow: hidden.

Problème : rien n’apparaît dans le cas du « image off, css on », et il faut un hack pour que cela fonctionne sous IE5.

Revised Image Replacement

<h3 id="header">
  Revised Image Replacement</h3>
#header {
  padding: 25px 0 0 0;
  overflow: hidden;
  background-image: url('sample-opaque.gif');
  background-repeat: no-repeat;
  height: 0px !important;
  height /**/:25px;
}

La méthode Phark

Simplifiant grandement la méthode Leahy/Langridge, Mike Rundle (phark.net) offre une solution qui utilise text-indent pour cacher le texte. Cette technique fonctionne sous JAWS, ce qui résoud le problème d’accessibilité.

Problème : rien ne s’affiche dans le scénario « image off, css on », et ne fonctionne pas sous IE5.

Revised Image Replacement

<h3 id="header">
  Revised Image Replacement</h3>
#header {
  text-indent: -100em;
  overflow: hidden;
  background: url('sample-opaque.gif');
  height: 25px;
}

La méthode Phark revisitée

Des investigations plus poussées ont révélé des faiblesses dans la méthode précédente, avec les scrollbars sous Safari et avec la casse sous IE5.

Problème : ne résoud pas le « image off, css on ».

Revised Image Replacement

<h3 id="header">
  Revised Image Replacement</h3>
#header {
  text-indent: -5000px;
  background: url('sample-opaque.gif');
  height: 25px;
}

La méthode Dwyer

Un truc inattendu qui nous vient de Leon Dwyer, basé sur le FIR classique. Marche apparemment pour tous les navigateurs connus à ce jours, dont les navigateurs pour non-voyants.

Problème : ne résoud pas le problème du « image off, css on », et requiert toujours une balise <span> supplémentaire.

Revised Image Replacement

<h3 id="header">
  <span>Revised Image Replacement</span></h3>
#header {
  width: 329px;
  height: 25px;
  background-image: url('sample-opaque.gif');
}
#header span {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

La méthode Gilder/Levin

Tom Gilder et Levin Alexander proposent une variation supplémentaire pour régler, théoriquement, le problème de l’accessibilité (reste à vérifier, mais il est pratiquement sûr que ça fonctionne sous JAWS), et permet au texte d’être visible si on est dans un schéma « image off, css on ».

Problème : une balise <span> en trop, et une image transparente ne cachera pas le texte.

(Note : on a doublé l’exemple, pour montrer le problème des images transparentes.)

Revised Image Replacement

Revised Image Replacement

<h3 id="header">
  <span></span>Revised Image Replacement</h3>
#header {
  width: 329px;
  height: 25px;
  position: relative;
}
#header span {
  background: url('sample-opaque.gif') no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}

La méthode Lindsay

Russ Weakley écrit qu’en mettant une taille de police minuscule, de 1px, et en faisant coïncider les couleurs de la police et de l’arrière plan, on n’a plus besoin de cacher le texte.

Problème : ne résoud pas le « image off, css on », et ne marche que pour des images d’arrière-plan unies.

Revised Image Replacement

<h3 id="header">
  Revised Image Replacement</h3>
#header {
  background: url('sample-opaque.gif') no-repeat;
  width: 329px;
  height: 25px;
  font-size: 1px;
  color: #xxxxxx;
}

Le perfectionnement de Shea

Au final, quelle que soit la méthode utilisée, vous perdez le texte visible au survol de l’image, que vous ou vos utilisateurs aviez l’habitude de voir. Techniquement, vous ne devriez pas compter dessus de toute manière, puisque title est beaucoup plus approprié pour les « tool-tips ». Mais en ajoutant un title à votre header, vous pouvez retrouver ce petit effet sur votre site.

Revised Image Replacement

<h3 id="header" title="Revised Image Replacement">
  <span></span>Revised Image Replacement</h3>
#header {
  width: 329px;
  height: 25px;
  position: relative;
}
#header span {
  background: url(sample-opaque.gif) no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}

Vous pouvez suivre les réponses à cet article grâce à ce flux RSS 2.0.
Vous pouvez laisser un commentaire, ou faire un trackback.

Laissez un Commentaire


Vers le haut