7.5. Intégrer required ou aria-required="true" dans les champs obligatoires

Les champs obligatoires doivent intégrer required ou aria-required="true".

Remarque

En complément de cet attribut, un signe distinctif doit être intégré dans la balise <label>.

<label for="email">Votre email *</label>
<input type="email" id="email" name="email" autocomplete="email" required />

<input type="checkbox" id="conditions" aria-required="true" />
<label for="conditions">J'ai lu et j'accepte les conditions générales de vente (obligatoire)</label>

9 commentaires

  • Par Arnaud, le 3 novembre 2017 à 11h47.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Bonjour,
    Peut-on aujourd’hui (nov. 2017) considérer que seul l’attribut required est à utiliser si l’on se base entre autres sur cet article de Steve Faulkner d’avril 2015 ?
    On HTML belts and ARIA braces (The Default Implicit ARIA semantics they didn’t want you to know about)

    …ou y aurait-il encore aujourd’hui des TA utilisées qui nécessiteraient l’attr. aria-required ? Auquel cas faudrait-il alors mettre les deux attributs ?
    Merci

    Répondre

    • Par Sébastien Delorme, le 6 novembre 2017 à 14h58.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Arnaud,

      Effectivement, l’attribut required suffit, c’est pour cela que la fiche recommande l’un ou l’autre des attributs.

      Dans certains cas toutefois, il peut être intéressant d’utiliser aria-required plutôt que required, mais en dehors de préoccupations d’accessibilité. En effet, l’utilisation de l’attribut required va impliquer une gestion des erreurs par le navigateur, et il est possible sur les projets que cela ne soit pas désiré. Dans ce cas, il est plus simple d’utiliser l’attribut ARIA.

      Sébastien.

      Répondre

  • Par Julie, le 19 février 2016 à 16h34.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Étant donné le commentaire précédent, ça veut donc dire que l’on peut gérer l’affichage de l’astérisque en CSS via la propriété « content » ?

    Répondre

    • Par Johan Ramon, le 19 février 2016 à 16h38.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Bonjour Julie,

      Merci pour ton commentaire.

      Cela n’est pas recommandé notamment car l’astérisque ne sera pas présent pour les utilisateurs naviguant sans CSS.

      Johan

      Répondre

  • Par Sébastien Delorme, le 13 août 2015 à 11h20.

    Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

    Une bonne pratique d’accessibilité peut consister à englober le signe distinctif d’une balise <span aria-hidden="true"> afin qu’il ne soit pas restitué par les lecteurs d’écran.

    Comme par exemple :

    <label for="email">
   Votre email
   <span aria-hidden="true">*</span>
</label>
<input type="text" id="email" name="email" required />

    L’information du caractère obligatoire du champ étant déjà transmise par required ou aria-required="true".

    Répondre

    • Par Romy, le 9 octobre 2018 à 21h46.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Ça me turlupine… Si l’on choisit de masquer l’astérisque par aria-hidden (par exemple : <abbr title="(obligatoire)" aria-hidden="true">*</abbr>), je suppose que la légende doit être adaptée en conséquence ?

      Dans ce cas, plutôt que l’habituelle légende

      <p>Les champs marqués de <abbr title="(obligatoire)">*</abbr> sont obligatoires.</p>

      mieux vaut celle-ci :

      <p>Les champs avec astérisque (<abbr title="(obligatoire)" aria-hidden="true">*</abbr>) sont obligatoires.</p>

      Répondre

      • Par Romy, le 9 octobre 2018 à 22h30.

        Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

        Ah mais non, suis-je bête, c’est toute la légende qu’il faut alors masquer : <p aria-hidden="true">Les champs avec <abbr title="(obligatoire)">*</abbr> sont obligatoires.</p> non ?

      • Par Sébastien Delorme, le 19 octobre 2018 à 18h44.

        Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

        L’utilisation d’aria-required ou required permet aux lecteurs d’écran (synthèses vocales/plages braille) d’annoncer/afficher « Champ obligatoire » à chaque champ.
        Il me semble faiblement critique d’entendre/lire « Les champs munis d’un * sont obligatoires » puis ensuite d’entendre « Champ obligatoire » à chaque champ.

        À l’inverse, ne plus faire lire totalement la phrase affichée peut être relativement perturbant pour une personne qui vocalise la page, mais continue à la voir (malvoyance et dyslexie notamment).
        Du coup, difficile de faire un choix, je dirai qu’il reste préférable de faire lire cette phrase.

    • Par Romy, le 9 octobre 2018 à 21h46.

      Ce commentaire a été publié sur une ancienne version des notices AcceDe Web. Il se peut que son contenu ne soit plus d'actualité.

      Ça me turlupine… Si l’on choisit de masquer l’astérisque par aria-hidden (par exemple : <abbr title="(obligatoire)" aria-hidden="true">*</abbr>), je suppose que la légende doit être adaptée en conséquence ?

      Dans ce cas, plutôt que l’habituelle légende

      <p>Les champs marqués de <abbr title="(obligatoire)">*</abbr> sont obligatoires.</p>

      mieux vaut celle-ci :

      <p>Les champs avec astérisque (<abbr title="(obligatoire)" aria-hidden="true">*</abbr>) sont obligatoires.</p>

      Répondre

Ajouter un commentaire

Tous les champs sont obligatoires.

Haut de page