Accessibilité web : comment bien associer un label aux groupes de boutons radio et de cases à cocher ?

Lorsque vous créez un formulaire, avez-vous déjà hésité sur la manière d'utiliser le label pour un groupe de boutons radio ou de cases à cocher ? Il est parfois difficile de savoir comment étiqueter l'ensemble du groupe et comment gérer l'attribut for.

Cet article fait le point sur l'étiquetage de ces groupes et présente des méthodes concrètes.

Approches courantes et problèmes

Pointer le for vers le premier élément

Il s'agit d'une méthode qui consiste à diriger l'attribut <label>for du label d'un groupe de boutons radio ou de cases à cocher vers le premier élément du groupe.

Voici un exemple de code.

<div class="form-group">
  <label for="fruit-apple">好きな果物</label>
  <div>
    <label><input type="radio" id="fruit-apple" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

Visuellement, rien ne semble poser problème. Cependant, avec un lecteur d'écran, le libellé « Fruit préféré » n'est associé qu'au premier bouton radio, de sorte que l'ensemble du groupe n'est pas correctement reconnu.

Ne pas spécifier for

<div class="form-group">
  <label>好きな果物</label>
  <div>
    <label><input type="radio" name="fruit" value="apple">りんご</label>
    <label><input type="radio" name="fruit" value="orange">みかん</label>
    <label><input type="radio" name="fruit" value="banana">バナナ</label>
  </div>
</div>

Cette méthode ne permet pas de savoir clairement à quel élément le libellé se rapporte. En particulier pour les utilisateurs de lecteurs d'écran, il n'est pas clair quelle option est associée au libellé.

Voici une proposition d'amélioration

Regrouper avec l'attribut role et associer un libellé avec aria-labelledby

Il s'agit de regrouper les boutons radio ou les cases à cocher avec role="radiogroup" ou role="group", puis de les associer à l'élément de libellé identifié par aria-labelledby. Cela permet d'indiquer clairement aux lecteurs d'écran que le libellé « Fruit préféré » s'applique à l'ensemble du groupe.

boutons radio

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="radiogroup" aria-labelledby="fruit-group">
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

cases à cocher

<div class="form-group">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div role="group" aria-labelledby="fruit-group">
      <label><input type="checkbox" name="fruit" value="apple">りんご</label>
      <label><input type="checkbox" name="fruit" value="orange">みかん</label>
      <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
    </div>
  </div>
</div>

Méthode utilisant <fieldset> et <legend>

Une autre méthode consiste à utiliser <fieldset> et <legend>. Cette approche repose sur la sémantique HTML : sans ajouter d'attributs spécifiques ni de rôle, l'ensemble du groupe est correctement reconnu.

Dans l'exemple suivant, le groupe de boutons radio est entouré de <fieldset> et <legend> est utilisé comme libellé.

Remarque : Attention ! Il arrive que le design nécessite de disposer le libellé et le champ de saisie côte à côte. Dans ce cas, il faudrait appliquer display: contents; à fieldset, mais certains navigateurs suppriment legend de l'arbre d'accessibilité, ce qui ne permet pas de recommander cette approche. Forcer l'alignement avec du CSS au détriment de l'accessibilité n'est pas souhaitable.

<div class="form-group">
  <fieldset>
    <legend>好きな果物</legend>
    <div>
      <label><input type="radio" name="fruit" value="apple">りんご</label>
      <label><input type="radio" name="fruit" value="orange">みかん</label>
      <label><input type="radio" name="fruit" value="banana">バナナ</label>
    </div>
  </fieldset>
</div>

Conclusion

Le libellé d'un groupe de boutons radio ou de cases à cocher peut être organisé de la manière suivante.

Méthode utilisant l'attribut role et aria-labelledby

• Une personnalisation est possible si nécessaire, avec une grande souplesse
• Définir explicitement le libellé du groupe en le combinant avec role="group"

Méthode utilisant <fieldset> et <legend>

• Méthode standard fondée sur la sémantique
• Permet une implémentation plus robuste et plus accessible
• Problèmes d'accessibilité selon la mise en page

Selon le design et les exigences, les deux méthodes permettent d'assurer une accessibilité appropriée.

La combinaison <fieldset>fieldset et <legend>legend est plus sémantique, mais dans des formulaires de contact et autres structures d'ensemble, l'approche avec role et aria-labelledby peut être plus pratique.

L'accessibilité web, c'est encore bien plus profond !