retour vers le site AccessiWeb

Guide AccessiWeb

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

Critère 11.4 : Dans chaque formulaire, chacun des blocs d'informations de même nature a-t-il si nécessaire une balise fieldset ?

revenir en haut de la page

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

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

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

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

Correspondances avec des critères d'autres référentiels sur l'accessibilité du Web

revenir en haut de la page

Comprendre

Comprendre le critère

Les blocs d'informations de même nature de tous les formulaires doivent si nécessaire avoir une balise fieldset.

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

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 : balise fieldset (exemple de code source : <fieldset><legend>Titre du Bloc d'information de même nature</legend>Bloc d'information de même nature</fieldset>).


  2. Appliquer le(s) test(s) suivant(s) :
  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) :
Pour le test 11.4.a [Argent] :
  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, chacun des blocs d'informations de même nature a une balise fieldset si nécessaire.
  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) :
Pour le test 11.4.a [Argent] :
  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 fieldset (ctrl + f), vérifier que pour chaque formulaire, chacun des blocs d'informations de même nature a une balise fieldset si nécessaire.
  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 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 avec la balise fieldset (immédiatement suivie de la balise legend).

<form action="#" mehtod="#">
<fieldset>
<legend>Adresse de livraison :</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="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>
<legend>Adresse de facturation :</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="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

revenir en haut de la page

Fiche précédente : fiche du critère 11.3 Fiche suivante : fiche du critère 11.5

Guide AccessiWeb (version 3.0, 9 juin 2008) | Conditions d'utilisation | Contact
Copyright © 2008 Association BrailleNet. Tous droits Réservés.