# 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 ?

Sommaire de la fiche :

- Carte d'identité
- Comprendre

- Comment évaluer
- Comment mettre en oeuvre

- Illustrations
- Références

### 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

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

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

- Supposons que ce bouton lance une recherche avancée. Dans ce cas, la mention "valider" n'est pas suffisamment explicite :

  <input type="image" src="/images/commun/bt_envoyer_small.gif" alt="valider" />

- Ce bouton active la recherche d'un vol sur un site d'achat en ligne de billets d'avion :

  <input type="submit" value="OK" />

#### Exemple de bonne pratique

En reprenant les exemples précédents :

- <input type="image" src="/images/commun/bt_envoyer_small.gif" alt="Valider la recherche avancée" />

- <input type="submit" value="Recherche de vols" />

revenir en haut de la page

### Illustrations

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.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- 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 6.2 : Les liens sont-ils explicites ?
- 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 ?

#### Autres ressources

- html Techniques (section 7.1) : Short text equivalents for images ("alt-text")
- html Techniques (section 11.4 et 11.5) : Graphical buttons

revenir au sommaire de la fiche

revenir en haut de la page

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