Indications élémentaires pour les formulaires

Labels de formulaire

Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.

L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément <input> possède un id, et chaque élément <label> a un attribut for indiquant l’id de l’<input> associé.

Exemple 1. Formulaire basique avec labels

<form>
  <ul>
    <li>
      <input id="vin-1" type="checkbox" value="riesling"/>
      <label for="vin-1">Berg Rottland Riesling</label>
    </li>
    <li>
      <input id="vin-2" type="checkbox" value="weissbergunder"/>
      <label for="vin-2">Weissbergunder</label>
    </li>
    <li>
      <input id="vin-3" type="checkbox" value="pinot-grigio"/>
      <label for="vin-3">Pinot Grigio</label>
    </li>
    <li>
      <input id="vin-4" type="checkbox" value="gewurztraminer"/>
      <label for="vin-4">Berg Rottland Riesling</label>
    </li>
  </ul>
</form>

Labelliser avec ARIA

L’élément HTML <label> est approprié pour les éléments relatifs aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques, et utilisent les éléments <div> ou <span>. WAI-ARIA, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative sur l’Accessibilité du web) du W3C, fournit l’attribut aria-labelledby dans ces cas de figure.

L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut aria-labelledby de l’élément <ul> est défini comme « rg1_label », et est identique à l’id de l’élément <h3> de la ligne 1, qui sert de label au groupe de boutons radio.

Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée (d'après https://www.oaa-accessibility.org/examplep/radio1/)

<h3 id="rg1_label">Options du déjeuner</h3>

<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Thaï
  </li>
  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
    <img role="presentation" src="radio-unchecked.gif" /> Subway
  </li>
  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
    <img role="presentation" src="radio-checked.gif" /> Libanais
  </li>
</ul>

Décrire avec ARIA

Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut aria-describedby pour associer directement une description à un contrôle donné.

L’exemple ci-dessous montre un élément <button> décrit par une phrase contenue dans un élément <div> séparé. L’attribut aria-describedby du <button> fait référence à l’id de l’élément <div>.

Exemple 3. Un bouton décrit par un élément séparé.

<button aria-describedby="descriptionRevert">Annuler</button>
<div id="descriptionRevert">L’annulation supprimera toutes les modifications
                    intervenues depuis le dernier enregistrement.</div>

(Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

Champs obligatoires et invalides

Les développeur Web utilisent généralement des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :

La propriété aria-required peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire.
L’état aria-invalid peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides.

L’exemple ci-dessous montre un formulaire basique avec 3 champs. Aux lignes 4 et 12, les attributs aria-required sont définis à true (en plus de l’astérisque à la fin des 3 champs) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut aria-invalid du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).

Exemple 4a. Un formulaire avec des champs obligatoires.

<form>
  <div>
    <label for="nom">* Nom :</label>
    <input type="text" value="nom" id="nom" aria-required="true"/>
  </div>
  <div>
    <label for="telephone">Téléphone :</label>
    <input type="text" value="telephone" id="telephone" aria-required="false"/>
  </div>
  <div>
    <label for="courriel">* Courriel :</label>
    <input type="text" value="courriel" id="courriel" aria-required="true"/>
  </div>
</form>

Exemple 4b. Portion d’un script qui valide une entrée de formulaire.

var validate = function () {
  var emailElement = document.getElementById(emailFieldId);
  var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire

  emailElement.setAttribute("aria-invalid", !valid);
  setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false
};

Fournir des messages d’erreur utiles

Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.