Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. Fiches AccessiWeb
   • 1) Images
   • 2) Cadres
   • 3) Couleurs
   • 4) Multimédia
   • 5) Tableaux
   • 6) Liens
   • 7) Code exécutable
   • 8) Eléments obligatoires
   • 9) Structuration de l'information
   • 10) Présentation de l'information
   • 11) Formulaires
   • 12) Navigation
   • 13) Consultation
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

Critère 7.3 : Chaque code exécutable est-il contrôlable au moins par le clavier et la souris ?

revenir en haut de la page

Carte d'identité du critère 7.3 [niveau AccessiWeb : Argent]

revenir en haut de la page

Comprendre

Comprendre le critère

Tous les codes exécutables doivent être contrôlables au moins par le clavier et par la souris.

Bénéfices pour les utilisateurs

• 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 s'agit des personnes souffrant d'un handicap moteur qui limite 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és, c'est donner accès à l'information.

Valeur ajoutée pour le site

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

revenir en haut de la page

Comment évaluer

Note : de manière générale, il est conseillé de faire l'évaluation d'un critère via l'analyse de son code source. Ce procédé d'évaluation par le code source est détaillé ci-après quand il est possible : procédé d'évaluation en 3 étapes via le ou les tests associés au critère. Les procédés d'évaluation par différents outils sont donnés en complément de l'évaluation par le code source.

Par le code source

1. Sélectionner le(s) élément(s) à tester :
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <a href="page.html" onmousedown="Action_Javascript_ou_Fonction()" onkeydown="Action_Javascript_ou_Fonction()">Lien</a>) :
     • balise script avec l'attribut type="text/..."
     • balise script avec l'attribut language="..."
     • balise object
     • balise applet
     • attribut onmousedown avec attribut onkeydown
     • attribut onmouseup avec attribut onkeyup
     • attribut onclick avec attribut onkeypress
     • attribut onmouseover avec attribut onfocus
     • attribut onmouseout avec attribut onblur
   • Identifier dans un navigateur graphique toutes les fonctionnalités générées par un code exécutable.
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 7.3.a [Argent] : Pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet est-elle atteignable au moins par le clavier et la souris ?
   • Test 7.3.b [Argent] : Pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet est-elle activable au moins par le clavier et la souris ?
   • Test 7.3.c [Argent] : Pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet sans alternative textuelle est-elle explicite visuellement ?
   • Test 7.3.d [Argent] : Pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet a-t-elle si nécessaire une alternative textuelle ?
   • Test 7.3.e [Argent] : Pour chaque code exécutable, pour chaque fonctionnalité générée par la balise script, object ou applet ayant une alternative textuelle, cette alternative est-elle pertinente ?
   
   
3. Valider le critère : le critère est validé si vous répondez oui à tous les tests applicables précédents.

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 d'outils Accessibilité du Web pour Internet Explorer (version 2.0 beta en français) :

• Pour le test 7.3.a [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des Applets / Scripts [nouvelle fenêtre]", pour identifier la présence de balises script et applet dans la page.
  3. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des fichiers multimédia [nouvelle fenêtre]" pour identifier la présence de balises object dans la page.
  4. Vérifier que pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet est atteignable au moins par le clavier et la souris.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.b [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des Applets / Scripts [nouvelle fenêtre]", pour identifier la présence de balises script et applet dans la page.
  3. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des fichiers multimédia [nouvelle fenêtre]" pour identifier la présence de balises object dans la page.
  4. Vérifier que pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet est activable au moins par le clavier et la souris.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.c [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des Applets / Scripts [nouvelle fenêtre]", pour identifier la présence de balises script et applet dans la page.
  3. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des fichiers multimédia [nouvelle fenêtre]" pour identifier la présence de balises object dans la page.
  4. Vérifier que pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet sans alternative textuelle est explicite visuellement.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.d [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des Applets / Scripts [nouvelle fenêtre]", pour identifier la présence de balises script et applet dans la page.
  3. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des fichiers multimédia [nouvelle fenêtre]" pour identifier la présence de balises object dans la page.
  4. Vérifier que pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet a si nécessaire une alternative textuelle.
  5. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.e [Argent] :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des Applets / Scripts [nouvelle fenêtre]", pour identifier la présence de balises script et applet dans la page.
  3. Dans le menu "Informations" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Liste des fichiers multimédia [nouvelle fenêtre]" pour identifier la présence de balises object dans la page.
  4. Vérifier que pour chaque code exécutable, pour chaque fonctionnalité générée par la balise script, object ou applet ayant une alternative textuelle, cette alternative est pertinente.
  5. Si c'est le cas, le test est validé.

Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.1.4 en français) :

• Pour le test 7.3.a [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir le JavaScript" pour détecter la présence de balises script dans la page.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur les mots object (ctrl + f) puis applet (ctrl + f), détecter la présence de balises object et applet dans la page.
  6. Vérifier que pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet est atteignable au moins par le clavier et la souris.
  7. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.b [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir le JavaScript" pour détecter la présence de balises script dans la page.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur les mots object (ctrl + f) puis applet (ctrl + f), détecter la présence de balises object et applet dans la page.
  6. Vérifier que pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet est activable au moins par le clavier et la souris.
  7. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.c [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir le JavaScript" pour détecter la présence de balises script dans la page.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur les mots object (ctrl + f) puis applet (ctrl + f), détecter la présence de balises object et applet dans la page.
  6. Vérifier que pour chaque code exécutable, chaque fonctionnalité générée par la balise script, object ou applet sans alternative textuelle est explicite visuellement.
  7. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.d [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir le JavaScript" pour détecter la présence de balises script dans la page.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur les mots object (ctrl + f) puis applet (ctrl + f), détecter la présence de balises object et applet dans la page.
  6. Vérifier que chaque fonctionnalité générée par la balise script, object ou applet a si nécessaire une alternative.
  7. Si c'est le cas, le test est validé.
  
  
• Pour le test 7.3.e [Argent] :
  1. Sous Firefox, ouvrir la page à analyser.
  2. Dans le menu "Information" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir le JavaScript" pour détecter la présence de balises script dans la page.
  3. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
  4. Une nouvelle fenêtre apparaît contenant le code source de la page.
  5. En faisant une recherche sur les mots object (ctrl + f) puis applet (ctrl + f), détecter la présence de balises object et applet dans la page.
  6. Vérifier que pour chaque fonctionnalité générée par la balise script, object ou applet ayant une alternative, cette alternative est pertinente.
  7. Si c'est le cas, le test est validé.

revenir en haut de la page

Comment mettre en oeuvre

Avertissement : les informations du paragraphe "Comment mettre en oeuvre" sont données à titre indicatif. Les contenus des sous-paragraphes Implémentation et Exemple de bonne pratique ne présentent pas tous les codes d'implémentation.

Qui est concerné ?

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

Exemple d'un attribut onmouseover sur un lien :

<a href="actualites.htm" onmouseover="afficher();return false;">Afficher les actualités</a>

Dans cet exemple, l'onglet "Actualités" ne peut s'ouvrir qu'avec l'aide de la souris.

Exemple de bonne pratique

A partir de l'exemple précédent :

<a href="actualites.htm" onmouseover="afficher()" onfocus="afficher()"; return false;>Afficher les actualités</a>

L'onglet "Actualités" peut s'ouvrir à la fois par l'intermédiaire de la souris et du clavier grâce à l'ajout de l'attribut onfocus en plus du seul l'attribut onmouseover.

revenir en haut de la page

Illustrations

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 12.4) : Directly accessible scripts
• opera.com tutorial : Using Opera without a mouse
• WebAIM : Create accessible forms

revenir au sommaire de la fiche

revenir en haut de la page

---

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.