Accessibilité web : Comment bien labelliser un groupe de boutons radio ou de cases à cocher ?

Lorsque vous créez un formulaire, vous vous êtes peut-être déjà demandé comment gérer le label pour un groupe de boutons radio ou de cases à cocher. En particulier, il est courant de se poser des questions sur la façon d'étiqueter l'ensemble du groupe et sur la manière de traiter l'attribut for.

Dans cet article, nous allons clarifier la manière de labelliser ces groupes et vous présenter des méthodes concrètes.

Approches courantes et leurs problèmes

Diriger le for vers le premier élément

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

Voici un exemple de ce type 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>

Bien que cela puisse sembler correct visuellement, avec un lecteur d'écran, le label « Fruit préféré » n'est associé qu'au premier bouton radio, ce qui signifie que le groupe entier 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 clarifie pas clairement à quel élément le libellé est associé. En particulier, pour les utilisateurs qui utilisent des lecteurs d'écran, il devient flou quelle option est liée au libellé.

Voici une bonne amélioration

Regroupement avec l'attribut role et étiquetage avec aria-labelledby

Cette méthode consiste à regrouper les boutons radio ou les cases à cocher avec role="radiogroup" ou role="group", puis à les associer avec aria-labelledby à l'élément libellé dont l'ID est spécifié. Cela permet d'indiquer explicitement au lecteur d'écran que le libellé « Votre 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 et

Une autre approche consiste à utiliser et . Cette approche est basée sur la sémantique HTML et le groupe entier est correctement reconnu sans avoir besoin d'ajouter des attributs spéciaux ou des rôles.

Dans l'exemple suivant, un groupe de boutons radio est entouré par , et est utilisé comme libellé.

Note : Vous souhaiterez peut-être mettre les étiquettes et les entrées côte à côte sur le plan de la conception. Dans de tels cas, il serait nécessaire de définir fieldset sur display: contents;, mais dans certains navigateurs, legend est supprimé de l'arborescence d'accessibilité, ce qui n'est pas recommandé. Ce n'est pas acceptable de forcer l'alignement de la mise en page avec CSS au détriment de l'accessibilité.

<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

L'étiquetage des groupes de boutons radio ou de cases à cocher peut être organisé comme suit.

Approche utilisant l'attribut role et aria-labelledby

• Peut être adapté de manière flexible si une personnalisation est nécessaire
• Définit explicitement l'étiquette du groupe en la combinant avec role="group"

Méthode utilisant et

• Approche standard basée sur la sémantique
• Permet une mise en œuvre plus robuste et accessible
• Problèmes potentiels d'accessibilité selon la mise en page

Selon la conception ou les exigences, l'une ou l'autre méthode peut réaliser une accessibilité appropriée.

Utiliser et est plus sémantique, mais dans les formulaires de contact et autres, l'approche utilisant l'attribut role et aria-labelledby peut être plus pratique en fonction de la structure globale de la mise en page.

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