# Guide AccessiWeb

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

## Fiche 11.5 : La balise LEGEND est-elle présente pour donner un titre au bloc d'informations encadré par la balise FIELDSET ?

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.5
- Niveau AccessiWeb : argent
- Point(s) de contrôle WCAG 1.0 correspondants (Priorité 2 de WAI) : 12.3

revenir en haut de la page

### Comprendre

#### 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ù il 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.

#### 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. Vérifier la présence de la balise `LEGEND` autour des différents titres de rubrique.

#### 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.5.
3. La page s'affiche avec les balises et attributs des formulaires si présents et renseignés.
4. Vérifier que la balise `LEGEND` est présente pour donner un titre au bloc d'informations encadré par la balise `FIELDSET`.
   Note : Pour revenir à la page initiale, recharger la page en cliquant sur la touche F5.

##### Evaluer avec la barre d'accessibilité AIS pour Internet Explorer (version 1.2 en français) :

1. Cliquer sur le menu "Structure", puis sur l'option "Fieldset/Labels".
2. Vérifier que la balise `LEGEND` est présente pour donner un titre au bloc d'informations encadré par la balise `FIELDSET`.

##### Evaluer avec la Barre d'Outils Web Developper pour Firefox (version 1.0.2 en français) :

1. Activer le sous-menu "Désactiver les styles css" du menu "CSS", puis cliquer sur l'option "Tous les styles".
2. Vérifier que la balise `LEGEND` est présente pour donner un titre au bloc d'informations encadré par la balise `FIELDSET`.

##### Evaluer avec le lecteur d'écran Jaws (version 5 et 6.2 en français) :

Jaws ne permet pas de repérer systématiquement si la balise `LEGEND` est implémentée. Cependant, il est possible de vérifier, à l’aide de Jaws, que chaque bloc d’informations a un titre.

1. Pour cela, il suffit d’aller au premier champ du formulaire en appuyant sur la touche F.
2. Puis, il faut appuyer sur "entrée" pour activer le mode formulaire.
3. Enfin, se déplacer avec la touche de tabulation et écouter si Jaws associe chaque champ parcouru avec le titre du bloc dans lequel se trouve le champ.

revenir en haut de la page

### Comment mettre en oeuvre

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

Syntaxe générale :

<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. 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>
<strong>Adresse de livraison :</strong><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>
<strong>Adresse de facturation :</strong>
<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

Note : pour lire les extraits sonores au format mp3 proposés sur ce guide, vous devez disposer d'un lecteur capable de lire ce type de fichier. Les enregistrements ont été réalisés à partir soit de la synthèse vocale utilisée par Jaws, soit celle utilisée par Home Page Reader. Pour plus d'informations sur le téléchargement de lecteurs de fichiers mp3, consulter le paragraphe Lecteurs multimédia de la page Outils d'aide à l'évaluation de ce guide.

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

Voici ce que lit Jaws lorsque l'utilisateur passe de champ en champ avec la touche "Tabulation" :
"Mode formulaire activé. Nom édition. Tab, Prénom édition. Tab, adresse édition. Tab, code postal édition. Tab, Ville édition. Tab, Nom édition. Tab, Prénom édition. Tab, adresse édition. Tab, code postal édition. Tab, Ville édition."

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

Voici ce que lit Jaws lorsque l'utilisateur passe de champ en champ avec la touche "Tabulation" :
"Mode formulaire activé. adresse de livraison Nom édition. Tab, adresse de livraison Prénom édition. Tab, adresse de livraison adresse édition. Tab, adresse de livraison code postal édition. Tab, adresse de livraison Ville édition. Tab, adresse de facturation Nom édition. Tab, adresse de facturation Prénom édition. Tab, adresse de facturation adresse édition. Tab, adresse de facturation code postal édition. Tab, adresse de facturation Ville édition.

revenir en haut de la page

### Références

#### Autres fiches à consulter

- Fiche 9.2 : La page web est-elle structurée de manière cohérente ?
- Fiche 11.3 : Est-ce que la disposition des champs de formulaire par rapport aux textes qui leur sont associés ne pose aucune ambiguïté ?
- Fiche 11.4 : La balise FIELDSET est-elle présente pour encadrer des blocs d'information de même nature ?

#### Autres ressources

- html techniques (section 11.2) : Grouping form controls
- Web Content Accessibility Curriculum (section 12.3) : Group form controls (using the FIELDSET and LEGEND elements)
- webaim.org : Creating accessible forms

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