Regroupement des commandes

Regrouper les commandes de formulaire pour faciliter la compréhension du formulaire par tous les utilisateurs. Les lecteurs d’écran annoncent le début et la fin du groupe et l’étiquette du groupe au fur et à mesure de la navigation dans les groupes. Le regroupement des commandes est particulièrement important pour les boutons radio et les cases à cocher connexes, car les étiquettes individuelles ne reflètent pas pleinement le sujet du groupe.

Suivez les pratiques exemplaires suivantes pour étiqueter les commandes :

  • Utiliser l’élément <fieldset> pour regrouper les commandes connexes dans un formulaire.
  • Utiliser l’élément <legend> pour nommer l’élément <fieldset>.
  • Faire en sorte que la légende soit aussi courte que possible, car certains lecteurs d’écran la déclarent avec chaque étiquette.
  • Rendre les étiquettes individuelles explicites, car certaines technologies d’assistance ne déclarepas la <legend>. Ne pas répéter la légende dans une étiquette.
  • Utiliser l’élément <optgroup> pour les éléments <select> avec groupes d’options
  • Utiliser ARIA role="group" et aria-labelledby pour regrouper et étiqueter les éléments de formulaire connexes lorsque vous ne pouvez pas utiliser les éléments HTML natifs <fieldset> et <legend>.
  • Utiliser <label> dans la mesure du possible pour prendre en charge le navigateur universel et le lecteur d’écran.

Bon exemple : Regrouper les commandes de cases connexes avec fieldset et legend

Choisissez votre disponibilité (cochez toutes les réponses qui s’appliquent):

HTML

<fieldset class="chkbxrdio-grp">
   <legend>
      <span class="field-name">   
	  Choisissez votre disponibilité (cochez toutes les réponses qui s’appliquent):
      </span>
   </legend>
   <div class="checkbox">
      <label for="morning"> 
         <input type="checkbox" id="morning" name="avail" value="a">
         Avant-midi 
      </label>
   </div>
   <div class="checkbox">
      <label for="after"> 
         <input type="checkbox" id="after" name="avail" value="b">
         Après-midi
      </label>
   </div>
   <div class="checkbox">
      <label for="even"> 
         <input type="checkbox" id="even" name="avail" value="c">
         Soir
      </label>
   </div>
</fieldset>

Bon exemple : Regrouper les éléments de formulaire connexes avec ARIA

Regroupez les éléments de formulaire connexes et nommez-les avec ARIA lorsque les éléments HTML natif <fieldset> et <legend> équivalents ne peuvent pas être utilisés.

Définissez les champs de formulaire connexes dans un conteneur <div> et attribuez au conteneur l’attribut role="group". Nommez le conteneur du groupe avec un attribut aria-labelledby pointant vers la valeur attribut id de l’élément contenant le texte descriptif.

Informations de contact

HTML

<p id="grouplabel">
   <strong>Informations de contact<strong>
</p>
<div role="group" aria-labelledby="grouplabel"> 
   <div class="form-group">
      <label for="name" class="col-sm-4 control-label">Nom</label> 
      <div class="col-sm-8">
         <input type="text" id="name" class="form-control"></div>
      </div> 
   <div class="form-group">
      <label for="phone" class="col-sm-4 control-label">Téléphone</label> 
      <div class="col-sm-8">
         <input type="text" id="phone" class="form-control">
      </div>
   </div> 
  […]
</div>

Bon exemple : Regrouper les options connexes avec optgroup

HTML

<label for="cars">Choisir une voiture</label>
<select name="cars" id="cars">
   <optgroup label="Voitures américaines">
      <option value="ford">Ford</option>
      <option value="chevrolet">Chevrolet</option>
      <option value="tesla">Tesla</option>
   </optgroup>
   <optgroup label="Voitures japonaises">
       <option value="honda">Honda</option>
       <option value="toyota">Toyota</option>
   </optgroup>
</select>

Ressources WCAG connexes

Ressources WCAG connexes

Critères de succès

Techniques

Haut de la page