Bénéfice 1 :
Le bouton de validation d'un formulaire représente la dernière étape lors du remplissage d'un formulaire. Si ce bouton n'est pas clairement identifié, l'interaction entre le site et l'utilisateur sera difficile.
Par exemple, lorsque le bouton SUBMIT est une image, il faut veiller à commenter cette image par un texte explicite du type "valider le formulaire".
En effet l'absence d'un commentaire textuel ou une alternative nulle rendra invisible, donc impossible, la validation du formulaire.
Bénéfice 2 :
Un commentaire pertinent aux boutons de formulaire aidera les utilisateurs qui ont une vue linéaire de l'écran, à savoir quelle action sera lancée lorsqu'ils activent ce bouton.
Bénéfice 3 :
Lorsque plusieurs boutons de soumission de formulaire sont présents sur une même page, un commentaire explicite et distinct associé à chacun d'eux, permet de les différencier les uns des autres.
Valeur ajoutée pour le site
Il n'y a pas d'élément d'information pour cette rubrique.
vérifier la présence de l'attribut alt et sa pertinence.
Pour les boutons de type
<input type="submit" />
ou
<input type="button" /> ou <input type="reset" />,
vérifier la présence et la pertinence de l'attribut value.
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 "11. Formulaires" de la Barre AccessiWeb, activer le critère 11.6.
Le code source de la page s'affiche dans une nouvelle fenêtre.
Pour le(s) formulaire(s) de la page dont le bouton SUBMIT est une image, comparer le contenu de l'alternative textuelle avec son contexte dans la page, et déterminer s'il est approprié.
Pour le(s) formulaire(s) de la page dont le bouton SUBMIT n'est pas une image, rechercher dans le code
<input type="submit" /> ou <input type="button" /> ou <input type="reset" />
et vérifier la présence et la pertinence de l'attribut value associé.
Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :
Si le bouton SUBMIT est une image :
Activer l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
Une nouvelle fenêtre s'affiche et liste l'ensemble des éléments graphiques avec leur alternative textuelle associée et l'extrait de code correspondant.
Pour chaque élément graphique représentant un bouton, comparer le contenu de l'alternative textuelle avec son contexte dans la page, et déterminer s'il est approprié.
Si le bouton SUBMIT n'est pas une image :
Repérer les boutons SUBMIT présents dans la page,
A l'aide de la souris, sélectionner le ou les boutons SUBMIT présents,
Cliquer sur le menu "Source", puis sur l'option "Voir le code source de la sélection [Nouvelle fenêtre]".
Pour les boutons de type
<input type="submit" /> ou <input type="button" /> ou <input type="reset" />,
vérifier la présence et la pertinence de l'attribut value.
Evaluer avec la Barre d'Outils Web Developper pour Firefox (version
1.0.2 en français) :
Si le bouton SUBMIT est une image :
Activer l'option "Remplacer les images par l'attribut alt" du menu "Images".
Pour chaque élément graphique représentant un bouton, comparer le contenu de l'alternative textuelle avec son contexte dans la page, et déterminer s'il est approprié.
Si le bouton SUBMIT n'est pas une image :
Repérer les boutons SUBMIT présents dans la page,
Activer l'option "Informations sur les formulaires" du menu "Form.".
Deux tableaux ("Formulaire" et "Eléments") apparaissent pour chaque formulaire présent sur la page.
Pour chaque formulaire, dans le tableau "Eléments", vérifier la présence dans l'en-tête "Type" des éléments de type
<input type="submit" /> ou <input type="button" /> ou <input type="reset" />,
vérifier la présence et la pertinence de l'attribut value dans l'en-tête "Value".
Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :
Aller sur le premier élément du formulaire en appuyant sur la touche F. Puis se déplacer à l’aide de la touche de tabulation jusqu’au(x) bouton(s) de formulaire. Il est aussi possible de se déplacer d'un bouton de formulaire à l'autre à l'aide de la touche U ou de la touche B selon les versions de Jaws.
Ce critère est implémenté par le développeur HTML et le rédacteur.
Implémentation
Veiller à ce que chaque bouton de validation de formulaire ait un commentaire explicite. Ce commentaire doit indiquer quelle opération sera faite lors de la validation d'un formulaire.
Si une page contient plusieurs formulaires, par exemple un formulaire de recherche simple et un formulaire de recherche avancée, il faudra donner un commentaire distinct au bouton de validation de la recherche simple et au bouton de validation de la recherche avancée. Par exemple: valider la "recherche simple", "valider la recherche avancée".
Syntaxe :
Dans le cas d'un bouton de type "submit", c'est la valeur de l'attribut value qui est restituée par défaut par les aides techniques :
<input type="submit" value="commentaire du bouton" />
Dans le cas d'un bouton de validation du type image, c'est l'alternative textuelle associée à cette image qui est restituée :
<input type="image" src="[...]" alt="commentaire du bouton" />
Exemple de mauvaise pratique
Supposons que ce bouton lance une recherche avancée. Dans ce cas, la mention "valider" n'est pas suffisamment explicite :
Cette copie d'écran présente une page de formulaire vue sous
le navigateur textuel Lynx. Le formulaire présente deux champs et un bouton de
validation.
Les intitulés des champs sont "Texte" (champs de type texte) et "Rubrique" (champs de type
case à cocher proposant toutes les rubriques, Agenda,
Evenement et Forum).
L'intitulé du bouton de validation du formulaire est "valider".
Dans ce contexte, on ne comprend pas quel est le traitement réalisé par le
formulaire.
Cette copie d'écran présente un formulaire de recherche vu
sous le navigateur textuel Lynx. Le formulaire présente trois champs et un bouton de
validation.
Les intitulés des champs sont "Texte" (champs de type texte), "Rubrique" (champs de type
case à cocher proposant toutes les rubriques, Agenda, Evenement
et Forum) et "Date" (champs de type texte).
L'intitulé du bouton de validation du formulaire est "Valider la recherche avancee".
Dans ce contexte, on comprend exactement quel est le traitement réalisé par le
formulaire.
Fiche 1.2 : Pour chacune des images de la page ayant une alternative, les textes dans l'attribut ALT sont-ils appropriés par rapport au contexte dans lequel l'image se trouve ?
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 ?