retour vers le site AccessiWeb

Guide AccessiWeb


vous êtes ici : Accueil > Fiches AccessiWeb : Formulaires > Fiche 11.6

Fiche 11.6 : Dans un formulaire, le commentaire du bouton SUBMIT est-il pertinent ?

Carte d'identité

  • Critère AccessiWeb : 11.6
  • Niveau AccessiWeb : bronze
  • Point(s) de contrôle WCAG 1.0 correspondants (Priorité 1 de WAI) : 1.1

revenir en haut de la page

Comprendre

Bénéfices pour les utilisateurs

Valeur ajoutée pour le site

Il n'y a pas d'élément d'information pour cette rubrique.

revenir en haut de la page

Comment évaluer

Par le code source

  1. Pour un bouton de type image

    <input type="image" />,

    vérifier la présence de l'attribut alt et sa pertinence.
  2. 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) :
  1. Sous Internet Explorer, ouvrir la page à analyser.
  2. Dans le menu "11. Formulaires" de la Barre AccessiWeb, activer le critère 11.6.
  3. Le code source de la page s'affiche dans une nouvelle fenêtre.
  4. 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é.
  5. 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 :
  1. Activer l'option "Liste des images [Nouvelle fenêtre]" du menu "Images".
  2. 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.
  3. 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 :
  1. Repérer les boutons SUBMIT présents dans la page,
  2. A l'aide de la souris, sélectionner le ou les boutons SUBMIT présents,
  3. Cliquer sur le menu "Source", puis sur l'option "Voir le code source de la sélection [Nouvelle fenêtre]".
  4. 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 :
  1. Activer l'option "Remplacer les images par l'attribut alt" du menu "Images".
  2. 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 :
  1. Repérer les boutons SUBMIT présents dans la page,
  2. Activer l'option "Informations sur les formulaires" du menu "Form.".
  3. Deux tableaux ("Formulaire" et "Eléments") apparaissent pour chaque formulaire présent sur la page.
  4. 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) :
  1. 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.
  2. Ecouter si l’intitulé de ce bouton est explicite.

revenir en haut de la page

Comment mettre en oeuvre

Qui est concerné ?

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 :

  1. 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" />

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

Exemple de bonne pratique

En reprenant les exemples précédents :

revenir en haut de la page

Illustrations

Formulaire avec un bouton non 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.

Formulaire avec un bouton explicite

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.

revenir en haut de la page

Références

Autres fiches à consulter

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 11.5 Fiche suivante : fiche 11.7

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact