Guide AccessiWeb

Accueil
Mode d'emploi
Structure d'une fiche
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
Glossaire
Aide à l'évaluation
Référentiel AccessiWeb
Tables de correspondance
Moteur de recherche
Références
Remerciements
Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Formulaires > Critère 11.8

Critère 11.8 : Dans chaque formulaire, chaque bouton est-il contrôlable au moins par le clavier et la souris ?

Sommaire de la fiche :

Carte d'identité
Comprendre

Comment évaluer
Comment mettre en oeuvre

Illustrations
Références

revenir en haut de la page

Carte d'identité du critère 11.8 [niveau AccessiWeb : Bronze]

Test(s) AccessiWeb permettant de vérifier le critère 11.8

Note : le(s) test(s) suivant(s) sont issu(s) de AccessiWeb v1.1 [Déployé].

Test 11.8.a [Bronze] : Dans chaque formulaire, chaque bouton est-il atteignable au moins par le clavier et la souris ?
Test 11.8.b [Bronze] : Dans chaque formulaire, chaque bouton est-il activable au moins par le clavier et la souris ?
Test 11.8.c [Bronze] : Dans chaque formulaire, chaque bouton a-t-il si nécessaire une alternative textuelle ?
Test 11.8.d [Bronze] : Dans chaque formulaire, pour chaque bouton ayant une alternative textuelle, cette alternative est-elle pertinente ?

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

Référentiel AccessiWeb 1.0 (19/12/2003) [version utilisée dans le Référentiel Accessibilité ADAE 2004] : 7.2 [Bronze]
WCAG 1.0 (05/05/1999) : 6.4 [P2], 8.1 [P2], 9.2 [P2], 9.3 [P2]
UWEM 1.0 (05/07/2006) : 1.1_HTML_01 [P1], 1.1_HTML_03 [P1], 6.4_HTML_01 [P2], 6.4_HTML_02 [P2], 6.4_external_01 [P2], 8.1_HTML_01 [P2], 8.1_external_01 [P2], 9.2_external_01 [P2], 9.3_HTML_01 [P2]
WCAG 2.0 (11/12/2008) : 2.1.1 [A], 2.1.2 [A], 2.1.3 [AAA]
mobileOK 1.0 (02/11/2006) : pas de correspondance.
RGAA : pas de correspondance (aucune version datée du RGAA n'est disponible en ligne à la date de publication de ce guide).

revenir en haut de la page

Comprendre

Comprendre le critère

Toutes les boutons d'un formulaire doivent être activables 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 boutons 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 à tous les boutons d'un site, il faut prévoir plusieurs moyens de les activer.
Bénéfice 2 :
Des boutons qui ne sont prévus 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 boutons, c'est donner accès à l'information, quel que soit le périphérique utilisé.

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

Sélectionner le(s) élément(s) à tester : Identifier dans un navigateur graphique tous les formulaires.
Appliquer le(s) test(s) suivant(s) :
- Test 11.8.a [Bronze] : Dans chaque formulaire, chaque bouton est-il atteignable au moins par le clavier et la souris ?
- Test 11.8.b [Bronze] : Dans chaque formulaire, chaque bouton est-il activable au moins par le clavier et la souris ?
- Test 11.8.c [Bronze] : Dans chaque formulaire, chaque bouton a-t-il si nécessaire une alternative textuelle ?
- Test 11.8.d [Bronze] : Dans chaque formulaire, pour chaque bouton ayant une alternative textuelle, cette alternative est-elle pertinente ?
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 11.8.a [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
3. Détecter la présence de boutons.
4. Vérifier que dans chaque formulaire, chaque bouton est atteignable au moins par le clavier et la souris.
5. Si c'est le cas, le test est validé.
Pour le test 11.8.b [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
3. Détecter la présence de boutons.
4. Vérifier que dans chaque formulaire, chaque bouton est activable au moins par le clavier et la souris.
5. Si c'est le cas, le test est validé.
Pour le test 11.8.c [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
3. Détecter la présence de boutons.
4. Vérifier que dans chaque formulaire, chaque bouton a si nécessaire une alternative textuelle.
5. Si c'est le cas, le test est validé.
Pour le test 11.8.d [Bronze] :
1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
3. Détecter la présence de boutons.
4. Vérifier que dans chaque formulaire, pour chaque bouton 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 11.8.a [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Form." de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les détails du formulaire".
3. Des informations s'affichent à côté de chaque formulaire présent dans la page.
4. Détecter la présence de boutons.
5. Vérifier que dans chaque formulaire, chaque bouton est atteignable au moins par le clavier et la souris.
6. Si c'est le cas, le test est validé.
Pour le test 11.8.b [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Form." de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les détails du formulaire".
3. Des informations s'affichent à côté de chaque formulaire présent dans la page.
4. Détecter la présence de boutons.
5. Vérifier que dans chaque formulaire, chaque bouton est activable au moins par le clavier et la souris.
6. Si c'est le cas, le test est validé.
Pour le test 11.8.c [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Form." de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les détails du formulaire".
3. Des informations s'affichent à côté de chaque formulaire présent dans la page.
4. Détecter la présence de boutons.
5. Vérifier que dans chaque formulaire, chaque bouton a si nécessaire une alternative textuelle.
6. Si c'est le cas, le test est validé.
Pour le test 11.8.d [Bronze] :
1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Form." de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Afficher les détails du formulaire".
3. Des informations s'affichent à côté de chaque formulaire présent dans la page.
4. Détecter la présence de boutons.
5. Vérifier que dans chaque formulaire, pour chaque bouton ayant une alternative textuelle, cette alternative est pertinente.
6. 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 est concerné par la mise en oeuvre de ce critère.

Implémentation

Utiliser les éléments servant à créer des boutons : les balises input et button.

Exemple de mauvaise pratique

Dans un formulaire, le bouton de validation est créé à partir d'une image sur laquelle un évènement de type onclick a été ajouté pour effectuer une action de soumission du formulaire.

Dans cet exemple, l'image ne prend pas le focus et ne peut donc pas être atteignable/activable par le clavier.

Exemple de bonne pratique

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

Dans cet exemple, l'image a été remplacée par un bouton de formulaire qui reçoit le focus et qui est donc atteignable/activable à la fois par le clavier et la souris.

revenir en haut de la page

Illustrations

Il n'y a pas d'illustration pour cette fiche.

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