2003-05-12 2003-05-12 Fabrice Bonny fabrice.bonny@openweb.eu.org Cet article est sous licence Creative Commons Attribution-ShareAlike. Comment ouvrir une nouvelle fenêtre sans se priver des internautes qui ne disposent pas de JavaScript ou l'ont désactivé ? debutant expert accessibilite pages_dynamiques

Tout d'abord, faisons un point sur les pop-up, ces fenêtres qui s'ouvrent le plus souvent contre notre volonté. Ce genre de pratique est à bannir dans le cas où l'on ouvre une fenêtre de taille normale, par exemple pour un lien vers un autre site. En effet, on casse la navigation de l'internaute qui ne peut plus utiliser le bouton de retour et on impose ses choix. C'est une excellente façon de faire fuir le visiteur ! Mais il existe des cas où une pop-up rend de nombreux services : afficher une légende, une aide, une photo, etc. Seulement pour ouvrir cette fenêtre, il faut passer par un langage de script qui n'est pas forcément supporté par le navigateur de l'internaute, donc se priver de visiteurs.

Nous allons voir comment faire en sorte de n'oublier personne tout en conservant les pop-up dans notre arsenal. Il suffit tout simplement de n'ouvrir la fenêtre que si JavaScript est activé. Comment, me direz-vous ? Un exemple va nous aider. <a href="page.htm" onclick="window.open('page.htm');"> Explications : le lien classique pointe vers la page de destination via href tandis que le onclick ne se déclenche que si la navigateur comprend JavaScript. Vous pouvez vous épargner de renseigner deux fois la destination en profitant d'un objet très utile en JavaScript : this. Cet objet fait référence à l'objet en cours, c'est-à-dire le lien dans notre cas. On peut donc appeler la destination comme ceci : <a href="page.htm" onclick="window.open(this.href);">

Si vous avez tenté de lancer cet exemple, vous avez sûrement constaté un problème. La nouvelle fenêtre s'ouvre bien mais l'ancienne est aussi dirigée vers la nouvelle page. Que s'est-il passé ? L'événement onclick se déclenche au clic de la souris et effectue l'action entre les guillemets mais l'événement continue sa route : on dit qu'il se propage. Il va donc poursuivre son action et déclencher le lien hypertexte indiqué par href. Pour éviter cela, il suffit d'arrêter la propagation en retournant false. <a href="page.htm" onclick="window.open(this.href); return false;">

Voyons maintenant les options possibles pour la pop-up. La syntaxe est : window.open('URL', 'nom', 'options'); l'URL : il s'agit de l'adresse de la page ; le nom : vous pouvez donner un nom à la fenêtre, par exemple pour éviter les fenêtres multiples. Si vous donnez le nom photo à votre fenêtre, un nouveau clic sur un lien remplace une éventuelle pop-up déjà ouverte, évitant de noyer l'internaute ; les options : height : la hauteur de la fenêtre (exprimée en pixels) ; width : la largeur de la fenêtre (exprimée en pixels) ; top : la position verticale de la fenêtre par rapport au bord supérieur de l'écran (exprimée en pixels) ; left : la position horizontale de la fenêtre par rapport au bord gauche de l'écran (exprimée en pixels) ; toolbar : la présence de la barre d'outils (à l'aide d'un booléen : yes ou no) ; location : la présence de la barre d'adresse (à l'aide d'un booléen : yes ou no) ; menubar : la présence de la barre de menu (à l'aide d'un booléen : yes ou no) ; resizable : la possibilité de redimensionner la fenêtre (à l'aide d'un booléen : yes ou no) ; scrollbars : la présence des scrollbars ou ascenseurs (à l'aide d'un booléen : yes ou no) ; status : la présence de la barre de statut (à l'aide d'un booléen : yes ou no). Le mieux étant bien sûr de laisser le maximum de liberté à l'internaute, par exemple : window.open('/img/logo.png', 'photo', 'height=100, width=200, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); ouvre une pop-up présentant notre logo. Cette fenêtre est dimensionnée, positionnée et elle conserve la barre de menu permettant d'imprimer l'image, tous les internautes ne sachant pas utiliser le clic droit. Elle peut aussi être redimensionnée, donc les « ascenseurs » ont été supprimés, l'image étant réduite. Vous pouvez tester cet exemple. Une erreur courante consiste à ouvrir une fenêtre non redimensionnable et sans barres de défilement. Si la police est réglée différemment, par exemple, il se peut qu'une partie de la page ne soit pas visible. Vous pouvez tester cet exemple.

Nous avons vu qu'accessibilité et ouverture ne signifie pas appauvrissement. Il est parfaitement possible d'ouvrir une pop-up tout en proposant des alternatives. Il suffit pour cela de respecter quelques règles simples pour permettre à chacun d'accéder à l'information selon ses possibilités et ses choix.