Comment regrouper des champs de manière accessible ?

Simplifier les processus administratifs, faciliter les interactions ou favoriser une communication fluide entre individus et organisations… Les formulaires en ligne font partie intégrante de nos usages sur Internet. Pour pouvoir servir au plus grand nombre, il convient de penser leur conception en y associant les règles d’accessibilité numérique. Cet article détaille, en plusieurs méthodes, comment regrouper des champs de formulaire de façon accessible. En effet, lors de la création d’un formulaire, il est nécessaire de regrouper les champs (boutons radio, cases à cocher, champs de texte…) pour faciliter la compréhension et la navigation au sein du formulaire, en particulier pour les utilisateurs de technologies d’assistance telles que les lecteurs d’écran.

Méthode native

En matière d’accessibilité numérique, il est recommandé de privilégier les solutions natives, cependant, le Référentiel Général d’Amélioration de l’Accessibilité (RGAA) reconnaît également d’autres techniques conformes, que nous développerons plus bas, pour structurer et intituler des groupes de champs.

Considérons un formulaire contenant trois boutons radio destinés à sélectionner un mode de livraison.

Regroupement des champs

Ce formulaire ci-dessous doit satisfaire au critère 11.5 du RGAA 4.1.2, étant donné qu’il regroupe des « champs de même nature » (dans un formulaire, ensemble des champs pouvant être regroupés par la nature des informations attendues. Le regroupement vise à identifier les champs devant être traités comme un ensemble.). Nous allons englober l’ensemble des champs de même nature dans une balise <fieldset> :

  <fieldset>
    <label for="standard">Standard</label>
    <input type="radio" id="standard" name="delivery">

    <label for="express">Express</label>
    <input type="radio" id="express" name="delivery">
   
    <label for="premium">Premium</label>
    <input type="radio" id="premium" name="delivery">
  </fieldset>

A noter que « Lorsque le formulaire est constitué d’un seul bloc d’informations de même nature (l’identité et l’adresse de l’utilisateur, par exemple) ou d’un champ unique (un moteur de recherche, par exemple), le regroupement des champs n’est pas obligatoire. » Source : Glossaire RGAA – Version 4.1.5 : Légende

Légender le regroupement

Afin de répondre au critère 11.6, il est nécessaire de légender chaque groupe de champs. Pour ce faire, une balise <legend>, insérée à l’intérieur d’une balise <fieldset>, doit être utilisée.

  <fieldset>
    <legend>Méthode de livraison</legend>
    <label for="standard">Standard</label>
    <input type="radio" id="standard" name="delivery">

    <label for="express">Express</label>
    <input type="radio" id="express" name="delivery">
   
    <label for="premium">Premium</label>
    <input type="radio" id="premium" name="delivery">
  </fieldset>

Enfin, cette légende doit être pertinente (cohérente vis à vis de la nature des champs regroupées) afin de rendre conforme le critère 11.7.

Méthode WAI-ARIA

Regroupement des champs (role=group et role=radiogroup)

Les critères 11.5 et 11.6 peuvent aussi être rendus conformes par l’utilisation d’attributs WAI-ARIA (Accessible Rich Internet Applications). Pour les boutons radio (<input type= »radio »>) ou d’éléments avec un attribut WAI-ARIA role= »radio », ils doivent être placés à l’intérieur d’un conteneur dont l’attribut est role= »group ». Pour les autres champs de même nature comme des cases à cocher par exemple, l’attribut du conteneur doit être role= »group ».

  <div role="radiogroup">
    <label for="standard">Standard</label>
    <input type="radio" id="standard" name="delivery">

    <label for="express">Express</label>
    <input type="radio" id="express" name="delivery">
   
    <label for="premium">Premium</label>
    <input type="radio" id="premium" name="delivery">
  </fieldset>

Légender le regroupement

Deux attributs WAI-ARIA permettent de légender un groupe :

aria-label : l’attribut est à placer directement sur la balise du conteneur possédant un attribut role= »group/radiogroup »
aria-labelledby : l’attribut fait référence à l’ID d’une balise dont le contenu sert de légende.

Utilisons l’attribut aria-labelledby :

  <div role="radiogroup" aria-labelledby="titre1">
    <h2 id="titre1">Méthode de livraison</h2>
    <label for="standard">Standard</label>
    <input type="radio" id="standard" name="delivery">

    <label for="express">Express</label>
    <input type="radio" id="express" name="delivery">
   
    <label for="premium">Premium</label>
    <input type="radio" id="premium" name="delivery">
  </fieldset>

Légende : méthodes alternatives

Si il n’est pas possible d’ajouter une légende de manière native ou en utilisant les attributs WAI-ARIA, il reste quatre possibilités, pour chacun des champs de même nature :

Soit ajouter un attribut title permettant de déterminer l’appartenance du champ au groupement de champ ;
Soit ajouter un attribut aria-label permettant de déterminer l’appartenance du champ au groupement de champ ;
Soit ajouter un attribut aria-labelledby qui référence un passage de texte permettant de déterminer l’appartenance du champ au groupement de champ.
Soit ajouter un attribut aria-describedby qui référence un passage de texte permettant de déterminer l’appartenance du champ au groupement de champ.

Vérifier l’implémentation

Si vous avez des doutes sur votre implémentation, comparez son comportement avec celui d’un formulaire reconnu pour son accessibilité, comme celui proposé par le Système de Design de l’État, en utilisant un lecteur d’écran tel que NVDA. Lorsque le focus est placé sur le champ, la légende associée devrait être annoncée par le lecteur d’écran (la légende n’est restituée qu’une fois dans le groupe).

Nous espérons que cet article technique sur le regroupement des champs vous aura été utile dans vos travaux de mise en accessibilité numérique. Si vous avez des questions, n’hésitez pas à nous contacter, nous serons ravis de pouvoir y répondre!