Topics

Lors de la création d'un formulaire, vous pouvez utiliser lelabelAvez-vous déjà eu du mal à gérer des groupes ? Notamment, comment désigner l’ensemble du groupe, etforJ'ai parfois du mal à gérer les attributs.

Cette fois-ci, nous allons organiser l'étiquetage de ces groupes et présenter des méthodes spécifiques.

Méthodes de visionnage courantes et problèmes

Au premier élémentforindiquer

Pour les groupes de boutons radio ou de cases à cocher,<label>deforC'est une façon d'associer un attribut au premier élément.

Par exemple, le code suivant :

 Fruit préféré



 Pomme

 Mandarine

 Banane

Visuellement, tout semble correct, mais l'étiquette « Fruit préféré » n'est pas affichée correctement par le lecteur d'écran.Elle est uniquement associée au premier bouton radio.Par conséquent, le groupe dans son ensemble n'est pas correctement identifié.

forNe pas préciser

Fruit préféré



Pomme

Mandarine

Banane

Cette approche ne permet pas de déterminer clairement à quel élément l'étiquette se rapporte, notamment pour les utilisateurs de lecteurs d'écran.On ne sait pas exactement quelles options sont associées aux étiquettes.Cela devient ainsi.

Ce sont de bonnes idées d'amélioration

Grouper par attribut de rôle et étiquette avec aria-labelledby

Boutons radio et cases à cocherrole="radiogroup"ourole="group"et associer l'élément à l'étiquette dont l'identifiant est spécifié par aria-labelledby. Cela indique clairement aux lecteurs d'écran que l'étiquette « Fruit préféré » s'applique à l'ensemble du groupe.

Bouton radio

Fruit préféré





Pomme

Mandarine

Banane

case à cocher

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

<fieldset>et<legend>Comment utiliser

Une autre façon consiste à<fieldset>et<legend>Cette approche s'appuie sur la sémantique HTML et garantit que l'ensemble du groupe est correctement reconnu sans qu'il soit nécessaire de recourir à des attributs ou des rôles spéciaux.

Dans l'exemple ci-dessous, nous créons un groupe de boutons radio.<fieldset>et en tant qu'étiquette<legend>J'utilise.

※ Remarque ! : Il peut arriver que vous souhaitiez disposer l’étiquette et le champ de saisie côte à côte. Dans ce cas, utilisez fieldset.display: contents;Toutefois, cette méthode est déconseillée car certains navigateurs suppriment la légende de l'arbre d'accessibilité. Il est préférable d'éviter de forcer l'alignement de la mise en page avec du CSS et de compromettre ainsi l'accessibilité.

Fruit préféré



Pomme

Mandarine

Banane

résumé

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

Utilisation de l'attribut role et de aria-labelledby

• Personnalisation flexible disponible sur demande
• Définissez explicitement l'étiquette du groupe en combinaison avec le rôle="groupe"

<fieldset>et<legend>Comment utiliser

• Une approche standard basée sur la sémantique
• Permet des implémentations plus robustes et accessibles
• Certaines mises en page présentent des problèmes d'accessibilité

Selon votre conception et vos exigences, vous pouvez obtenir une accessibilité appropriée en choisissant l'une ou l'autre méthode.

<fieldset>et<legend>est plus sémantique, mais dans le cas d'un formulaire de demande, par exemple, l'attribut role et aria-labelledby peuvent être plus faciles à utiliser en raison de la structure de mise en page globale.

L'accessibilité web, c'est encore pour l'avenir !