# Guide AccessiWeb

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

## Fiche 11.4 : La balise FIELDSET est-elle présente pour encadrer des blocs d'information de même nature ?

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.4
- 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 :
  Le fait de regrouper visuellement des informations de même nature en les encadrant, permet de faire ressortir la structuration des informations et de les rendre ainsi plus compréhensibles à tout internaute, et plus particulièrement aux personnes ayant des difficultés de concentration.
- Bénéfice 2 :
  Lorsque les informations de même nature sont clairement identifiées par un encadrement, cela offre une aide visuelle pour les personnes malvoyantes qui peuvent ainsi mieux se repérer entre les différents champs.

#### 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 des balises `FIELDSET` et `/FIELDSET` dans le code source de la page en s'assurant qu'elles encadrent chacun des différents blocs d'informations du formulaire.

#### 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.4.
3. La page s'affiche avec les balises et attributs des formulaires si présents et renseignés.
4. Vérifier que la balise `FIELDSET` est présente pour encadrer des blocs d'information de même nature.
   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 `FIELDSET` est présente pour encadrer des blocs d'information de même nature.

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

Méthode 1 :

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 `FIELDSET` est présente pour encadrer des blocs d'information de même nature.

Méthode 2 :

1. Activer l'option "Informations sur les formulaires" du menu "Form.".
2. Deux tableaux ("Formulaire" et "Eléments") apparaissent pour chaque formulaire présent sur la page.
3. Pour chaque formulaire, dans le tableau "Eléments", vérifier la présence dans l'en-tête "Type" de la balise `FIELDSET` pour encadrer des blocs d'information de même nature.

Méthode 3 :

1. Activer l'option "Afficher le nom de l'élément entouré" du menu "Entourer".
2. Puis, activer l'option "Entourer un élément personnalisé ..." du menu "Entourer".
3. Une fenêtre apparaît. Saisir dans le premier champ "Elément 1" le mot fieldset. Observer la couleur associée à cet élement dans la case de couleur suivant la zone de saisie (par défaut: rouge). Appuyer sur le bouton OK.
4. Localiser dans la page les tableaux de données, identifier si du texte est entouré d'un liseret rouge (la balise `FIELDSET` est inscrite dans le liseret rouge) et vérifier la pertinence du texte.
   Note : Appuyer sur la touche F5 pour enlever le(s) liseret(s) rouge(s) de la page.

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

1. Jaws ne permet pas de déterminer de façon systématique si la balise `FIELDSET` est présente. Cependant, lorsque celle-ci est implémentée, et qu'elle est associée à la balise `LEGEND`, Jaws permet de vérifier si les différents champs sont correctement associés avec la balise `FIELDSET` qui entoure les zones.
   Note : Veiller à ce que l'option "étiquettes virtuelles en mode formulaire actif" soit cochée pour que les étiquettes de champ soient lues avec le champ en mode formulaire activé.

revenir en haut de la page

### Comment mettre en oeuvre

#### Qui est concerné ?

Ce critère est implémenté par l'intégrateur HTML et l'ergonome et le rédacteur.

#### Implémentation

Dans un même formulaire, plusieurs champs de saisie de même nature, comme les champs "nom", "prénom", "date" et "lieu de naissance" constituent, par exemple, le groupe de champs "Etat civil". Ils peuvent être regroupés par l'intermédiaire de la balise `FIELDSET`.

La balise `FIELDSET` permet de créer une zone de regroupement d'éléments d'un formulaire en formant, par défaut, un liseré autour du bloc d'informations.
Syntaxe générale :

<fieldset>
Groupe de champs.
Champ 1 : type de champ
Champ 2 : type de champ
...
</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.

<form action="#" mehtod="#">
<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="adresse_l">Adresse</label : <input type="text" id="adresse_l"
name="adresse_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>
<p><strong>Adresse de facturation :</strong></p>
<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="adresse_f">Adresse</label : <input type="text" id="adresse_f"
name="adresse_f" /></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>
</form>

#### Exemple de bonne pratique

Afin de mieux distinguer les deux blocs se rapportant respectivement à l'adresse de livraison et à l'adresse de facturation, il suffit d'encadrer chacun d'eux de la balise `FIELDSET`.

<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="adresse_l">Adresse</label : <input type="text" id="adresse_l"
name="adresse_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>
<p><strong>Adresse de facturation :</strong></p>
<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="adresse_f">Adresse</label : <input type="text" id="adresse_f"
name="adresse_f" /></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

Il n'y a pas d'illustration pour cette fiche.

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.5 : La balise LEGEND est-elle présente pour donner un titre au bloc d'informations encadré par la balise FIELDSET ?

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