Liens sortants ouvrants

Il suffit d’activer ce plugin pour que tous les liens externes du site s’ouvrent dans une nouvelle fenêtre. À éviter, car c’est une mauvaise pratique.

Il suffit d’activer ce plugin pour que tous les liens externes du site s’ouvrent dans une nouvelle fenêtre. À éviter, car c’est une mauvaise pratique. Mais tant qu’à mal faire, cette contrib le fait bien, c’est-à-dire en avertissant l’internaute de ce comportement, améliorant un peu l’accessibilité déplorable des liens ouvrants.

Cette première version du plugin, toujours fonctionnelle en SPIP 2, n’est plus maintenue car remplacée par cette nouvelle version : « Liens explicites ».

Avertissement : ouvrir une nouvelle fenêtre, c’est nul !

N’utilisez ce plugin que sous la contrainte, car forcer l’ouverture des liens dans une nouvelle fenêtre est une mauvaise pratique qui, contrairement à l’idée reçue, incommode les internautes et dégrade le confort d’utilisation de votre site [1]. Il n’y a en effet aucune bonne raison d’utiliser ce plugin qui n’existe que pour répondre à la demande impérieuse de certains commanditaires mal informés [2].

Concrètement, que fait ce plugin ?

Ce plugin vient s’ajouter à la longue liste des contributions à SPIP visant à forcer l’ouverture de liens dans une nouvelle fenêtre. Mais que fait-il de plus, de mieux ?

Première caractéristique, ce plugin ouvre tous les liens externes — et non pas seulement ceux distingués par le sélecteur SPIP spécifique .spip_out —, de façon à ne plus en oublier :

  • Aussitôt activé, ce plugin ouvre TOUS les liens externes (commençant par http://, https://, irc://, ftp, etc.) dans une nouvelle fenêtre, en ajoutant un target="_blank" à ceux-ci, en JavaScript, ce qui a pour double avantage de laisser tranquille les internautes surfant sans JavaScript et de ne pas dégrader le code (X)HTML qui reste strictement valide [3].
  • Il ajoute à ces liens l’attribut approprié rel="external" [4]
  • et un sélecteur distinctif homonyme class="external" de façon à permettre au webmestre de les cibler.

Seconde caractéristique, ce plugin signale clairement ce comportement :

  • Ce plugin complète l’infobulle des liens externes par une mention textuelle explicite : title="(nouvelle fenêtre)" [*]
  • et les distingue visuellement en les affublant d’un picto consensuel (une flèche inclinée à 45°), en CSS et affiche la langue du site cible lorsqu’elle est indiquée dans l’attribut hreflang [*].
  • Enfin, cerise sur le gâteau, il explicite ces liens à l’impression sur papier en ajoutant automatiquement l’URL du lien externe à la suite de son intitulé [*].

Personnalisations et recommandations

Si besoin, vous personnaliserez en surchargeant la règle CSS a.external { ... } (peut-être avec !important) dans votre feuille de style perso et en remplaçant le picto external.gif par un autre dans votre propre dossier squelettes, selon les règles de surcharge habituelles dans SPIP.

L’ouverture des liens dans une nouvelle fenêtre n’améliore pas l’accessibilité de votre site, bien au contraire. Ce plugin vous évite le pire mais sachez que les techniques qu’il emploie ne sont pas pour autant pleinement satisfaisantes, car CSS ou JavaScript ne sont pas disponibles sur certains agents utilisateurs (dont Internet Explorer). Retenez que pour bien faire, il faut signaler l’ouverture de nouvel par une mention textuelle explicite dans le lien, ou par un picto doté d’un alt, placé dans la page HTML, à l’intérieur du lien [5].

Notes

[1Lu sur CYBERcodeur, Liens et nouvelle fenêtre, Éric Daspet :

« On entend parfois que les nouvelles fenêtres permettent de ne pas perdre l’utilisateur en laissant l’ancienne page visible. En réalité c’est tout le contraire, et si vous voulez faciliter la vie de vos visiteurs, contentez-vous de mettre un titre pertinent à vos pages pour qu’il puisse naviguer correctement dans son historique quand il revient en arrière. »

[2De nombreux articles dénoncent cette mauvaise pratique. Citons celui de SPIP, évidemment, mais aussi le mien : Liens ouvrant une nouvelle fenêtre et Pourquoi ne faut-il pas ouvrir les liens dans une nouvelle fenêtre ?.

[3Notez bien que l’attribut target, introduit en HTML 4, n’existe plus dans les versions strictes du HTML 4.01 et suivantes.

[4Extrait de la spécification HTML 4 du W3C, ici traduite en français : Cet attribut décrit la relation partant du document courant vers l’ancre spécifiée par l’attribut href. La valeur de cet attribut est une liste de types de lien séparés par des espaces..

[*Pas garanti dans IE qui interprète mal les langages permettant cela : l’infobulle dysfonctionne dans certains cas et le CSS n’est pas toujours correctement interprété.

Discussion

6 discussions

  • 1

    re-
    Ok, je comprends maintenant que ces forums sont réservés à des initiés discutant avec des initiés et que toute opinion contraire, surtout venant d’un utilisateur lambda, est mal perçue. Je n’ai pas le sentiment d’avoir insulté qui que ce soit mais ça me désole de voir la tournure que prend la suite de mon message. On va donc s’arrêter là si vous le voulez bien.
    Passez de bonnes fêtes entre vous et continuez à décider ce qui est le mieux pour tout le monde sans que quiconque ne puisse se permettre d’émettre un autre avis.
    Chlore

    • Le forum n’a rien de reservé aux initiés, on vous explique simplement
      1. Pourquoi votre choix prive autrui d’une possibilité.
      2. Pourquoi est-ce que parfois votre formulation peu paraître violente.

      Vous croyez reellement qu’on ne prend pas les avis ? Si vraiment on le faisait pas, ce plugin n’aurait pas été proposé....

    Répondre à ce message

  • 1

    Bonjour,
    Mille excuses : je ne savais pas qu« informaticien » était une insulte (je vous ai dit : je suis « basique » !).
    Rassurez-vous je en suis pas en colère mais je trouve juste qu’il est aussi frustrant pour moi de voir imposer une façon de faire (ouvrir les liens sur la même fenêtre) que pour vous d’envisager une autre façon (les ouvrir dans une nouvelle fenêtre).
    Au vu de vos réponses, je vois que vous comprenez maintenant mon point de vue, même si vous ne le partagez pas, ce qui est compréhensible !
    Bonnes fêtes !... Cool !
    Chlore

    • @Chlore : le problème c’est que dans un cas il y toujours une possibilité d’ouvrir dans une nouvelle fenêtre, alors que dans un autre cas il n’y pas de possibilité de garder dans la même fenêtre. Donc de facto, c’est vous qui imposez votre facon de faire aux autres. On peu regretter que les devellopeur/euses de navigateur ne proposent pas au lancement du navigateur « souhaitez vous ouvrir tous vos liens externes dans un nouvel onglet » mais c’est comme cela.

      Et de facto, vous sous entendiez que tetue (et les « informaticiens » en général,) ne pensait pas aux utilisateur/trice, qu’il/elle s étaient dans leur monde, ce qui est pour le moins erronée, et pour des personnes qui comme tetue ont une éthique de l’accès aux utilisateur/trice est à la limite de l’insulte

    Répondre à ce message

  • 1

    Bonjour tetue,
    l’écrasante majorité des internautes n’est pas une population d’informaticiens mais de gens basiques, comme moi, qui ne connaissent pas forcément le clic droit pour ouvrir le lien dans une nouvelle fenêtre ou qui n’y pensent pas lorsqu’ils cliquent sur un lien externe dans un site. Si ce lien s’ouvre dans la même fenêtre, ils perdent le site d’origine qui avait mis le lien sur sa page et ça, je trouve que ce n’est pas intéressant même si la minorité d’informaticiens dont vous faites partie pense le contraire. C’est pourquoi il serait judicieux de se (re)mettre en question de temps en temps en comprenant que les gens normaux ne raisonnent pas comme des informaticiens qui savent, quand ils le veulent, ouvrir des liens dans une nouvelle fenêtre ou abandonner le site sur lequel ils sont car ils sauront le retrouver quand ils le voudront. Il me semble plus simple de fermer un onglet ouvert avec le site d’origine que de revenir en arrière sur un seul onglet en perdant automatiquement un des sites visités.
    Voilà, c’est mon avis et il doit être aussi respecté car il représente, peut-être, une majorité silencieuse qui n’a pas la possibilité de connaitre internet et l’informatique aussi bien que vous et doit donc subir et appliquer les lois informatiques édictées par les informaticiens experts dont vous faites partie.
    Chlore

    • Vous avez une préférence d’usage, fort bien.

      -  Ce n’est pas une raison pour l’imposer à tous vos internautes, d’autant plus en sachant que cela met certain·es mis en difficulté. À moins que vous ne considériez que les préférences des « gens normaux » prévalent sur les besoins des users handicapés, opinion que je ne saurais partager, j’espère que vous pouvez le comprendre. Bref, votre préférence ne fait pas l’unanimité.
      -  Deuxio, inutile pour exprimer votre avis, de me traiter d’« informaticien » (au cas ou ça ne vous viendrait pas à l’esprit : des excuses seraient bienvenues pour cette insulte).
      -  Tertio, dire merci à qui prend la peine de vous répondre pour partager une astuce adaptée à votre préférence d’usage serait poli.

      Vous avez peut-être de bonnes raisons d’être en colère, mais vous vous trompez de cible. Respirez un coup, tout va bien se passer.

    Répondre à ce message

  • 1

    Bonjour à tous,
    Bon alors moi je ne suis pas une geek mais une personne « normale » qui a une utilisation « normale » d’Internet et, perso, je trouve que c’est plus pratique de conserver sur un onglet le site sur lequel j’étais et qui m’a proposé d’ouvrir un lien vers un autre site, dans un autre onglet.
    Alors même si ça ne plait pas aux informaticiens qui savent toujours où ils sont sur le Net et comment revenir au site où ils étaient, il faut aussi « ouvrir » à des personnes « normales » qui ne pensent pas comme un informaticien et n’utilisent pas Internet comme un informaticien.
    C’est pourquoi j’ai activé le plugin « liens sortants ouvrants » et que je ne trouve pas joli du tout la petite flèche bleue qui se colle à tous les liens pour bien montrer que c’est pas bien... un peu comme une étoile qui stigmatisait une catégorie de population dans des temps que je préfère oublier.
    Voilà.
    C’est juste l’avis d’une personne « normale » plus très jeune, pas très geek mais suffisamment pour animer un site internet sous SPIP.
    Amicalement
    Chlore (acide ou basique, comme vous voulez)

    • Chlore, pour ouvrir un lien dans une nouvelle fenêtre ou onglet quand vous le jugez utile, il vous suffit, à vous, sur votre ordinateur à vous, d’activer la fonctionnalité correspondante de votre navigateur : je ne sais pas ce que vous utilisez, mais souvent ça se fait d’un clic droit sur le lien avec (ou pas, ça dépende de votre ordi) sélection de quelque chose comme « Ouvrir ce lien dans un nouvel onglet ».

      Bref, vous avez le choix.
      D’ouvrir dans une nouvelle fenêtre ou onglet quand ça vous chante.
      D’ouvrir dans la même fenêtre quand ça vous chante.

      Lorsque vous utilisez ce plugin en forçant l’ouverture dans une nouvelle fenêtre ou onglet, vous imposez ce comportement à tous vos internautes.

      Bref, vous les privez de ce choix.
      Or cela gêne certain·es (notamment mal et non-voyants, etc.).

      La bonne pratique est de laisser le choix à chacun et chacune de faire comme il lui convient.

    Répondre à ce message

  • 2
    superyms

    Bonjour, Romy,

    Cette contrib m’intrigue...en effet tu conseilles toi même de ne pas l’utiliser ! lol (je comprends que des spipeurs puisse l’utiliser !)

    Perso, sur certains sites, selon la demande de l’utilisateur, je rajoute juste le code jquery suivant (ceci dit prévenir l’internaute que cest un lien ouvrant est pas mal aussi, tout depend de qui gère le site, y en a qui n’en veulent pas ! ) :

    $(document).ready(function() {
      $("a[@href^=http]").each(
        function(){
                if(this.href.indexOf(location.hostname) == -1) { 
            $(this).attr('target', '_blank');
          }
        }
      )
    });

    Cela fonctionne plutot bien...si cela peut aider ! (ce code ouvrira tous les liens externes du site dans une nouvelle fenêtre)

    Romy à raison, méditerz bien l’utilisation d’un tel procédé ou d’une telle possibilité..l’internaute se perd facilement dans sa navigation !

    @+

    • Bonjour,

      2 remarques pour améliorer le plugin :

      • le titre généré devrait reprendre l’intitulé du lien et ajouter la mention nouvelle fenêtre. Exemple, avec un lien « yahoo » qui pointe qui yahoo.com le title devrait être « yahoo (nouvelle fenêtre) ». En effet, certains lecteur d’écran lisent comme intitulé de lien l’élément le plus long entre le title et l’intitulé réel, de cette manière il n’y aurait pas de souci.
      • si le plugin fonctionne aussi pour les liens externes mis sur des images <a href="http://www.yahoo.com"><img alt="yahoo.com"></a> l’information doit être ajoutée dans le alt de l’image et non dans le title du lien
    • Bonjour !

      Bravo Tétue ! Je sais, pas top pour la bonne pratique, mais parfois, il y a des demandes.... qu’on ne peut contourner.
      Juste un point qui m’embête : la remarque de Goestu juste au dessus, c’est exactement ce que je cherchais à modifier (sur le premier point), en principe, d’après les référentiels d’accessibilité, le title ne doit jamais comporter moins d’info que l’intitulé.
      C’est à ce niveau-ci que ça se joue

              $("a[href*='://']:not([href^="+liens_sortants_site+"])")
                .attr('target',where)
                      .attr('rel','external')
                      .addClass('external')
                      .each(function(){
                              title =  "(nouvelle fenêtre)";
                              if($(this).attr("title")) title = $(this).attr("title") + " (nouvelle fenêtre)";
                              $(this).attr("title",title);
                      });

      Mais je ne vois pas bien comment récupérer l’intitulé du lien en JS, et le réinjecter l’attribut title...
      Romy, t’aurais une idée ?

      ++
      Z

    Répondre à ce message

  • 3

    Bonjour,

    Comment faire en sorte que ce comportement (ouverture nouvelle fenêtre) s’applique aux redirections (articles virtuels) ? Je m’explique : les rédacteurs d’un site A veulent référencer un article publié sur un site B. Il créent un article dans leur site A et renseignent l’adresse http://ww.... de l’article du site B dans le champ « redirection » de spip. Il s’agit donc bien d’une url http://... mais elle ne s’ouvre pas dans une nouvelle fenêtre malgré la présence du plugin...

    merci d’avance pour vos conseils,

    • Je n’utilise plus les articles virtuels et les déconseille, pour ce genre de raison, entre X autres, mais de mémoire il s’agit bien d’un lien interne et non externe (http://...). Où peut-on voir cela ?

    • merci pour ta réponse rapide !
      c’est ici : http://www.metropolitiques.eu (site mis en ligne ce matin...)
      dans la colonne de droite, bloc« articles les plus lus », cf l’article « les apories de la ville durable » qui est un article virtuel qui renvoie vers un autre site - pour le moment pas en target=_blank malheureusement...
      dans le squelette j’utilise un simple #URL_ARTICLE...

    • Oui, c’est bien ce que je craignais : SPIP génère un lien interne, du style a href="toto.html", qui échappe donc à ce plugin qui ne traite que les liens externes.

      Je ne saurais que recommander d’éviter ces « articles virtuels » qui posent d’autres problèmes en étant présentés exactement comme des articles internes (en ressortant par exemple au même niveau dans les résultats de recherche dans le site) et sont extrêmement déroutants pour l’internaute.

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Dernière modification de cette page le 11 juin 2012