retour vers le site AccessiWeb

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 ?

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

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 11.3 Fiche suivante : fiche 11.5

Guide AccessiWeb (version 2.1, 30 août 2006) | Conditions d'utilisation | Contact