Différencier les liens internes des liens externes

Toujours à la recherche des moyens me permettant de me conformer à toutes les bonnes pratiques d'Opquast — il m'en reste deux à remplir aujourd'hui et ce billet concerne la première — j'ai cherché un moyen de différencier les liens externes (qui pointent sur un site externe à celui-ci) des liens internes.

Une petite recherche Google m'a fait rapidement comprendre qu'il n'y avait pas de solutions totalement accessible à ce jour, sauf bien sûr à reprendre tous mes billets et tous les liens qui s'y trouvent, et à rajouter pour chacun une mention textuelle indiquant si le lien est externe ou pas. Je vous avoue tout de suite que la simple idée de reprendre les quelques 800 billets de ce blog m'effraie un peu.

Pour l'instant, je me suis limité à utiliser des règles CSS 3 pour obtenir l'affichage d'une petite image à la suite des seuls liens externes (j'en ai profité pour mettre également un petit symbole à la suite des adresses email). Bien sûr ce système a des limitations. Premièrement il n'est accessible qu'aux personnes voyantes et qui n'ont pas désactivé l'affichage des feuilles de style, qui utilisent un navigateur qui interprète correctement ces règles et qui n'utilisent pas un agrégateur RSS[1].

Les images utilisées, qui ont été imaginées par Nate, sont :

  • Petite flèche sortant d'un cadre : pour les liens externes
  • Petite enveloppe : pour les adresses email

Les règles utilisées, qui ont été adaptées de celles indiquées par William Cox — qu'il a lui même adapté des originales fournies par Stuart, sont les suivantes :

a[href^="mailto:"] {
   background: transparent url('img/aemail.gif') right center no-repeat;
   padding-right: 10px;
}

#content a[href^="http:"] {
   background: transparent url('img/aoutside.gif') right center no-repeat;
   padding-right: 10px;
}

#content a[href^="http://franck.paul.free.fr"] {
   background: inherit;
   padding-right: 0px;
}

La première sert pour les adresses email, la deuxième sera utilisée pour tous les liens commençant par http:, la troisième permet d'ignorer les liens internes. C'est tout ce que je peux faire à ce jour pour me conformer à cette bonne pratique.

Notes

[1] J'aimerais trouver une alternative textuelle à l'image, au moins pour les lecteurs d'écrans. Alors si quelqu'un a des idées, qu'il n'hésite pas ! Existe-t-il une technique CSS qui permettrait de compléter l'attribut title avec la mention (lien externe) uniquement pour les liens externes ?

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Ajouter un rétrolien

URL de rétrolien : https://open-time.net/trackback/3068

Haut de page