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 directement dans l’intitulé :

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

Soit dans 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>

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 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>

Aller plus loin

  1. Recommandation d’accessibilité pour la conception fonctionnelle et graphique associée : 4.2. Signaler chaque lien et bouton déclenchant l’ouverture d’une nouvelle fenêtre.
  2. Sur le blog Atalan : <div> dans <a> et VoiceOver (iOS).
  3. Autre technique pour signaler l’ouverture des nouvelles fenêtres : Infobulles simulées en ARIA.

2 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

Ajouter un commentaire

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

Haut de page