Accessibilité, laissez le visiteur choisir comment il va ouvrir un lien

03/11/2007

Difficile de trouver un titre parlant pour l'astuce que je veux vous proposer aujourd'hui !

Tout d'abord, pour appliquer cette astuce il vous faudra installer la librairie jQuery sur votre site (si ce n'est pas déjà fait). Mais même si vous ne comptez pas l'utilisez, il peut être intéressant que vous lisiez au moins le 1er paragraphe 😉

Accessibilité des liens ?

Quand on parle d'accessibilité, on parle surtout des "bonnes pratiques" à mettre en œuvre lors de la création de tout site. Il y en a des centaines, certaines plus pertinentes que d'autres, mais ici nous allons nous attarder sur l'accessibilité des liens se trouvant dans vos pages.

Tout sites internet contient des liens, c'est l'essence même du web. Mais de quel manière doivent réagir ces liens ? Un lien externe ou un lien vers une image doit-il se comporter comme un lien interne ?

Et bien en fait, il n'y à qu'une seule règle importante pour les liens, ils ne doivent jamais s'ouvrir dans une nouvelle page (ou onglet) sans l'autorisation du visiteur ! Ce n'est d'ailleurs pas pour rien que l'attribut "_blank" n'est plus conforme aux nouvelles normes du W3C. Edit: finalement il semblerait que se soit plus dans un soucis de présentation du code que l'attribut _blank fut retiré ... (merci MagicYoyo)

L'explication est simple, les règles d'accessibilités disent que l'utilisateur doit pouvoir garder le contrôle des liens, et de ce fait, si vous forcer l'ouverture dans une nouvelle fenêtre, l'utilisateur n'as plus de choix possible. Alors qu'en laissant le lien s'ouvrir naturellement, l'utilisateur peut décider de l'ouvrir dans une nouvelle fenêtre, ou pas (via le menu contextuel, le clic sur la molette ou encore un raccourci clavier) !

Pas cool ça ! Car votre site pointe souvent vers divers liens, dont une bonne partie sur des sites extérieurs .. et manque de chance, la plupart de vos visiteurs n'utilisent jamais le menu contextuel (peut-être ignorent ils cette fonction), du coup vous prenez le risque qu'ils ne fassent pas marche arrière !

Quelle est la solution ?

Attention, je ne prétend pas que c'est la meilleure solution, mais ça reste un bon compromis.

On va simplement laisser le choix aux visiteurs en ajoutant un lien alternatif après chaque lien. C'est ce qui est en pratique sur ce site, regardez avec cet exemple de lien ...

Vous voyez ? Une petite icône se trouve derrière le lien, cette icône pointe sur la même adresse que le lien qui la précède, sauf qu'il s'ouvrira dans une nouvelle fenêtre !

Bien évidement il serait trop fastidieux de dupliquer tous vos liens manuellement, et c'est là qu'intervient jQuery

Mise en place de la solution

Comme d'habitude, on commence par inclure la librairie jQuery dans la page (si ce n'est pas déjà fait) entre les balises HTML <head> et </head>

Et ensuite nous allons placer la fonction qui permet de rajouter le lien alternatif automatiquement.

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après le plugin.

Cas 1: On applique l'effet à tous les liens

$(document).ready(function(){
$("a").each(function(i){$(this).after(" <a href=\""+$(this).attr("href")+"\" onclick=\"window.open(this.href); return false;\" style=\"border: none;\"><img src=\"external.gif\" alt=\"\" title=\"Ouvrir ce lien dans une nouvelle fenetre\" /></a>");});
});

Et ... c'est tout ! Mais ce n'est pas vraiment pertinent, car là absolument tous les liens sont ciblés, et il peut être judicieux de placer des restrictions.

Cas 2: On applique l'effet à tous les liens, sauf aux liens "image"

$(document).ready(function(){
$("a").each(function(i){$(this).not(":has(img)").after(" <a href=\""+$(this).attr("href")+"\" onclick=\"window.open(this.href); return false;\" style=\"border: none;\"><img src=\"external.gif\" alt=\"\" title=\"Ouvrir ce lien dans une nouvelle fenetre\" /></a>");});
});

Oui, trouver la petite icône à coté d'une image peut casser votre mise en page par exemple, d'où cette exception.
Donc on rajoute juste .not(":has(img)") après $(this)

Cas 3: On applique l'effet à tous les liens, sauf aux liens "image" et aux liens internes

$(document).ready(function(){
$("a[@href^=\"http\"]").each(function(i){$(this).not("[@href*=\""+document.domain+"\"]").not(":has(img)").after(" <a href=\""+$(this).attr("href")+"\" onclick=\"window.open(this.href); return false;\" style=\"border: none;\"><img src=\"external.gif\" alt=\"\" title=\"Ouvrir ce lien dans une nouvelle fenetre\" /></a>");});
});

Personnellement c'est le choix que j'ai fait, car si le visiteur clique sur un lien interne, il reste sur le site, donc pas la peine d'ouvrir une autre fenêtre. Et celà à le double avantage que maintenant le visiteur a un repère visuel sur les liens pointant à l'extérieur !
Donc on rajoute juste .not("[@href*='"+document.domain+"']") après $(this) ET a[@href^='http'] au lieu de a

Cette restriction dit que "On applique l'effet que si l'adresse commence par http et que si elle ne contient pas le nom de domaine du site"

Voilà, libre à vous de restreindre plus ou moins l'effet. N'oubliez pas de bien préciser l'url de image !

-----

Articles relatifs

Pingback: Accessibilité, laissez le visiteur choisir comment il va ouvrir un lien « FireFox()
Michel

Et que fais-je avec les personnes agées (60% de la population de mon village et Canton est retraitée: 65 ans et+), niveau BEPC qui galèrent pour comprendre le fonctionnement d’un PC et d’Internet ?
Et bien j’utilise _blank, car ils sont strictement incapables de revenir à la fenêtre précédente.
La théorie n’est forcément bonne dans tous les cas
k-ny

Hello Michel,

Oui effectivement dans certains cas de figure, il sera préférable d’orienter soi-même le visiteur.

Par contre, si tu veux garder une bonne validité xhtml, tu peux éventuellement remplacer tes attributs « _blank » par l’équivalent en javascript:

onclick=’window.open(this.href); return false;’

😉
Fanou

J’avais déjà remarqué tes liens .. L’idée n’est pas mauvaise pour rester conforme au W3C !
Cependant, je suis plutôt un utilisateurs (absolument pas confirmé) de mootools, as-tu quelque chose du même style pour cette librairie ?

Merci 😉

PS : merci pour ce blog qui pour une fois ne sent pas le commercial à plein nez 😉
k-ny

Hello Fanou

Alors pour Mootools ça doit être faisable effectivement, si j’ai un peu de temps j’y jetterais un oeil. Mais à première vue, je me pencherais sur la fonction clone:

http://docs.mootools.net/Native/Element.js#Element.clone

😉

Ps: de rien, mais en fait ce blog est super rempli de pubs, elles sont juste subliminales 😀
Fardeen

Bonne idée !

Je vais l ‘integrer a mon site.

@fanou, regarde les sources de mon blog , la function init_lien_externe, qu’il faut tweeker un peu pour obtenir la meme chose que dans cette article.
Fardeen

J’oublais de preciser que sur mon site c’est avec Mootools 🙂
Clips video et paroles

Cette méthode ne recquiert-elle pas trop de performances en plus?
Qu’en est-il à grand échelle?
k-ny

@Fardeen

Si tu nous laisse le bout de code avec une tite explication, je le rajouterais dans le billet (avec un ti backlink 😉 )

@Clips video et paroles

Tout est relatif, mais c’est assez light, en plus jQuery est vraiment une librairie rapide à l’exécution. Après rien ne vaut la mise en pratique pour s’en assurer (mais je pense pas que ça influe beaucoup) 😉
Meatshake

Merci du tips, je recherchais justement une façon simple de remedier au fort taux de rebond sur mon blog,(presque 75%). Beaucoup de gens en effet ne sont pas tous des avertis du ctrl+clic ou du menu contextuel. J’ai pu le constater lorsque des amis naviguent sur mon site.
De plus je commence à découvrir JQuery au taff et je dois avouer que c’est assez fantastique.
Bonne continuation, ton blog est vraiment nickel. 😉
k-ny

Héhé, oui jQuery c’est le pied !

Et pour ton taux de rebond, le plugin Landing Site pour wordpress fait des miracle 😉
David

Merci pour ce petit tuto de derrière les fagots. Je cherchais depuis un moment une solution dans le genre. Je vais mettre en place cette solution sur mon blog incessamment sous peu.
clb56

Salut,

C’est effectivement astucieux, néanmoins en terme de qualité web beaucoup de problèmes demeurent.

Tout d’abord par rapport à certains usages. Le rendu de ton lien + icone est très proche de celui que l’on trouve souvent sur wikipédia par exemple.
Sauf que dans leur cas texte et icône constituent un même lien et que ce qui est indiqué (pour autant que quelque chose soit indiqué d’ailleurs) c’est seulement que c’est un lien avec pointage externe au site et non ouverture d’une nouvelle fenêtre.

Tu imagines à quel point tout cela peut porter à confusion.

Dans ton cas et au minimun les 2 liens ne devraient pas être adjacents mais séparés par un caractère.

D’autant plus que dans ton exemple rien n’est vraiment dit explicitement (sauf dans le contexte de ton topo évidemment) ni que le lien pointe en externe ni que l’icône pointe vers le même document ni que cela ouvrira une nouvelle fenêtre.

Je sais bien que tu utilises title, mais le title en navigation clavier est inaccessible.

Si le lien icône est généré en javascript alors ce serait bien de générer aussi un texte pour renseigner le alt de l’image parce que là si je désactive les images ça ne le fait pas trop bien.

Par contre pour l’histoire _blank et validation xhtml ou html, inutile de rentrer dans des circonvolutions javascript. Mettre une dtd transitional qui est justement faite pour ce genre de situation.

++
k-ny

Hello clb56

Alors effectivement pour l’icône je plaide coupable, je l’ai d’ailleurs précisé dans les commentaires, Si possible se faire une icône personnalisée.

Pour la séparation par un caractère, je pense qu’en plein milieu d’une phrase ça peut poser problème, on pourrait aussi à la limite mettre l’icône entre parenthèses, au risque d’alourdir la lecture.

Effectivement, mettre un tooltip en javascript serait plus parlant, le tooltip s’afficherait soit au survol, soit au focus, à méditer.

Pour le alt, personnellement je préfère le laisser vide, car l’icône n’est qu’un « luxe » (pas indispensable) de navigation, donc si l’image ne s’affiche pas, et bien pas de lien … ce qui est préférable plutôt que du texte alternatif qui pourrait semer la confusion et/ou rendre illisible le texte.

Et pour la dtd transitional, oui ok, c’est une solution, mais va expliquer ça à un client qui veut à tous prix un site valide avec les normes les plus strict (sont bornés des fois). De plus, si les dtd évoluent, c’est dans un soucis de normalisation, autant en tenir compte et faire un effort 🙂
atropos

est ce que c’est valide ?

comment écrire external.gif pour un chemin du genre ../external.gif?

Merci
G.crofte

Bonjour,
J’ai juste un souci avec cette phrase « Par contre, si tu veux garder une bonne validité xhtml, tu peux éventuellement remplacer tes attributs « _blank » ».
En quoi la validité du document sera atteinte ?
Il suffit de choisir le bon doctype, il y en a un qui permet l’utilisation du target et qui reste valide selon le W3C 😉