Des liens externes accessibles et simples

Le guide d'accessibilité du W3C déclare :

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.

Selon la manière dont est lu ce point, cela peut vouloir dire que chaque lien externe devrait être identifié en tant que tel dans le texte du lien lui-même. Par exemple, vous pourriez utiliser "(lien hors du site)" ou "(lien externe)" à l'intérieur du texte du lien qui pointe vers une ressource externe.

Existe-t-il une façon d'ajouter un petit texte explicatif pour tous les liens externes et de remplacer ce texte par une petite icône pour les navigateurs supportant le CSS ?

1. Donnez une classe au lien externe.

    

   Sélectionnez

   <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.

    

   Sélectionnez

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

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

    

   Sélectionnez

   <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.

    

   Sélectionnez

   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.

    

   Sélectionnez

   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.

    

   Sélectionnez

   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.

    

   Sélectionnez

   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.

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.

Tous mes remerciements à julp pour sa relecture.