4.1.7 Chaque formulaire a un bouton d'envoi visible

Chaque formulaire doit avoir un bouton d'envoi visible que les visiteurs peuvent activer avec le clavier ainsi qu'avec la souris.

Pourquoi?

L'absence de bouton d'envoi peut poser des problèmes à certains visiteurs, par exemple:

  • Les menus déroulants avec un événement JavaScript de type onchange peuvent poser de réelles difficultés pour quelqu'un qui n'utilise pas la souris. L'événement onchange, empêche l'utilisateur de parcourir la totalité de la liste en utilisant le clavier. La page se charge automatiquement dès le premier élément sélectionné. Tous les autres liens ne pourront être ni connus ni activés. L'ajout d'un bouton d'envoi (avec la suppression des events) est une solution à ce problème.
  • Comme la plupart des formulaires peuvent être envoyés avec la touche Enter du clavier le bouton d'envoi est parfois omis pour gagner de la place. Cela arrive fréquemment pour les champs de saisie de termes de recherche proposés sur de nombreux sites. C'est problématique pour les utilisateurs qui ne peuvent pas utiliser le clavier et qui utilisent un mécanisme de pointage alternatif.

En pratique

Veillez à ce que tous les formulaires aient un bouton d'envoi. Lorsque vous proposez des liens dans une liste déroulante, ajoutez un bouton qui permet au visiteur de confirmer son choix.

Exemple liste de choix de langues (incorrect)

L'événement onchange active le lien au moment de sa sélection. Par clavier, il est impossible de prendre connaissance des différents choix car le simple fait de parcourir la liste, active directement le lien. Pour sélectionner l'anglais, quatrième élément de la liste, il va falloir activer successivement les 3 précédents avant même de découvrir sa présence au sein de la liste.

Liste de choix avec bouton d'envoi (correct)

L'événement onchange est supprimé, l'activation des liens est assurée par la présence d'un bouton de validation après la sélection. Le menu déroulant est accessible par clavier.

Remarque: dans l'exemple 'Liste de choix avec bouton d'envoi ' le formulaire est réellement envoyé et le script côté serveur doit s'assurer de renvoyer vers la bonne page. AU moyen de Javascript il est possible d'intercepter l'action d'envoi du formulaire pour effectuer la redirection côté client.

Formulaire sans bouton d'envoi (incorrect)

<label for="recherche2">Rechercher</label> 
<input type="text" value="" id="recherche2" name="recherche" />

Formulaire avec bouton d'envoi (correct)

<label for="recherche">Rechercher</label>  
<input type="text" value="" id="recherche" name="recherche" />  
<input type="submit" value="Rechercher" />

Recommandations

  • Il est recommandé de ne pas rajouter un bouton de remise à zéro (<input type="reset" /> à un formulaire. Cela n'ajoute pas de valeur au formulaire et peut être cause de frustrations pour les visiteurs qui le sélectionnent par erreur.
  • A côté de <input type="submit" />, il est également possible d'utiliser une image comme bouton d'envoi. Il faut alors bien remplir l'attribut altpour qu'il corresponde au texte présent sur l'image du bouton d'envoi.
<input type="image" src="submit.png" alt="Envoyer" />

comment tester

Pour chaque formulaire

  • Vérifiez qu'il y a un bouton d'envoi
  • Assurez-vous qu'il peut être activé au moyen du clavier et de la souris
  • si c'est un bouton d'envoi graphique, vérifiez que l'image a un attribut alt correct
  • S'il y a de listes déroulantes dont les éléments sont des liens, assurez-vous que le seul fait de faire une sélection dans la liste n'active pas le lien. Il faut que le lien ne soit activé qu'après confirmation.