5.5. Signaler l’ouverture des nouvelles fenêtres

Chaque fois qu’un lien ou un bouton déclenche l’ouverture d’une nouvelle fenêtre dans le navigateur, l’utilisateur doit être prévenu par l’ajout d’une mention du type «  (nouvelle fenêtre)  ».

Soit dans l’attribut aria-label :

<a href="cgv.html" target="_blank" aria-label="Conditions Générales de Vente (nouvelle fenêtre)">
   Conditions Générales de Vente
</a>

Soit via le texte de remplacement d’une icône/image, sous la forme :

Remarque

À noter qu’il est également conforme de passer par l’attribut title :

<a href="cgv.html" target="_blank" title="Conditions Générales de Vente (nouvelle fenêtre)">
   Conditions Générales de Vente
</a>

Aller plus loin

  1. Recommandation d’accessibilité pour la conception fonctionnelle et graphique associée : Signaler chaque lien et bouton déclenchant l’ouverture d’une nouvelle fenêtre.
  2. Sur le blog Atalan : Automatiser le signalement des liens s’ouvrant dans une nouvelle fenêtre.
  3. Autre technique pour signaler l’ouverture des nouvelles fenêtres : Infobulles simulées en ARIA.

4 commentaires

  • Par claire bizingre, le 15 septembre 2015 à 15h24.

    Bonjour,

    Si le lien contient un grand bloc d’informations, avec des div, span, p, img…souvent pour avoir une grande zone cliquable, et si le lien s’ouvre dans une nouvelle fenêtre, il va falloir reprendre tout le contenu du bloc, le mettre dans le title et rajouter (nouvelle fenêtre).

    Est-ce que dans ce cas on peut penser à une autre solution (car infobulle très grande) ou est-ce que pour le moment on en reste là ?

    Répondre

    • Par Johan Ramon, le 21 septembre 2015 à 16h12.

      Bonjour Claire,

      Merci pour ton commentaire.

      Effectivement, dans le cas de figure que tu exposes, l’affichage d’une infobulle avec beaucoup de contenu peut ne pas être visuellement souhaité.

      Ici, nous recommanderions l’utilisation de l’attribut aria-label (qui ne présente pas d’infobulle) plutôt que l’attribut title. Technique que nous proposons d’ailleurs déjà dans l’encart « Remarque » de la fiche.

      Johan

      Répondre

  • Par Sébastien Delorme, le 29 avril 2016 à 14h37.

    Fiche mise à jour le 29 avril 2016 :

    • Suppression de l’exemple de mention « Nouvelle fenêtre » directement dans l’intitulé du lien.
    • Nouvel exemple avec aria-label.
    • Passage de l’exemple avec title dans un encart Remarque.

    Répondre

  • Par Johan Ramon, le 4 octobre 2016 à 17h00.

    Inversion de la recommandation concernant le texte de remplacement d’une icône/image avec celle de l’attribut aria-label (le 04/10/2016).

    Répondre

Ajouter un commentaire

Les champs avec astérisque (*) sont obligatoires.

Haut de page