Bénéfice 1 :
Les utilisateurs qui ne peuvent se servir que du clavier ou d'un logiciel de reconnaissance vocale pour naviguer, n'auront pas accès aux fonctionnalités activables seulement par l'intermédiaire de la souris, par exemple. Il peut s'agir des personnes souffrant d'un handicap moteur qui limite l'usage des mains, ou de personnes aveugles qui n'ont pas la possibilité d'utiliser la souris. Afin que ces utilisateurs aient accès à toutes les fonctionnalités d'un site, il faut prévoir plusieurs moyens de les activer.
Bénéfice 2 :
Des fonctionnalités qui ne sont prévues que pour un seul périphérique, comme la souris, ne seront pas accessibles via des terminaux type téléphone portable ou ordinateurs de poche. Fournir plusieurs moyens possibles pour activer des fonctionnalité, c'est donner accès à l'information.
Valeur ajoutée pour le site
Bénéfice 1 :
Le fait de prévoir l'usage de plusieurs périphériques pour effectuer des actions permet la portabilité de l'interface sur de multiples plateformes.
A ce titre, les techniques du WAI recommandent l'utilisation de gestionnaires d'événements logiques plutôt que ceux dépendant du matériel.
Contrôler les liens associés à l'attribut onmouseover et vérifier s'il existe une alternative par l'intermédiaire de la balise NOSCRIPT.
Vérifier la présence de l'alternative NOSCRIPT aux menus déroulants (rechercher les divisions associées aux liens "onMouseOver").
Vérifier la présence de l'attribut accesskey dans les liens et les objets de formulaire.
Vérifier la présence de l'alternative NOSCRIPT pour les listes déroulantes.
Par l'utilisation d'outils
Pour une liste complète des outils utilisés pour évaluer l'accessibilité des pages web, et un résumé de leurs principales fonctionnalités, reportez-vous à la page Outils d'aide à l'évaluation.
Evaluer avec la barre AccessiWeb (version 1.0) :
Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "7. Scripts" de la Barre AccessiWeb, activer le critère 7.2.
Toutes les actions de la page générées par un javascript restent activées.
Vérifier que vous pouvez naviguer dans la page sans utiliser la souris par l'intermédiaire du clavier (touche Tabulation).
Puis, faire les tests ci-après sans utiliser la souris (par l'analyse du code source):
Contrôler les liens associés à l'attribut onmouseover et vérifier s'il existe une alternative NOSCRIPT.
Vérifier la présence de l'alternative NOSCRIPT aux menus déroulants (rechercher les divisions associées aux liens "onMouseOver").
Vérifier la présence de l'attribut ACCESSKEY dans les liens et les objets de formulaire.
Vérifier la présence de l'alternative NOSCRIPT pour les listes déroulantes.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Cliquer sur le menu "Options IE", puis sur l'option "activer/désactiver le Javascript".
Faire les tests ci-après sans utiliser la souris:
Contrôler les liens associés à l'attribut onmouseover et vérifier s'il existe une alternative NOSCRIPT.
Vérifier la présence de l'alternative NOSCRIPT aux menus déroulants (rechercher les divisions associées aux liens "onMouseOver").
Vérifier la présence de l'attribut accesskey dans les liens et les objets de formulaire.
Vérifier la présence de l'alternative NOSCRIPT pour les listes déroulantes.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Cliquer sur le menu "Désactiver", puis sur l'option "Désactiver JavaScript".
Faire les tests ci-après sans utiliser la souris :
Contrôler les liens associés à l'attribut onmouseover et vérifier s'il existe une alternative NOSCRIPT.
Vérifier la présence de l'alternative NOSCRIPT aux menus déroulants (rechercher les divisions associées aux liens "onMouseOver").
Vérifier la présence de l'attribut accesskey dans les liens et les objets de formulaire.
Vérifier la présence de l'alternative NOSCRIPT pour les listes déroulantes.
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Ce critère n'est pas évaluable par le lecteur d'écran Jaws.
Le développeur doit veiller au respect de ce critère.
Implémentation
Ce critère concerne principalement les dispositifs de pointage (tels que la souris). Cela signifie que lorsque ce dispositif est déconnecté dans le navigateur, tous les événements liés à la souris sont inopérants. Ces événements sont de deux types :
Le clic direct sur un objet actif
Le survol d'objets par le curseur de la souris
Il n'est pas nécessaire de concevoir une alternative pour le premier type, car la plupart des navigateurs permettent le déclenchement d'un lien par la touche ENTREE.
Pour le second, il faut concevoir une alternative systématique à tout événement correspondant au "onMouseOver" de la souris. Notez que ce problème est identique à celui lié au blocage des scripts (critères 7.1, 13.2). Il faut donc le considérer dans l'ensemble de la problématique de la désactivation des scripts.
L'alternative est basée sur la présence de raccourcis clavier et sur l'usage de la balise NOSCRIPT. Toutefois, il faut prendre en compte le fait que tous les navigateurs ne gèrent pas les raccourcis clavier (les plus courants les gèrent, mais pas forcément de la même façon).
Pour les liens, on associe un raccourci clavier dans la balise A.
Pour les objets de formulaires, on associe un raccourci clavier à chaque objet du formulaire, pour faciliter le déplacement d'un objet à un autre.
La liste déroulante est un cas particulier, car le contenu d'une liste déroulante n'est visible que si on clique sur le bouton de déroulement. L'alternative est donc d'associer à l'objet SELECT une balise NOSCRIPT contenant la liste déroulée sous forme de liens, si la liste est gérée par un script.
Si la liste n'est pas gérée par un script, les navigateurs en mode texte affichent automatiquement le contenu de la liste et la sélection reste donc possible. Par contre, en mode graphique, si la souris est désactivée et que la liste n'est pas gérée par un script (ou créée par un script lors du chargement de la page), aucun événement au clavier ne permet d'ouvrir la liste.
Pour les menus déroulants, l'habitude a été prise de les gérer par l'événement onMouseOver de la souris, cet événement permettant de montrer ou cacher un objet de type DIV. Si la souris est désactivée par l'utilisateur, l'ouverture des sous-menus n'est plus assurée et les liens sont inaccessibles. Comme pour les listes déroulantes, aucun événement clavier ne permet de déclencher l'affichage d'un objet caché autrement que par un script, le scénario le plus courant étant que la souris est désactivée en même temps que les scripts (navigateurs en mode texte). Dans ce cas, il faut intégrer à la page une alternative NOSCRIPT permettant l'accès complet et permanent à un contenu équivalent aux éléments cachés.
Exemple de mauvaise pratique
Dans l'exemple de code qui suit, le lien devrait être associé à un raccourci clavier :
Comme évoqué dans la partie "implémentation", nous étudions quatre situations courantes pour lesquelles les scripts sont généralement utilisés. Il s'agit des liens, des formulaires, des listes déroulantes et des menus.
Les liens
Le raccourci clavier est paramétré dans la balise A, associée au lien :
<a accesskey="L" href="http://www.frenchcoursebyfrenchteacher.com/frenchcourse/presentation.html"> <strong>L</strong>etter to my students</a>
<h1>exemple de liste déroulante actionnée avec du javascript</h1> navigateur : Mozilla/4.0 (compatible; msIE 5.5; Windows 98)<br> <select name="liste" onchange="window.open(this.options[this.selectedindex].value,'_top')"> <option value="http://www.voirplus.net">voirplus.net</option> <option value="http://www.urbilog.fr">urbilog.fr</option> <option value="http://www.yahoo.fr">yahoo.fr</option> </select> <noscript> <br /><br /> liste déroulante inactive<br> Voici les liens se trouvant dans la liste déroulante<br> <a href="http://www.voirplus.net">voirplus.net</a><br> <a href="http:// www.urbilog.fr">urbilog.fr </a><br> <a href="http://www.yahoo.fr">yahoo.fr</a><br> </noscript>
Les menus
<noscript> Menu 1 : où aller?<br /> <a href="alamaison.html" alt="maison">Je rentre à la maison</a><br /> <a href="auboulot.html" alt="travail">Je vais travailler</a><br /> <a href="ouf.html" alt="balade">Je vais me balader</a><br /> Menu 2 : que faire?<br /> <a href="dormir.html" alt="dormir">Je vais dormir, bonsoir tous</a><br /> <a href="courrir.html" alt="courrir">Je vais courrir, salut à tous</a><br /> <a href="reflechir.html" alt="réfléchir">Je vais réfléchir</a><br /> </noscript>
Cette capture d'écran présente une page sur laquelle il est
demandé de cliquer sur les chiffres d'un clavier dessiné à l'écran pour entrer un code
secret. Le clavier est normalement créé au chargement de la page par des fonctions
javascript. Or les javascripts ont été désactivés. Le clavier virtuel ne s'affiche donc pas
et l'utilisateur est dans l'impossibilité d'entrer son code secret.
Fiche 7.1 : Si un script nécessite une alternative pour être accessible, l'information donnée par cette alternative est-elle équivalente à l'information fournie par le script ?
Fiche 11.7 : Le contrôle de saisie des champs du formulaire est-il accessible ?
Fiche 12.5 : Les liens importants du site comportent-ils des raccourcis claviers ?
Fiche 12.6 : Si des raccourcis clavier ont été définis dans le site, sont-ils actifs dans la page ?