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

Critère 11.9 : Dans chaque formulaire, chaque bouton sans alternative textuelle est-il explicite visuellement ?

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.9 [niveau AccessiWeb : Bronze]

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

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

Test 11.9.a [Bronze] : Dans chaque formulaire, chaque bouton sans alternative textuelle est-il explicite visuellement ?

Autre(s) fiche(s) AccessiWeb à consulter en relation avec cette fiche

Fiche du critère 1.1 : Chaque image a-t-elle une alternative textuelle ?
Fiche du critère 1.3 : Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative est-elle pertinente ?
Fiche du critère 1.4 : Pour chaque image porteuse d'information ayant une alternative textuelle, cette alternative a-t-elle une longueur maximum de 80 caractères (hors cas particuliers) ?
Fiche du critère 1.9 : Chaque image texte doit si possible être remplacée par du texte stylé. Cette règle est-elle respectée ?

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] : 11.6 [Bronze]
WCAG 1.0 (05/05/1999) : pas de correspondance.
UWEM 1.0 (05/07/2006) : pas de correspondance.
WCAG 2.0 (11/12/2008) : 1.1.1 [A]
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

Tous les boutons (sans alternative textuelle) de formulaires doivent être explicites visuellement.

Bénéfices pour les utilisateurs

Plusieurs types d'internautes tireront profit de ce critère :

Les utilisateurs qui ont une vision linéaire de l'écran, parce qu'ils consultent les pages en braille ou en agrandissant le texte;
les internautes qui consultent les pages Web sur un petit écran et n'affichent pas toute la page en une seule fois (appareils mobiles tels qu'un téléphone ou un PDA;
les internautes qui naviguent avec un logiciel de reconnaissance vocale du fait d'une impossibilité d'utiliser la souris et/ou le clavier. Ils doivent indiquer précisément à leur logiciel quel bouton il doit activer;
les personnes ayant des difficultés de lecture repéreront plus facilement un bouton avec un intitulé explicite.

Le respect de ce critère apporte aux utilisateurs nommés ci-dessus les bénéfices suivants :

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

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 : ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <button type="submit">Lancer votre recherche</button>) :
- balise button avec type="submit"
- balise button avec type="reset"
- balise button avec type="button"
- balise input avec type="submit"
- balise input avec type="reset"
- balise input avec type="button"
Appliquer le(s) test(s) suivant(s) :
- Test 11.9.a [Bronze] : Dans chaque formulaire, chaque bouton sans alternative textuelle est-il explicite visuellement ?
Valider le critère : le critère est validé si vous répondez oui au test applicable précédent.

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.9.a [Bronze] :

Sous Internet Explorer, ouvrir la page à analyser.
Dans le menu "Code source" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mise en avant le code source" puis l'option "Code source [Mise en avant des formulaires]".
Vérifier que pour chaque formulaire, chaque bouton sans alternative textuelle est explicite visuellement.
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.9.a [Bronze] :

Sous Firefox, ouvrir la page à analyser.
Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
Une nouvelle fenêtre apparaît contenant le code source de la page.
En faisant une recherche sur les mots button et input (ctrl + f), vérifier que pour chaque formulaire, chaque bouton sans alternative textuelle est explicite visuellement.
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é ?

Ce critère est implémenté par le développeur HTML et le rédacteur.

Implémentation

Veiller à ce que chaque bouton sans alternative textuelle soit explicite. Le bouton doit indiquer l'action qui sera effectuée lors de son activation.
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 :

<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

Avertissement : le contenu du paragraphe "Illustrations" est donné à titre indicatif. Il ne présente pas tous les cas possibles.

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

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

revenir au sommaire de la fiche

revenir en haut de la page