retour vers le site AccessiWeb

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 ?

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

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

Autres ressources

revenir en haut de la page


Fiche précédente : fiche 11.4 Fiche suivante : fiche 11.6

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