Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Tutoriels HTML/CSS

Revigorez vos travaux d’intégration en suivant les préconisations des instances mondiales de l’Internet !

Tutoriels HTML/CSS

Faire des pop-up accessibles

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.

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.


Ce que nos lecteurs en disent :

  1. 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 ?

  2. 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é.

  3. 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.

  4. 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!

  5. 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.