RGAA 4 : Label obligatoire ?

Bonjour,

Je suis actuellement en train de travailler sur une mise en conformité au RGAA
Dans l'audit, il est mentionné plusieurs fois la mention suivante :

"Les champs de saisie des différents réseaux sociaux n'ont pas d’étiquette (ils présentent un attribut « placeholder », mais cela ne constitue pas une étiquette conforme). Il faudrait leur donner une étiquette au moyen d'une balise <label> présentant un attribut « for » identique à l'attribut « id » de leurs champs de saisie respectifs."

Pour mieux comprendre, voici un aperçu visuel des champs :


Et voici le code de l'un d'eux :

<ul class="social-links social-links--inline">
   <li class="social-links__item">
      <div class="social-links__link social-links__link--website is-active">
         <span class="social-links__wrap">
            <svg class="icon" aria-hidden="true">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="<?php bloginfo('template_url'); ?>/assets/icons/icons.svg#social-website"></use>
            </svg>
         </span>
      </div>
      <div class="field">
         <input aria-label="Mon site personnel" id="website" type="text" class="field__input" placeholder="Mon site personnel" value="">
      </div>
   </li>
</ul>

Vous l'aurez compris, visuellement parlant, le <label> ici n'a aucun interêt mais semble être obligatoire pour être conforme.

J'ai donc pensé à ajouter un <label> au niveau de l'input, le "sortir de l'écran" via une classe "sr-only" et supprimer la aria-label au niveau de l'input, comme ceci :

<div class="field">
   <label for="website" class="sr-only">Mon site personnel</label>
   <input id="website" type="text" class="field__input" placeholder="Mon site personnel" value="">
</div>

Cela rendra t-il le formulaire conforme ?

De plus, existe t-il un cas particulier où le label ne serait pas obligatoire ?

Merci beaucoup.
Modifié par lorraineS (21 Feb 2022 - 13:04)

Bonjour,

Pourquoi ne pas se contenter de mettre un <label for="website" class="social-links__wrap"> autour du svg au lieu du <span class="social-links__wrap"> ?

Ceci étant, je ne sais pas du tout si ça sera plus conforme ou pas.

Amicalement,
Modifié par parsimonhi (21 Feb 2022 - 14:32)

Bonjour,

Si remplacer le <span> par un <label> n'est pas conforme (ça serait bien qu'il le soit parce que ça me semble être le plus propre), on peut me semble-t-il simplement utiliser l'attribut aria-label pour les inputs qui n'ont pas de label.

Amicalement,

Bonjour parsimonhi,

Si je dois transformer le parent de l'icon par un label, cela m'obligera à ajouter un aria-label ou une <span class="sr-only"> afin d'y ajouter un texte "Mon site personnel", cela revient donc au même que d'utiliser une balise <label> plus bas. Mais pourquoi pas

Concernant l'aria-label, je ne suis pas totalement sûr que cela rende une "étiquette conforme", même si c'est ce que j'ai fait initialement dans le 1er code. Il est normalement à utiliser lorsque le label n'est pas assez pertinent pour les liseuses.

Et comme l'audit mentionne l'ajout d'une balise <label> plutôt qu'un attribut aria-label, je suppose que c'est n'est pas totalement un hasard. Mais je me trompe peut-être
Modifié par lorraineS (21 Feb 2022 - 15:57)

Bonjour,

Je suis allé voir https://www.numerique.gouv.fr/uploads/rgaa/RGAA-v4.1.pdf et à la page 64, il y a entre autres conditions pour qu'on ait un input valide :
- soit le champ de formulaire possède un attribut WAI ARIA aria-label.
- soit une balise <label> ayant un attribut for est associée au champ de formulaire.

Mais bon, évidemment, ça ne nous dit pas ce que pourrait conclure un futur audit !

Amicalement,

Bonjour,

À ta place, j'aurais fait le code suivant :

<ul class="social-links social-links--inline">
   <li>
      <label>
         <svg class="icon is-active">
            <title>Mon site personnel</title>
            <use href="<?php bloginfo('template_url'); ?>/assets/icons/icons.svg#social-website"/>
         </svg>
         <input id="website" class="field__input" placeholder="Mon site personnel">
      </label>
   </li>
</ul>

Mais bon, il parait que je suis un extrémiste de la simplification html.

Amicalement,
Modifié par parsimonhi (21 Feb 2022 - 16:32)

Bonjour,

Plusieurs choses me choquent dans vos codes.

Question qui vous paraitra sûrement stupide, mais concrètement, à quoi sert cet input ?
Qu'est-ce que je suis censé saisir dedans ? ET qu'est-ce que c'est censé faire ?

Soit le bout de code manque de contexte, soit "mon site personnnel" n'est absolument pas clair, même transformé en label.


Sinon, un SVG avec aria-hidden=true mais qui comporte un lien, c'est quelque chose qui ne va pas non plus.
S'il y a un lien cliquable, l'élément ne doit en aucun cas être caché aux lecteurs d'écran.

Quant au code de Parsimony, un input à l'intérieur d'un label est toujours aussi mal supporté par certains lecteurs d'écran, et donc déconseillé.

Merci QuentinC,

Le fonctionnement est très simple. Ce sont des champs qui permettent à l'utilisateur d'ajouter ses réseaux sociaux. Avec cette capture uniquement vous manquez de contexte, mais pas l'utilisateur. Avant d'arriver dans cette modale, il a du cliquer sur un bouton Ajouter et modifier vos réseaux sociaux".

Je pourrais toujours affiner le texte par "Saisir l'URL de votre site personnel" mais le contexte reste relativement compréhensible lors de la navigation.

Ensuite, le SVG ne contient aucune URL. Le href que tu vois est simplement l'URL racine du dossier /images/ afin d'afficher l'icon.
Modifié par lorraineS (23 Feb 2022 - 09:35)

Bonjour,

QuentinC a écrit :
Quant au code de Parsimony, un input à l'intérieur d'un label est toujours aussi mal supporté par certains lecteurs d'écran, et donc déconseillé.

Intéressant. Je note.

Moyennant une petite modification de code, en ajoutant un for="website" à la balise label et en sortant l'input à l'extérieur de la balise label, on peut résoudre ce problème :

<ul class="social-links social-links--inline">
   <li>
      <label for="website">
         <svg class="icon is-active">
            <title>Mon site personnel</title>
            <use href="<?php bloginfo('template_url'); ?>/assets/icons/icons.svg#social-website"/>
         </svg>
      </label>
      <input id="website" class="field__input" placeholder="Mon site personnel">
   </li>
</ul>

Amicalement,
Modifié par parsimonhi (23 Feb 2022 - 15:00)

OK, c'est donc bien qu'il manquait un peu de contexte. Du coup ça me parait tout à fait suffisant.

a écrit :

Ensuite, le SVG ne contient aucune URL. Le href que tu vois est simplement l'URL racine du dossier /images/ afin d'afficher l'icon.

OH, autant pour moi. Je ne savais pas qu'on pouvait importer une autre icône de cette manière.