Signaler les liens externes est une bonne pratique [1] car elle renseigne l’internaute sur le lien qu’il s’apprête à cliquer. Mais comment faire cela correctement ?
Il existe plusieurs façons de signaler les liens externes (qu’ils ouvrent une nouvelle fenêtre ou pas [2]). La plus simple — et certainement la meilleure, car aussi accessible qu’efficace — est d’ajouter une mention textuelle explicite dans le lien. Mais c’est affreusement verbeux et je préfère l’ajout d’un picto, qui apporte l’information de façon plus discrète et synthétique.
Puisqu’aucune n’est parfaitement satisfaisante, voici trois méthodes pour ajouter un tel picto.
Choisissez un picto en flèche sortante
Il n’existe pas de pictogramme standard pour signaler un lien pointant vers un site externe. Évitez cependant les mappemondes poussiéreuses des années 90 et autres pictos fantaisistes et incompréhensibles et conformez-vous simplement à l’usage : la flèche inclinée à 45° vers le coin supérieur droit, sortant ou pas d’un petit rectangle symbolisant l’écran, est très fréquemment utilisée et assez explicite [3]. Ce picto, ici appelé external.gif, doit être de petites dimensions : de 9 à 12 pixels de hauteur.
Premier souci : comment repérer les liens externes ?
En CSS, il suffit d’utiliser un sélecteur par attribut, a[href^="http://"], qui concerne les liens dont l’attribut « href » commence par « http:// », ce qui est caractéristique des liens externes (à condition que vos liens internes soit bien relatifs et non absolus, c’est-à-dire qu’ils ne cheminent pas depuis la racine).
Évidemment, cela ne fonctionne pas dans les anciens navigateurs (dont Internet Explorer 6 et inférieurs). Si vraiment l’on veut s’embêter pour ceux-là, il faut ajouter un sélecteur spécifique sur chaque lien externe, par exemple class="external" pour pouvoir les sélectionner en CSS : a.external... Si c’est fastidieux à faire à la main, notez que plusieurs CMS génèrent cela de façon automatique.
Méthode 1 : mettre un picto en background CSS
Ajouter un picto en background est ce que je fais le plus souvent [4]. C’est simple :
L’inconvénient est que le résultat n’est pas toujours satisfaisant dans certains navigateurs, notamment sous Safari et surtout Internet Explorer (toutes versions confondues) où le picto disparaît parfois, en particulier quand le lien court sur deux lignes... Pour éviter cela, il m’arrive d’annuler le style CSS dans IE, en ajoutant deux lignes de hacks : * html et + html, mais, bouh, que c’est laid !
Méthode 2 : ajouter l’info en content après le lien
Une autre approche CSS consiste à ajouter proprement l’information en content après le lien, comme ceci :
ou, moins verbeux, avec un picto synonyme :
C’est un peu compliqué à gérer dès lors que l’on utilise la même méthode pour distinguer les autres types de liens (mailto, PDF et autres téléchargements) et pour afficher le hreflang... très vite, ça fait un sacré méli-mélo !
Notez aussi que ce CSS n’est pas compris des navigateurs plus anciens, dont Internet Explorer, toutes versions confondues.
Méthode 3 : un picto en img avec alt !
On pourrait aussi procéder en JavaScript, mais c’est tout aussi insatisfaisant, car CSS ou JavaScript ne sont que des surcouches qui ne sont pas disponibles sur tous les agents utilisateurs (dont IE) [5]. La solution la plus accessible est une mention textuelle explicite dans le lien, comme ceci :
ou un picto dûment doté d’un alt, placé dans la page HTML, à l’intérieur du lien, comme ceci :
C’est évidemment trop laborieux à mettre en œuvre à la main pour chaque lien et cela réclamerait un traitement automatisé, que l’on programmera de préférence côté serveur, si le site est produit dynamiquement, sinon (moins satisfaisant) côté client, avec JavaScript.
Vos commentaires
# Le 8 août 2009 à 12:05, par Valéry
Intéressant article comme souvent, on trouve une foultitude de conseils utiles sur ton site.
J’utilise la Méthode 1 sur taurillon.org à l’aide des classes ajoutées par SPIP, lesquelles permettent de distinguer liens externes et liens internes (lesquels utilisent des raccourcis typographiques spécifiques) mais aussi les liens vers Wikipedia, ce qui m’a permis d’ajouter également le célèbre W en picto. Les voici sur le premier paragraphe de cet article. Naturellement, l’abondance de liens peut gêner la lecture.
Toutefois sur la plupart des sites que je réalise, j’utilise assez peu cette technique. Je préfère en effet distinguer clairement le contenu de ma page et les liens externes afin de ne pas multiplier les liens dans le texte. Les liens sont placés dans une section spécifique sous l’article. Un peu ce que tu fait en plaçant les liens en notes.
# Le 25 novembre 2009 à 04:54, par premium pharmaceuticals
Toutefois sur la plupart des sites que je réalise, j’utilise assez peu cette technique. Je préfère en effet distinguer clairement le contenu de ma page et les liens externes afin de ne pas multiplier les liens dans le texte. Les liens sont placés dans une section spécifique sous l’article. Un peu ce que tu fait en plaçant les liens en notes.
Un message, un commentaire ?
Suivre les commentaires :
| 