Réflexion personnelle au sujet de l’ouverture de nouvelles fenêtres pour des liens externes.

Ce que j’ai fait :

• lire l’article How to Stop Opening Links in New Windows without Warning(lien externe)
• lire l’article Liens ouvrant une nouvelle fenêtre(lien externe) de Romy Duhem-Verdière.

Ce que j’ai appris

Lien externe = nouvelle fenêtre

En tant que développeurs.euses, nous avons tous eu à ajouter des liens sur les sites que nous codons et quasi systématiquement il nous est demandé, dans le cas de liens externes, de faire en sorte que ces liens s’ouvrent dans une nouvelle fenêtre ou un nouvel onglet. Ceci peut être aisément réalisé grâce à l’ajout de l’attribut target="_blank" sur la balise de lien. Par exemple :

<a href="page.html" target="_blank">Lien</a>.

Les raisons généralement invoquées pour justifier ce choix sont :

• “je veux garder mes utilisateurs”
• “les utilisateurs sont habitués à ce comportement”
• “tout le monde le fait”, d’ailleurs Google lui même fait cela lorsque l’on fait une recherche d’image et que l’on veut accéder à l’image source.
• “je préfère ce mode de navigation”

Quelle conséquences ?

A ce stade, il est de notre devoir de professionnels et professionnelles du web d’argumenter contre ce choix, d’abord en rejetant les raisons précédemment invoquées :

“Je veux garder mes utilisateurs”

On ne le dira jamais assez mais ce sont les contenus qui donnent de la vraie valeur ajoutée à votre site(lien externe), et ce sont ces contenus qui donneront aux internautes l’envie de revenir. Si vous comptez uniquement sur les liens ouverts dans de nouvelles pages pour garder vos internautes c’est qu’il faut donc s’interroger sur la pertinence et l’utilité de vos contenus.

D’autre part, forcer le comportement naturel du navigateur pour imposer ce choix à l’internaute revient à le priver de sa liberté de choisir. L’abus de ce type de pratique qui vise à “piéger” l’internaute pour le garder à tout prix peut avoir un effet contre productif et lui déplaire au point de ne plus avoir envie de revenir sur votre site (lire à ce sujet l’article de Bellami Pourquoi ouvrir un lien dans une nouvelle fenêtre ?(lien externe)).

Enfin, ouvrir une nouvelle fenêtre revient à rompre l’historique de navigation et rend l’utilisation du bouton “Retour” impossible. L’internaute se retrouve alors à devoir chercher votre site parmi tous ses onglets quand un simple clic sur le bouton “Retour” lui permettrait d’y revenir facilement.

“Les utilisateurs sont habitués à ce comportement”

Non, tous les utilisateurs et utilisatrices du web n’ont pas pris cette habitude, ils ou elles peuvent même se sentir perdus à l’apparition de nouvelles fenêtres ou onglets qu’ils ou elles n’ont pas sollicités. A titre d’exemple, je donne des cours d’informatique débutant et j’ai vu à plusieurs reprises mes élèves cliquer frénétiquement sur un lien ouvert dans un nouvel onglet mais qu’ils n’avaient pas remarqué. Les utilisateurs ayant des troubles de l’attention peuvent également être désorientés et se sentir perdus, voire angoissés, face à de multiples fenêtres ouvertes sans action de leur part.

Tout le monde n’est pas naturellement à l’aise avec le web et tout le monde n’utilise pas quotidiennement internet : 23% des français ne sont pas à l’aise avec le numérique et parmi eux 7% trouve que la navigation est difficile (source : Conférence “Exclusion numérique et société « digitalisée », les enjeux pour le design d’interface et de service”(lien externe) de Véronique Lapierre).

“Tout le monde le fait”

Ce n’est pas parce qu’une mauvaise habitude est prise qu’il faut l’imiter. Pendant longtemps, l’habitude était de structurer des pages web entières avec des tableaux pour des raisons de commodité (certes Flexbox et Grid étaient encore loin) alors qu’ils n’étaient nullement adaptés à ce type de besoin. Ce n’est pas parce que tout le monde fait quelque chose que c’est une bonne pratique.

“Je préfère ce mode de navigation”

Vous n’êtes pas tous les internautes et vos préférences ne sont pas celles des autres. Nous avons chacun notre propre façon d’utiliser le web. Derrière notre écran et le site que nous avons codé se cache une infinité d’utilisateurs et utilisatrices : des personnes non familières du web, des personnes âgés, des personnes en situation de handicap, des internautes utilisant uniquement leur téléphone portable… Par exemple, les utilisateurs naviguant à l’aide de leur clavier et notamment de la touche tabulation devront effectuer des manipulations supplémentaires pour fermer et revenir à la fenêtre d’origine. Préjuger des modes de navigation des internautes en se basant sur sa seule expérience revient à faire abstraction de leur diversité.

Quelles solutions ?

Cela étant dit, quelles solutions adopter au moment d’intégrer ces fameux liens externes sur votre site ?

Laisser le choix

Laisser vos utilisateurs choisir, donnez leur la possibilité de naviguer comme ils le souhaitent. Un imple clic droit permet de choisir si le nouveau lien doit apparaître dans la même fenêtre, dans un nouvel onglet ou dans une nouvelle fenêtre. Si vous respectez leur choix, vos internautes seront moins frustrés.

Prévenir à minima

Si à ce stade vous n’avez pas réussi à convaincre vos collègues que forcer l’ouverture d’une nouvelle fenêtre était une mauvaise idée, voici les solutions à adopter pour prévenir l’utilisateur.

Prévenir en toute lettre dans l’intitulé du lien de l’ouverture d’une nouvelle fenêtre. Il s’agit de la solution la plus simple à mettre en oeuvre et la plus accessible. Par exemple :

<a href="/course.html" target="_blank">S'inscrire à une course (nouvelle fenêtre)</a>

Ajouter une mention du type “nouvelle fenêtre” dans un attribut aria-label. Par exemple :

<a href="conference.html" target="_blank" aria-label="Diaporama de la conférence (nouvelle fenêtre)">
   Diaporama de la conférence
</a>

Il est également conforme d’utiliser l’attribut title, néanmoins comme nous l’avons vu dans un précédent article sur les liens accessibles, sa restitution et son interprétation étant limitées il est conseillé de l’utiliser en dernier recours.

Accompagner le lien d’un pictogramme, complété par une alternative textuelle. Par exemple :

<a href="/course.html" target="_blank">
   S'inscrire à une course
   <img src="picto.png" alt="(nouvelle fenêtre)" />
</a>

Pour le choix de l’icône, je vous conseille de jeter un oeil à cet article Removing the external link icon from GOV.UK(lien externe). L’icône de lien externe est en effet souvent confondue avec l’icône de lien s’ouvrant dans une nouvelle fenêtre et peut donc porter à confusion. L’utilisation d’un pictogramme seul pour signaler l’ouverture d’une nouvelle fenêtre n’est donc pas nécessairement compris par les internautes.

Conclusion

Pour ma part, j’ai fait le choix sur ce site de ne pas provoquer l’ouverture de nouvelle fenêtre. Un pictogramme accompagné d’une alternative textuelle prévient l’internaute qu’il s’apprête à consulter un lien externe et c’est à lui de décider de quelle manière il souhaite le consulter.

Aller plus loin

Il est aussi possible de signaler les nouvelles fenêtre par la création d’infobulles simulées en ARIA (voir à ce sujet la notice AcceDe Web(lien externe))