Prévenir l’utilisateur de l’ouverture d’une nouvelle fenêtre

Cible : tout le monde, et en particulier les personnes déficientes visuelles, cognitives ou ayant un déficit d’attention.
Quand : dès la phase de conception et lors du développement.

Description :

Prévenir l’utilisateur de l’ouverture de toute nouvelle fenêtre en l’indiquant dans l’intitulé du lien. En cas d’impossibilité avérée, utiliser un attribut title avec l'ensemble de l'information nécessaire (exemple : "Acheter le Nokia 7510 (nouvelle fenêtre)") et compléter l'intitulé par, au choix :

  • l'utilisation d'une icône (image avec un alt indiquant l’ouverture d’une nouvelle fenêtre ou juste « (nouvelle fenêtre) »).
  • un morceau de texte caché en masquage accessible via CSS.
  • un attribut aria-label ou aria-labelledby reprenant l'intégralité du contenu du title (cf. les attributs ARIA qui peuvent vous sauver).

Exemple :

Exemple d’icône pouvant indiquer l’ouverture d’une nouvelle fenêtre.
capture d’écran d’un lien accompagné d’une icône indiquant l’ouverture d’une nouvelle fenêtre

À vérifier : Pour tout lien ouvrant une nouvelle fenêtre ou un nouvel onglet, une mention du type « (nouvelle fenêtre) » est présente dans l’intitulé du lien, ou la mention « (nouvelle fenêtre) » est indiquée à l'utilisateur via le lecteur d'écran et via la présence d'une info-bulle sur le lien en question.

Objectif utilisateur : Éviter l’ouverture inattendue de fenêtre, car cela peut gêner, perturber ou désorienter l’utilisateur. En particulier, pour des personnes en mobilité, utilisant des synthèses vocales ou présentant des déficiences cognitives.

Exemple valide :
Pour un lien pointant à l’extérieur du site et ouvrant une nouvelle fenêtre, l’intitulé du lien texte « Accéder au site orange.com (nouvelle fenêtre) ». Pour une image-lien, un attribut alt="consulter les conditions générales d’utilisation (nouvelle fenêtre)".

Référence WCAG :