Des liens externes accessibles et simples

Date de publication : 15/05/2008

Par Russ Weakley (Max Design)
 Denis Cabasson (traducteur) (Site)
 

Le scénario

Identifiez clairement la cible de chacun des liens. [ Priorité 2 ] Le texte du lien (Le texte affiché dans une balise lien) doit être suffisamment significatif pour pouvoir être lu hors de son contexte -- soit seul ou en tant qu'élément d'une suite de liens. Le texte du lien doit également être concis.

Le problème

La solution

1. Donnez une classe au lien externe.

   <a class="externe" href="#">sed diam nonummy</a>

2. Bien que l'attribut title pourrait être utilisé à ce niveau, une étude récente sur les attributs title, réalisée par Steve Faulknermontre, a montré que cet attribut n'est pas affiché de façon identique dans tous les navigateurs. A la place, ajoutez un texte descriptif à l'intérieur du lien externe pour aider à identifier la cible.

   <a class="externe" href="#">sed diam nonummy (lien externe)</a>

3. Entourez le texte descriptif d'un élément <span>.

   <a class="externe" href="#">sed diam nonummy<span> (lien externe)</span></a>

4. Créez maintenant une règle CSS pour cacher le texte descriptif. Bien qu'utiliser "display: none" paraisse être la meilleure solution, cette méthode n'est actuellement pas supportée par plusieurs lecteurs d'écran. Pour cette raison, l'utilisation du positionnement absolu pour pousser le texte hors des limites de l'écran est une meilleure option.

   a.externe span { position: absolute; left: -5000px; width: 4000px; }

5. Si vous souhaitez qu'une icône apparaisse en fonction de chacun des états du lien, créez trois variations de la même icône dans le même fichier - en laissant un espace conséquent entre chacune d'entre elles. Par exemple :
   
   
   
6. Créez une règle CSS pour ajouter une icône en image de fond pour les liens externes.

   a.externe:link { background: url(icon.gif) no-repeat 100% 0; padding: 0 20px 0 0; }

7. Créez une règle CSS pour ajouter une icône en image de fond pour les liens externes à l'état visited.

   a.externe:visited { color: purple; background: url(icon.gif) no-repeat 100% -100px; padding: 0 20px 0 0; }

8. Créez une règle CSS pour ajouter une icône en image de fond pour les liens externes à l'état hover.

   a.externe:hover { color: red; background: url(icon.gif) no-repeat 100% -200px; padding: 0 20px 0 0; }

9. En théorie, l'icône "lien externe" devrait être expliquée quelque part dans le site.

Vous pouvez voir un exemple à cette adresse.

À noter

Dans certaines versions de Microsoft Internet Explorer, quand un lien se retrouve séparé sur deux lignes, l'image de fond sera affichée à la fin de la première ligne au lieu d'être à la fin du lien.

Remerciements