Renoir Boulanger Un geek social et Linuxien de nature

Manipulation des liens extérieurs et les popup pour améliorer l’Accessibilité

En rédigeant Accessibilité et les liens externes j’ai réalisé qu’il y aurait trop de matière pour être lue dans un simple billet. Alors j’ai décidé d’aller plus en profondeur et de le documenter. Cet article explique une méthode simple pour transformer tout les liens d’une page qui vont à l’extérieur du site courrant en ajoutant un icône approprié et la … Continued

En rédigeant Accessibilité et les liens externes j’ai réalisé qu’il y aurait trop de matière pour être lue dans un simple billet. Alors j’ai décidé d’aller plus en profondeur et de le documenter.

Cet article explique une méthode simple pour transformer tout les liens d’une page qui vont à l’extérieur du site courrant en ajoutant un icône approprié et la note disant qu’une fenêtre s’ouvrira

 

Les méthodes généralement utilisés

Actuellement, il existe plusieurs manières de faire. Sauf qu’elles demandent souvent de le faire à la main pour chaque lien et ca peut être lourd.

Surtout pour la rédaction qui se fout un peu de faire du html propre

 

Comment faire un pop-up

Voici quelques manières… rien d’extravagant.

  • Méthode target
    <a href="somelink.php" target="_blank">Link text</a>

    Mais le problème c’est que l’attribut target="" est maintenant obselete. Donc on ne devrait pas l’utiliser

  • Méthode href javascript window.open
    <a href="javascript:window.open('http://renoirboulanger.com/','mywindow','width=400,height=200')">Link text</a>

    Fonctionnerait bien. Mais du point de vue SEO et Crawling… on complique la tâche et ne devrait pas etre utilisé car l’attribut href="" est fait pour avoir le URL.
    Elle n’est pas recommandée parceque la balise est altérée de son usage natuel: faire un lien et que l’attribut href dise QUOI lier.

  • Méthode onClick
    <a href="somelink.php" onclick="window.open('http://renoirboulanger.com/','mywindow','width=400,height=200')">Link text</a>

    Est une bonne méthode mais pas facile a expliquer pour l’équipe de rédaction.

Ces méthodes font bel et bien le travail mais certaines d’entre elles (je ne les ai pas toutes listés) sont sémantiquement invalides… et donne un du tagsoup

 

Règles pour les liens extérieurs

  • Une balise html doit être utilisée pour son usage
  • Le markup doit être le plus simple possible pour éviter les erreurs d’entrée de l’édimestre.
  • On ne peut pas utiliser le CSS pour ajouter les icones
    Note: Parceque les Lecteurs d’écran (aveugles) “lisent” le texte et non pas ce qui a été modifié via CSS.
  • On ne peut pas utiliser de Javascript invalide
    Note: Si on y va via le DOM, avec les manipulations valide, ca passe bien: bref on évite innerHTML et on se fie aux Spécifications du DOM

D’autres règles pourraient être mentionnées. Mais le message peut bien se résumer ainsi.

En HTML, on doit utiliser les balises pour l’usage qu’elles sont destinés à faire.

… il ne reste pas tant d’options. La méthode que j’ai élaboré répond a toutes ces conditions.

 

Les autres choses que le lien doit faire

Dans les lignes guides de l’accessibilité du web (et en ergonomie/utilisabilité) on mentionne

Qu’on doit avoir un indice qu’un lien est destiné à ouvrir une page extérieure et/ou un popup

Source: ma mémoire… j’ai pas trouvé de lien référence. Si vous en trouvez, faites moi signe

ça veut donc dire qu’en plus de faire le lien en tant que tel, il faut ajouter une image dans le lien qui va annoncer le popup… Ouf!

 

Ce qu’il faudrait…

En gros, il faudrait, que pour chaque lien…

  • Avertir qu’il y a un lien externe dans un icône image ajouté automatiquement
  • Placer l’icone avec la bonne balise et ne pas utiliser le CSS.
  • Avoir un alt="" pour l’image (icône) car sinon c’est du html invalide en plus qu’il servirait a avertir
  • Que le alt="" soit dans la langue utilisée dans le site
  • Que le lien soit utilisable SANS JAVASCRIPT donc, on oublie le href="javascript..."
    Note: C’est une approche qui veut que l’on puise “dégrader élégamment” le code dans la “pire des situations

 

la Manière idéale

Il s’agit d’une méthode que j’ai élaborée avec un ancien collègue que l’on surnomme (alias) Reynold Kirby pour être valide avec toutes les règles ci-haut mentionnés.

  • Lister tout les liens externes qui commencent par http://;
  • Éliminer de la liste les domaines qu’on ne veut pas qui se fassent transformer;
  • Créer, via le DOM, une image AVEC le bon alt="";
  • Ajouter un attribut rel="popup" pour le handler de popup;
  • Ajouter, finalement, le handler onclick="".

La “pogne”

On va utiliser le onclick="", mais généré automatiquement via Javascript. Car de toute façon il est ridicule de s’interdire d’utiliser javascipt. Dans ce contexte, ce serait donc acceptable. Et toujours mieux que de faire target="_blank" et/ou de demander aux édimestres de faire chaque lien à bras (!!)

Le code

Simplement ajouter ce bout de code Javascript aux autres scripts du site.

var strPopUpWarning = 'Lien sur un site externe qui va ouvrir dans une nouvelle fenetre.';
 
function addImageAtExternalLinks(){
  var anchorList = document.getElementsByTagName('a');
  for(var i=0; i < anchorList.length; i++) {
  /**
    * Remarquez les indexOf()... remplacez renoirboulanger 
    * par votre propre nom de domaine... addthis a été ajouté 
    * au cas ou vous avez un service du genre
    **/ 
    if(anchorList[i].href != '' &&
    anchorList[i].href.indexOf('renoirboulanger') == -1 &&
    anchorList[i].href.indexOf('javascript') == -1 &&
    anchorList[i].href.indexOf('addthis') == -1) {
      var elContainer = anchorList[i];
      var createdEl = document.createElement('img');
      createdEl.alt = strPopUpWarning;
      createdEl.src = '/icones/extlink.gif';
      elContainer.setAttribute('rel','popup');
      elContainer.appendChild(createdEl);
      elContainer.onclick = dopopup;
    }
  }
}
 
/* Ensuite... l'appel */
addImageAtExternalLinks();
 
/**
 * Fonctions pour les popup
 *
 * Permet de crere un popup en faisant un lien
 * <a href="http://www.othersite.com/url/" />text (usage normal)
 * Mais creer des liens popup au besoin selon des specifites que l'on veut. Donc, un
 *  lien comme ceux ci  genereront...)
 *   <a href="http://www.othersite.com/url/" rel="popup"></a>text et aussi
 *   <a href="http://www.othersite.com/url/" rel="popup standard 800 600"></a>text
 *     (un popup de 800x600 avec toolbars)
 *   <a href="http://www.othersite.com/url/" rel="popup console 800 600"></a>text
 *     (un popup de 800x600 mais sans toolbars)
 *   <a href="http://www.othersite.com/url/" rel="popup fullscreen"></a>text (un popup plein ecran)
 *
 * En plus, ce qui a ete ajoute est la possibilite (avec addImageAtExternalLinks();) de scanner toutes les
 * href de la page courrante qui ne sont pas interieurs (ou acceptes) et d'y ajouter une image qui dit que c'est
 * un popup (via le DOM) et qui annonce que ca va ouvrir un site exterieur... bref qui prendrait
 *
 * @author Renoir Boulanger <lunique @renoirboulanger.com>
 * @author Reynold Kirby (alias) <reynold [email protected]>
 **/
function dopopup(e){
  // Source: http://www.accessify.com/features/tutorials/the-perfect-popup/
  //set defaults - if nothing in rel attrib, these will be used
  var t = "standard";
  var w = null;
  var h = null;
 
  //look for parameters
  attribs = this.rel.split(" ");
  if (attribs[1]!=null) {t = attribs[1];}
  if (attribs[2]!=null) {w = attribs[2];}
  if (attribs[3]!=null) {h = attribs[3];}
 
  //call the popup script
  popUpWin(this.href,t,w,h);
 
  //cancel the default link action if pop-up activated
  if (window.event) {
    window.event.returnValue = false;
    window.event.cancelBubble = true;
  } else if (e) {
    e.stopPropagation();
    e.preventDefault();
  }
}
 
function popUpWin(url, type, strWidth, strHeight){
  closeWin();
  //calls function to close pop-up if already open,
  //to ensure it's re-opened every time, retainining focus
  type = type.toLowerCase();
  if (type == "fullscreen"){
    strWidth = screen.availWidth;
    strHeight = screen.availHeight;
  }
  var tools="";
  if (type == "standard")
  tools = "resizable,toolbar=yes,location=yes,scrollbars=yes,menubar=yes,width="+strWidth+",height="+strHeight+",top=0,left=0";
  if (type == "console" || type == "fullscreen")
    tools = "resizable,toolbar=no,location=no,scrollbars=no,width="+strWidth+",height="+strHeight+",left=0,top=0";
  newWindow = window.open(url, 'newWin', tools);
  newWindow.focus();
}
var newWindow = null;
 
function closeWin(){
 
  if (newWindow != null){
    if(!newWindow.closed)
      newWindow.close();
  }
}</reynold></lunique>

Comments

  1. Sébastien Delorme

    Bonjour,

    Ce billet est intéressant, mais possède quelques erreurs et idées reçues que je me permets de corriger.

    Premièrement, l’attribut target n’est pas obsolète. Il est déprécié en XHTML Strict et peut donc être tout à fait utilisé en HTML ou XHTML transitional.

    La question qui se pose alors est pourquoi utiliser une autre méthode si celle-ci fonctionne parfaitement ?

    Si la réponse est : “Parce je code en XHTML Strict”. Ma question serait alors : “Pourquoi alors ouvrir une nouvelle fenêtre ?”.

    Je m’explique. Si l’ouverture d’une nouvelle fenêtre est devenue obsolète en XHTML Strict, ce n’est pas pour trouver une technique alternative, mais pour empêcher l’ouverture forcée de nouvelles fenêtres. L’ouverture d’une nouvelle fenêtre impose un mode de navigation à l’utilisateur, cela va à l’encontre d’une philosophie : “laissez le visiteur libre de sa navigation”. Si vous adhérez à cette philosophie alors, quelle que soit la méthode n’ouvrez pas de nouvelles fenêtre. Si vous n’y adhérez pas (ou votre client après avoir tenté de le convaincre) alors utilisez l’attribut prévu à cet effet : target, en mode HTML ou XHTML transitional.

    C’est l’avis du W3C “If you want to use the target attribute, use XHTML 1.0 transitional.” http://www.w3.org/MarkUp/2004/xhtml-faq#target

    Pourquoi vouloir absolument coder en XHTML Strict ?

    Ensuite, j’ai une petite remarque concernant ta proposition. Tu dis, à raison, “On ne peut pas utiliser le CSS pour ajouter les icônes”. Si effectivement, l’icône est seul porteur d’une information il ne pourra pas être lu par les lecteurs d’écran de personnes aveugles mais ne pourra également pas être vu par les personnes qui utilisent des feuilles de style personnalisées (personnes malvoyantes généralement).

    Il faut donc utiliser une image avec l’attribut alt correctement complété. Seulement, alt=”” ne fournira pas plus d’information qu’une image de fond. Je recommande plutôt d’utiliser alt=”nouvelle fenêtre” ou quelque chose de similaire. La mention “nouvelle fenêtre” sera alors lu par les lecteurs d’écran des utilisateurs.

    Enfin, pour répondre à ta demande, voici quelques liens qui expliquent “Qu‘on doit avoir un indice qu‘un lien est destiné à ouvrir une page extérieure et/ou un popup” :
    – AccessiWeb Critère 13.3 : Dans chaque page Web, pour chaque ouverture de nouvelle fenêtre, l’utilisateur est-il averti ? http://www.accessiweb.org/fr/guide_accessiweb/guide-accessiweb-fiche-13-3.html
    – WCAG 2.0 : un changement de contexte est initié uniquement sur demande de l’utilisateur ou un mécanisme est disponible pour désactiver un tel changement. http://www.w3.org/Translations/WCAG20-fr/#consistent-behavior-no-extreme-changes-context
    (pour information la définition de “changement de contexte” : changements majeurs dans le contenu d’une page Web qui, s’ils sont faits sans que l’utilisateur en soit conscient, peuvent désorienter l’utilisateur… Exemple : l’ouverture de nouvelles fenêtres http://www.w3.org/Translations/WCAG20-fr/#context-changedef )
    – Une technique WCAG 2.0 est plus précise “Using the target attribute to open a new window on user request and indicating this in link text” http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H83

    J’espère ne pas avoir été trop long.
    Je suis ravi d’avoir découvert ce blog que j’ai ajouté à mon agrégateur ;)

    A bientôt.
    Sébastien Delorme

Comments are closed.