Gestionnaire d’événements Javascript
 |
|
Imprimer 
|
Envoyer 
|
Partager
|
Avertissement : la version originale de ce document est Creating Accessible JavaScript : JavaScript Event Handlers. Cette traduction en français a été réalisée par Ideose dans le cadre d’un accord entre WebAIM et Ideose.
Note : consulter la page Documents sur l’accessibilité du Web pour obtenir la liste de tous les documents déjà traduits. D’autres ressources sur l’accessibilité du Web sont également listées dans le Portail du numérique accessible.
Sommaire
- Page 1 : Introduction
- Vous êtes sur la Page 2 : Gestionnaire d’événements Javascript
- Page 3 : Les autres problématiques de l’accessibilité du Javascript
- Page 4 : Les alternatives au Javascript
- Page 5 : Synthèse pour le Javascript accessible
Vue d’ensemble
Le JavaScript peut être exécuté en utilisant la balise <script> et un gestionnaire d’événements. La balise <script> peut contenir directement le code JavaScript :
ou peut ouvrir un fichier JavaScript externe (.js) :
La balise <script> est automatiquement exécutée quand la page est chargée. Les contenus et les fonctionnalités du script exécutés dans la balise <script> doivent être directement accessibles ou une alternative accessible des contenus et des fonctionnalités Javascript doit être donnée.
Les gestionnaires d’événements sont ajoutés au code HTML existant et sont déclenchés par un événement navigateur ou utilisateur – par exemple lorsque la page se charge, quand l’utilisateur clique sur la souris ou à un horaire précis. Certains gestionnaires d’événements sont tributaires de l’utilisation d’une souris ou du clavier. Ces gestionnaires d’événements sont dits dépendants d’un périphérique. D’autres gestionnaires d’événements sont indépendants des périphériques et sont déclenchés à la fois par la souris et le clavier ou par d’autres moyens. L’utilisation de gestionnaires d’événements dépendants d’un périphérique peut entraîner l’inaccessibilité du contenu à une personne qui n’est pas en mesure d’utiliser le périphérique requis pour ce gestionnaire d’événements.
onMouseOver et onMouseOut
Le gestionnaire d’événements onMouseOver est déclenché quand le curseur de la souris est placé sur un élément. Comme son nom l’indique, onMouseOver nécessite l’utilisation d’une souris. Il est donc dépendant d’un périphérque et peut entraîner des problèmes d’accessibilité. onMouseOver et son compagnon onMouseOut peuvent être utilisés tant que tous les contenus et les fonctionnalités importantes sont également disponibles sans utiliser la souris.
Exemple 1
Placez votre souris sur l’image ci-dessous pour voir un exemple d’utilisation de onMouseOver. Quand la souris est placée au-dessus de l’image du mot « Accessibility« , une autre image s’affiche à sa place, qui présente la définition du mot « Accessibility« .
Important
Tous les exemples sur cette page sont codés en XHTML 1.0 Strict. XHTML demande des noms de gestionnaires d’événements en minuscules (par exemple, onmouseover à la place de onMouseOver).
Essayez de naviguer vers l’image en utilisant le clavier. Notez alors que les informations supplémentaires ne s’affichent pas. L’alternative textuelle pour l’image donne le contenu affiché par le gestionnaire d’événements onMouseOver. Cela permet aux utilisateurs qui savent comment accéder à cette alternative textuelle d’obtenir le contenu, mais cela ne constitue pas une véritable solution universelle.
Problèmes
Dans cet exemple, le contenu supplémentaire est affiché en utilisant onMouseOver. Ce contenu ne peut être affiché que si l’utilisateur utilise une souris pour survoler l’image. Il n’est pas disponible à quelqu’un qui utilise le clavier pour naviguer dans la page. Le gestionnaire d’événements onMouseOver ne peut pas être directement rendu accessible aux utilisateurs du clavier. Par conséquent, une alternative doit être donnée.
Solution partielle
Placez le contenu supplémentaire dans l’alternative textuelle de l’image. Cela devrait fonctionner pour les utilisateurs de lecteurs d’écran – le lecteur d’écran lira l’alternative textuelle. Mais pour les utilisateurs voyants dont le navigateur ne peut pas afficher l’alternative textuelle des images ou qui ne savent pas déplacer la souris au-dessus de l’image, ce n’est pas une alternative viable. Pourtant, l’image doit avoir une alternative textuelle équivalente.
Solutions
En plus de onMouseOver et onMouseOut, utiliser onFocus et onBlur. Ces actions seront déclenchées si le clavier est utilisé pour naviguer vers et à partir du lien qui englobe la balise <img>.
Vous devez toujours donner une alternative textuelle pour les personnes aveugles et onFocus et onBlur permettront aux utilisateurs qui naviguent au clavier de voir le changement d’image.
Exemple 2
Un usage commun de onMouseOver et de onMouseOut concerne les menus de navigation déroulants (fly-out or drop-down navigation systems). Placez votre souris sur les éléments du menu ci-dessous pour voir un exemple de menus déroulants. Quand la souris est placée sur les principaux éléments de menu (onMouseOver), des sous-menus apparaissent en-dessous. Quand la souris est retirée (onMouseOut), les sous-menus disparaissent.
|
Produits
|
Services
|
Support
|
Problèmes
Le contenu et la fonctionnalité additionnelle sont affichés en utilisant onMouseOver. Dans cet exemple, le JavaScript contrôle l’affichage des CSS des éléments dans la page. Les sous-menus ne sont visibles que si la souris est placée sur le menu principal. Ces sous-menus peuvent ne pas être disponibles si le Javascript est désactivé et peuvent ne pas être lus par les technologies d’assistance.
Solutions
Quand c’est possible, utiliser d’autres gestionnaires d’événements qui permettent la navigation au clavier. Quand cela n’est pas possible, vous devez fournir un procédé redondant de la navigation. Cela peut se faire de deux façons. Tout d’abord, donnez des liens dans le contenu de la page pour les pages affichées dans le sous-menu de navigation. Cela est souvent fait via une liste de liens classés en bas de la page. L’inconvénient de ce procédé est que la navigation est uniquement accessible en bas de la page, ce qui peut être non intuitif pour la plupart des utilisateurs.
Une deuxième méthode pour donner un procédé redondant de la navigation est d’ajouter un lien href à chacun des éléments principaux du menu de navigation (par exemples, Produits, Services, etc) vers une page Web qui contient les sous-menus. Si vous sélectionnez les liens Produits, Services ou Support au-dessus, vous verrez un exemple de liens redondants de navigation.
Exemple
Bien que cette méthode demande la création d’une page supplémentaire et introduit une étape supplémentaire, elle donne aussi un accès total aux éléments du menu de navigation d’une manière intuitive. Cette méthode permet également aux sous-menus d’être accessibles quand le Javascript est désactivé.
onFocus et onBlur
Ces gestionnaires d’événements sont généralement utilisés avec des éléments de formulaire tels que les champs texte, les boutons radio et les boutons de validation. onFocus est déclenché quand le curseur est placé sur un champ spécifique de formulaire. onBlur se déclenche lorsque le curseur quitte un élément de formulaire.
Ces deux gestionnaires d’événements sont indépendants des périphériques, ce qui signifie qu’ils peuvent être exécutés avec la souris, le clavier ou d’autres technologies d’assistance. Les actions qui sont exécutées suite à ces gestionnaires d’événements doivent être analysées pour déterminer si elles causent des problèmes d’accessibilité. Généralement, ces gestionnaires d’événements ne sont pas la cause de problèmes d’accessibilité sauf s’ils modifient le comportement par défaut du navigateur Web ou s’ils interférent avec la navigation au clavier dans la page Web.
Exemple 1
Problèmes
Aucun. Bien que la fenêtre d’alerte puisse distraire l’attention et être inutile, elle n’introduit pas de graves problèmes d’accessibilité. L’alerte est déclenchée lorsque le focus est mis dans le champ texte en utilisant le clavier ou la souris. Les alertes JavaScript sont lues par les lecteurs d’écran les plus modernes et peuvent être utilisées pour augmenter la facilité d’utilisation de formulaires en fournissant en temps utile des retours, des instructions ou des informations. Cependant, si le Javascript est désactivé, alors l’alerte ne sera disponible pour personne.
Exemple 2
Problèmes
Bien que l’événement onblur soit indépendant du périphérique, il est utilisé pour exécuter du code JavaScript qui rend la page difficile à naviguer. Le texte maintient le focus jusqu’à ce que la réponse correcte soit donnée. Ce changement de comportement par défaut du navigateur peut créer de la confusion et des limitations. De plus, les commentaires sont affichés dans une autre partie de la page. Comme le focus est retenu dans le champ de texte, un lecteur d’écran ne sera pas en mesure d’accéder aux commentaires de texte ou à toute autre partie de la page jusqu’à ce que la bonne réponse soit entrée.
Solution
Ne forcez pas le focus à rester dans le champ texte. Permettez à l’utilisateur de naviguer dans l’ensemble de la page. Affichez les commentaires sur une autre page, après que le formulaire ait été soumis (cela se fait sans JavaScript) ou afficher les commentaires avec une alerte JavaScript (nécessite JavaScript). Essayez d’entrer une lettre dans le champ texte ci-dessus pour voir un message d’alerte JavaScript.
onClick et onDblClick
Le gestionnaire d’événement onClick est déclenché lorsque la souris est cliquée au-dessus d’un élément HTML. onClick est un gestionnaire d’événements dépendant de la souris. Cependant, si le gestionnaire d’événements onClick est utilisé avec des liens hypertextes ou des contrôles de formulaire, alors la plupart des navigateurs et des technologies d’assistance déclenchent onClick si la touche Entrée est enfoncée quand le lien ou le contrôle a le focus. Dans ces cas, onClick est un gestionnaire d’événements indépendant du périphérique. Cependant, la touche Entrée ne déclenchera pas l’événement onClick si elle est utilisée avec des éléments qui ne sont pas des liens, ni des contrôles, tels que le texte ou les cellules de tableau.
Le gestionnaire d’événements onDblClick est associé avec le double clique de la souris sur un élément HTML. Il n’y a pas d’indépendance de périphérique ou d’équivalent clavier au onDblClick, qui devrait donc être évité.
Exemple 1
Le lien suivant déclenche une boîte de confirmation JavaScript qui vous permet de confirmer si vous voulez voir la page ou pas.
Regardez cette exemple onClick
Problèmes
Aucun. La boîte de confirmation est lue par tous les lecteurs d’écran principaux. En utilisant le paramètre JavaScript return, l’action du lien est annulée si l’utilisateur sélectionne dans la boîte de confirmation. Si JavaScript est désactivé, le lien fonctionnera normalement.
Exemple 2
Le texte suivant est conçu pour apparaître comme un lien (en bleu et souligné), mais c’est un texte associé à un événement onClick qui ouvre un autre document dans la fenêtre du navigateur. Utilisez la souris pour cliquer sur le texte ci-après.
Regardez un autre exemple de onClick
Problèmes
Parce que le texte n’est pas un lien hypertexte ou un champ de contrôle, il ne reçoit pas le focus lors de la navigation avec le clavier. Parce qu’il ne reçoit pas le focus, le clavier ne peut pas être utilisé pour activer l’événement onClick.
Solution
Utilisez le gestionnaire d’événements onClick sur un lien ou un contrôle de formulaire à la place d’un élément qui ne peut pas être atteint par le clavier.
Exemple 3
Un usage très courant de JavaScript est son utilisation pour valider les informations d’un formulaire. Le formulaire suivant utilise JavaScript pour vous autoriser à confirmer l’information tapée.
Entrez votre nom dans la boîte suivante et pressez alors le bouton .
<p><label for= »yourname »>Nom :</label><input type= »text » id= »yourname » />
<input type= »button » value= »Envoyer » onclick= »validate(); » /></p>
</form>
Problèmes
La confirmation et les boîtes d’alerte qui sont déclenchées par l’événement onClick sont accessibles aux navigateurs et aux technologies d’assistance qui ont le JavaScript activé. La validation des informations du formulaire avec un script côté serveur et l’affichage des commentaires sur une autre page Web vous permettent de contourner tous les problèmes qui peuvent se produire dans le code JavaScript et qui permet la validation du formulaire si le Javascript est désactivé. Si le JavaScript est utilisé pour valider le formulaire, assurez-vous que tous les éléments du formulaire et toutes les fonctionnalités peuvent être complétées à l’aide du clavier. Parce que le gestionnaire onClick est utilisé avec un élément de formulaire, il est activé en utilisant à la fois la souris et le clavier.
Remarque
Parce que la plupart des navigateurs enverront les données du formulaire quand la touche Entrée est enfoncée, le gestionnaire d’événements onsubmit a été ajouté à la balise <form> pour veiller à ce que les données du formulaire soient envoyées si l’utilisateur n’appuie pas sur le bouton mais sur le bouton Entrée quand le focus est dans le champ de formulaire. Il faut noter aussi que le label est demandé pour le champ texte.
Exemple 4
Cet exemple valide aussi les données du formulaire, mais le retour est affiché dans une autre place dans la page.
Combien d’éléments y-a-t-il dans une douzaine ? Entrez le montant dans la boîte ci-dessous et pressez alors bouton .
<p class= »invis » id= »answercorrect »>Correct. Il y a 12 éléments dans une douzaine.</p>
<p class= »invis » id= »answerwrong »>Incorrect. Il y a 12 éléments dans une douzaine.</p>
<p><label for= »answerbox »>Entrez la réponse :</label>
<input type= »text » id= »answerbox » />
<input type= »submit » onclick= »checkAnswer2() » value= »Vérifier » />
</p>
</form>
Problèmes
Les commentaires ne sont pas présentés d’une manière accessible à des technologies d’assistance. Dans cet exemple, le JavaScript modifie les paramètres du style d’affichage pour les éléments de la page afin de les rendre visibles ou invisibles sur la base des réponses. L’utilisateur de lecteur d’écran ne sera pas au courant que du contenu supplémentaire est apparu soudainement dans la page.
Solutions
- Valider les données du formulaire avec un script côté serveur et les commentaires sur une autre page.
- Donner les commentaires d’une manière qui soit accessible comme une boîte d’alerte JavaScript ou un autre élément de formulaire.
onChange et onSelect
Le gestionnaire d’événements onChange est déclenché quand un élément de formulaire est sélectionné et changé (par exemple, si un bouton radio est initialement sélectionné ou quand le texte change dans un champ texte). Le gestionnaire d’événements onSelect est traité quand le texte est sélectionné dans un champ texte ou dans une zone de texte. Bien que ces événements soient indépendants des périphériques et peuvent être activés en utilisant la souris, le clavier ou un autre périphérique, les actions qui sont exécutées comme résultats de ces gestionnaires d’événements doivent être analysées afin de déterminer si elles créent des problèmes d’accessibilité.
Exemple onChange
Le menu déroulant suivant est utilisé comme menu de navigation. En sélectionnant un élément dans la liste, le Javascript ouvre automatiquement la page sépcifiée dans la navigateur.
Remarque
Dans certains navigateurs, vous pouvez avoir à appuyer sur la touche Entrée ou cliquer sur un élément du menu pour activer le gestionnaire d’événements onchange. Cliquer sur le bouton du navigateur pour revenir à cette page.
<!–
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value; }
//–>
</script>
<form action= »page.htm » onsubmit= »return false; »>
<p><label for= »selectPage »>Go to:</label>
<select name= »selectName » onchange= »goto_URL(this.form.selectName) »>
<option value= »">Select a page:</option>
<option value= »page.htm »>Page 1</option>
<option value= »page.htm »>Page 2</option>
<option value= »page.htm »>Page 3</option>
</select></p>
</form>
Problèmes
Le code JavaScript amène le navigateur à accéder à une nouvelle page à l’aide de onChange ou quand l’utilisateur sélectionne un élément de la liste. Si l’utilisateur final utilise un clavier, le gestionnaire d’événements onChange est exécuté pour chaque élément dans la liste. Il est impossible pour l’utilisateur de sélectionner directement le dernier élément de la liste puisque chaque élément précédent dans la liste va déclencher le changement de page. La seule façon pour l’utilisateur de sélectionner le dernier élément du menu est en accédant à la page pour le premier élément dans la liste, puis d’appuyer sur le bouton , puis de naviguer vers le deuxième point, puis d’appuyer sur le bouton , et ainsi de suite jusqu’à atteindre le dernier élément du menu.
Solutions
Plutôt que d’utiliser le gestionnaire d’événement onChange, permettez à l’utilisateur de sélectionner l’élément à partir d’une liste, puis de sélectionner un bouton ou soumettre le formulaire pour activer le script. Quand un script côté serveur est utilisé pour traiter les données d’un formulaire et pour rediriger le navigateur en conséquence, il n’y a pas besoin de JavaScript. Le code suivant montre une méthode pour solutionner le problème onChange.
Choisissez une page à l’aide du menu déroulant puis cliquez sur le bouton . Cliquez sur le bouton de retour du navigateur pour revenir à cette page.
<p><label for= »selectPage2″>Go to:</label>
<select name= »selectPage2″ id= »selectPage2″>
<option value= »">Select a page:</option>
<option value= »page.htm »>Page 1</option>
<option value= »page.htm »>Page 2</option>
<option value= »page.htm »>Page 3</option>
</select>
<input type= »button » value= »Go! » onclick= »goto_URL(this.form.selectPage2); » />
</p>
</form>
Utiliser des gestionnaire d’événements indépendants des périphériques
Comme mentionné précédemment, plusieurs gestionnaires d’événements sont indépendants des périphériques y compris onFocus, onBlur, onSelect, onChange et onClick (quand onClick est utilisé avec un lien ou des éléments de formulaire). Quand c’est possible, utilisez des gestionnaires d’événements indépendants des périphériques. D’autres gestionnaires d’événements sont dépendants des périphériques, ce qui signifie qu’ils s’appuient entièrement sur un certain type d’entrée. Par exemple, onMouseOver, onMouseOut et onDblClick s’appuient sur l’utilisation d’une souris. Il existe aussi des gestionnaires d’événements qui sont dépendants du clavier (onKeyDown, onKeyUp, etc.). De nombreux gestionnaires d’événements dépendants de périphériques peuvent être utilisés ensemble pour permettre l’activation du JavaScript à la fois par la souris et le clavier. Par exemple, les deux onMouseOver et onFocus (ainsi que onMouseOut et onBlur) peuvent être utilisés pour l’activation d’un script à la fois au clavier et à la souris. Utiliser plusieurs gestionnaires d’événements dépendants de périphériques comme une méthode pour assurer l’indépendance aux périphériques demande un grand nombre de tests dans les différents navigateurs et avec différentes technologies d’assistance pour vérifier que l’accessibilité est totale.
Liens commerciaux
WebAIM est une initiative de :
Copyright 1999-2009 WebAIM
S'abonner au blog Ideose