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 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
1
<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
1
<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
1
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 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" />text et aussi * <a href="http://www.othersite.com/url/" rel="popup standard 800 600" />text * (un popup de 800x600 avec toolbars) * <a href="http://www.othersite.com/url/" rel="popup console 800 600" />text * (un popup de 800x600 mais sans toolbars) * <a href="http://www.othersite.com/url/" rel="popup fullscreen" />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 .kirby@gmail.com> **/ 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> |
