Faire des pop-up accessibles

Tutoriels HTML/CSS

La méthode n’est pas récente mais il me semble utile de la divulger à nouveau car encore trop de sites utilisent mal les pop-up. Une pop-up n’est pas une fonctionnalité dépréciée par l’accessibilité bien au contraire et elle s’avère très pratique lorsqu’elle est bien utilisée.

Publié il y a déjà trop longtemps…

Inutile de paraphraser l’excellent article intitulé « Créer des pop-up intelligentes » de Fabrice Bonny sur OpenWeb datant de Mai 2003, je n’en fais qu’un timide résumé.

Un lien JavaScript vers une page ne permet pas à celle-ci d’être totalement accessible. En effet, le JavaScript est loin d’être activé sur toutes les machines des internautes. Ainsi, une pop-up n’est pas accessible si l’on ne peut l’atteindre que par une ouverture JavaScript.

Le principe est donc de proposer deux alternatives :

Un lien JavaScript si le JavaScript est activé.
Un lien XHTML si le JavaScript n’est pas activé.

Voici donc ~~l’ancienne~~ la mauvaise et la ~~nouvelle~~ bonne méthode :

Mauvaise méthode

[html] <a href="/wp-content/images/tutoriels-xhtml-css/faire-des-popup-accessibles/javascript:window.open('page.html', 'nom', ''); void(0);">Ma page</a>

Bonne méthode

[html] <a href="/wp-content/images/tutoriels-xhtml-css/faire-des-popup-accessibles/page.html" onclick="javascript:window.open(this.href, 'nom', ''); return false;">Ma page</a>

Je ne saurais trop vous conseiller de lire l’article très explicite de Fabrice Bonny à ce sujet.

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Cypher [@THaCK]

Depuis la nouvelle version de l’ xHTML, je croyais que les popup ou les "target" dans les pages pour ouvrir des nouvelles fenêtres n’étaient plus conformes ? C’est pô vrai ?
Shemu

Effectivement, les "target" ne sont pas valides. Les ouvertures des pop-ups étant du Javascript, cela n’a rien à voir avec le XHTML. Les pop-ups sont mal appréciées lorsqu’elle sont mal utilisées. Ici, ce sont des pop-up utiles, déclanchées par un clic utilisateur et accessibles même si le Javascript est désactivé.
Toolbox

Pour être encore plus correcte, valide du coté ECMAScript (Javascript si vous préférez) il faudrait écrire :
<a href="page.html" onclick="window.open(this.href, ‘nom’, »); return false;">Ma page</a>
En effet le "javascript:" n’a rien à faire ici sauf dans le href.
TipiAK

Un article très intéressant. C’est exactement ce que je cherchais.

Un très bon site, sérieux et pratique : félicitations!
moamatt

bonne méthode, mais j’ai un peu de mal à saisir la nuance avec le classique target="_blank"… Je sais que cet attribut est déprécié en xhtml mais le résultat n’est il pas le même ?

Les commentaires sont clos.