Guide AccessiWeb

1. Accueil
2. Mode d'emploi
3. Structure d'une fiche
4. 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
5. Glossaire
6. Aide à l'évaluation
   • Liste d'outils
   • Manuel Code Source
   • Manuel WAT [Internet Explorer]
   • Manuel Web Dev [Firefox]
7. Référentiel AccessiWeb
   • AccessiWeb v1.1 [Général]
   • AccessiWeb v1.1 [Déployé]
   • AccessiWeb v1.0
8. Tables de correspondance
   • AW v1 vers AW v1.1 [Général]
   • AW v1.1 [Général] vers AW v1.1 [Déployé]
   • AW v1.1 [Général] vers WCAG 1.0
   • AW v1.1 [Général] vers UWEM 1.0
   • AW v1.1 [Déployé] vers UWEM 1.0
   • AW v1.1 [Général] vers WCAG 2.0
   • AW v1.1 [Général] vers mobileOK Basic 1.0
   • AW v1.1 [Général] vers RGAA
9. Moteur de recherche
10. Références
11. Remerciements
12. Plan du guide

vous êtes ici : Accueil > Fiches AccessiWeb : Formulaires > Critère 11.6

Critère 11.6 : Dans chaque formulaire, le contenu de la balise legend de chaque bloc d'informations de même nature est-il pertinent ?

revenir en haut de la page

Carte d'identité du critère 11.6 [niveau AccessiWeb : Argent]

revenir en haut de la page

Comprendre

Comprendre le critère

Bénéfices pour les utilisateurs

• Bénéfice 1 :
  Lorsqu'une personne aveugle, utilisant un lecteur d'écran, passe de champ en champ à l'aide de la touche "tabulation", le titre ou la question à laquelle se rapporte le champ lui sera annoncé avant l'intitulé du champ lui-même. Ceci lui permet donc à chaque instant de savoir où elle se situe dans le formulaire.
  
  
• Bénéfice 2 :
  Cette balise permet de bien délimiter les différents blocs d'informations. Elle met en exergue le titre de la rubrique sur le bord supérieur du liseré défini par la balise fieldset, et offre une aide pour les personnes ayant un handicap cognitif et les personnes malvoyantes.

Valeur ajoutée pour le site

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

1. Sélectionner le(s) élément(s) à tester :
   • Identifier dans un navigateur graphique tous les blocs d'informations de même nature des formulaires.
   • Ouvrir le code source de la page Web et sélectionner le code associé à tous les éléments suivants (exemple de code source : <fieldset><legend>Titre du Bloc d'information de même nature</legend>Bloc d'information de même nature</fieldset>) :
     • balise fieldset
     • balise legend
   
   
   
2. Appliquer le(s) test(s) suivant(s) :
   • Test 11.6.a [Argent] : Dans chaque formulaire, le contenu de la balise legend de chaque bloc d'informations de même nature est-il pertinent ?
   
   
3. 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) :

1. Sous Internet Explorer, ouvrir la page à analyser.
2. Dans le menu "Structure" de la Barre d'outils Accessibilité du Web (version 2.0 beta), activer l'option "Mettre en valeur les Fieldset / Labels".
3. Vérifier que pour chaque formulaire, le contenu de la balise legend de chaque bloc d'informations de même nature est pertinent.
4. 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) :

1. Sous Firefox, ouvrir la page à analyser.
2. Dans le menu "Voir Source" de la Barre d'Outils Web Developper (version 1.1.4), activer l'option "Voir Source".
3. Une nouvelle fenêtre apparaît contenant le code source de la page.
4. En faisant une recherche sur le mot legend (ctrl + f), vérifier que pour chaque formulaire, le contenu de la balise legend de chaque bloc d'informations de même nature est pertinent.
5. 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 l'intégrateur HTML, le rédacteur et l'ergonome.

Implémentation

Dans le cas d'une page en html, l'utilisation de la balise legend, associée à la balise fieldset, permet de donner un titre à chaque bloc d'informations.

Cela permet une identification aisée des différents groupes d'informations.

<fieldset>
<legend>Intitulé de la rubrique du formulaire</legend>
Contenu de la rubrique...
</fieldset>

Exemple de mauvaise pratique

Voici un formulaire qui demande à l'utilisateur de fournir une adresse de livraison et une adresse de facturation, si elles sont différentes. Les deux blocs ne sont pas clairement identifiés (chaque bloc est identifié par "Adresse" uniquement). Ainsi, un utilisateur navigant à l'aide d'une synthèse vocale et tabulant de champ en champ n'entendra que le nom de ce champ sans savoir à quel bloc il appartient.

<form action="#" mehtod="#">
<fieldset>
<legend>Adresse :</legend>
<p> <label for="nom_l">Nom</label> : <input type="text" id="nom_l" nam="nom_l" /></p>
<p><label for="prenom_l">Prénom</label> : <input type="text" id="prenom_l" nam="prenom_l" /></p>
<p><label for="adr_l">Adresse</label> : <input type="text id="adr_l" name="adr_l" /></p>
<p><label for="cp_l">Code postal</label> : <input type="text" id="cp_l", name="cp_l" /></p>
<p><label for="ville_l">Ville</label> :<input type="text" id="ville_l" name="ville_l" /></p>
</fieldset>
<fieldset>
<legend>Adresse :</legend>
<p><label for="nom_f">Nom</label> : <input type="text" id="nom_f" nam="nom_f" /></p>
<p><label for="prenom_f">Prénom</label> : <input type="text" id="prenom_f" nam="prenom_f" /></p>
<p><label for="adr_facture">Adresse</label> : <input type="text id="adr_facture"
name="adr_facture" /></p>
<p><label for="cp_f">Code postal</label> : <input type="text" id="cp_f", name="cp_f" /></p>
<p><label for="ville_f">Ville</label> :<input type="text" id="ville_f" name="ville_f" /></p>
</fieldset>
</form>

Exemple de bonne pratique

Chaque titre de rubrique "adresse de livraison" et "adresse de facturation" est encadré de la balise legend. Ainsi, lorsqu'une personne aveugle, utilisant le lecteur d'écran Jaws passe de champ en champ dans la rubrique "adresse de livraison", elle entend "adresse de livraison : nom", "adresse de livraison : prénom" etc... Puis, lorsqu'elle passe dans le bloc "adresse de facturation", elle entend "adresse de facturation : nom", "adresse de facturation : prénom" etc...

<form action="#" mehtod="#">
<fieldset>
<legend><strong>Adresse de livraison :</strong></legend><br />
<p><label for="nom_l">Nom</label> : <input type="text" id="nom_l" nam="nom_l" /></p>
<p><label for="prenom_l">Prénom</label> : <input type="text" id="prenom_l" nam="prenom_l" /></p>
<p><label for="adr_l">Adresse</label> : <input type="text id="adr_l" name="adr_l" /></p>
<p><label for="cp_l">Code postal</label> : <input type="text" id="cp_l", name="cp_l" /></p>
<p><label for="ville_l">Ville</label> :<input type="text" id="ville_l" name="ville_l" /></p>
</fieldset>
<fieldset>
<legend><strong>Adresse de facturation :</strong></legend><br />
<p><label for="nom_f">Nom</label> : <input type="text" id="nom_f" nam="nom_f" /></p>
<p><label for="prenom_f">Prénom</label> : <input type="text" id="prenom_f" nam="prenom_f" /></p>
<p><label for="adr_facture">Adresse</label> : <input type="text id="adr_facture"
name="adr_facture" /></p>
<p><label for="cp_f">Code postal</label> : <input type="text" id="cp_f", name="cp_f" /></p>
<p><label for="ville_f">Ville</label> :<input type="text" id="ville_f" name="ville_f" /></p>
</fieldset>
</form>

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.

Blocs de formulaire non identifiés (format mp3, 399 ko)

Blocs de formulaire correctement identifiés (format mp3, 284 ko)

revenir en haut de la page

Références

• html techniques for WCAG 1.0 (section 11.2) : Grouping form controls
• WAI Curriculum (section 12.3) : Group form controls (using the fieldset and legend elements)
• WebAIM : Creating accessible forms

revenir en haut de la page