Exemples de formulaire

Préambule

Pour qu’un formulaire soit accessible à l’ensemble des utilisateurs, quelques règles doivent être respectées lors du développement. C’est ce que nous allons voir en détail dans l’exemple de formulaire accessible.

Exemple de formulaire accessible

Dans cet exemple, nous avons utilisé la librairie Boosted. Celle-ci permet d’obtenir des formulaires dont le design est conforme à la charte Orange. Nous utilisons également le plugin jQuery validate pour les contrôles de saisie.

Couleur

Numéro de série commençant par « TS- » suivi de 4 chiffres.

Mise en place

Étiqueter les champs de formulaire

Tous les champs de formulaire doivent être étiquetés avec un libellé pertinent. Ainsi, le lecteur d’écran vocalisera automatiquement le libellé du champ de formulaire lors de la navigation.

De plus, les étiquettes de champs (label) doivent être le moins éloigné possible de leur champ afin de faciliter leur association pour des malvoyants ou des déficients cognitifs ou ayant des troubles de la concentration.

Pour étiqueter un champ, il existe plusieurs solutions.

Utilisation d’une balise label

Il s’agit de la solution standard, à utiliser en priorité, pour étiqueter un champ de formulaire, la mieux supportée par les outils d’assistance.

Utiliser une balise label et renseigner son attribut for avec l’id du champ de formulaire auquel elle est associée. C’est important pour les utilisateurs de lecteurs d’écran, mais cela permet également d’améliorer l’ergonomie du formulaire. En effet, lorsque le label est correctement associé à son champ de formulaire, il devient possible de cocher une case à cocher ou de sélectionner un bouton radio en cliquant directement sur son label.


            <input type="checkbox" id="cgu">
            <label for="cgu">Veuillez accepter les <abbr>CGU</abbr>.</label>
      

Dans de rares cas, il peut s’avérer qu’il ne soit pas nécessaire d’afficher un libellé (champ de recherche par exemple). Prévoir tout de même un libellé pour les lecteurs d’écran et le masquer en utilisant une des 3 méthodes suivantes :

Classe CSS de masquage accessible

C’est la méthode utilisée sur le second champ de saisie de l’adresse dans cet exemple de formulaire accessible (utilisation de la classe sr-only de Bootstrap/Boosted).

Code CSS

   
      .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap; /* added line */
            border: 0;
      }
      

Code HTML

      
      <label for="adresse">Adresse *</label>
      <input name="adresse" data-displayname="adresse" class="form-control" id="adresse" aria-required="true" type="text">
      <label class="sr-only" for="complement">Complément d’adresse</label>
      <input class="form-control" id="complement" type="text">
      

L’utilisation du masquage accessible permet de masquer l’élément à l’écran tout en conservant sa vocalisation par les outils d’assistance (AT). Attention, ne pas utiliser du masquage CSS classique (display: none; ou visibility: hidden;) car l’élément sera masqué également pour les lecteurs d’écran.

Consultez l’exemple sur le masquage accessible pour plus d’information.

Utilisation d’un attribut title

L’attribut title n’est pas réellement utile pour l’accessibilité sauf dans ce cas précis. Il permet d’étiqueter un champ de formulaire de manière robuste. Il déclenchera également l’affichage d’une info-bulle au survol de l’élément avec la souris.


      <input type="text" title="Rechercher dans le catalogue">
      

À noter : l’attribut title positionné ailleurs que sur un champ de formulaire (par exemple sur une image) ne fournit aucune garantie que son contenu sera vocalisé par un lecteur d’écran.

Utilisation de l’attribut ARIA aria-label ou aria-labelledby

Les attributs aria-label et aria-labelledby peuvent être utilisés pour étiqueter des champs de formulaire et leur support est bon dans les navigateurs :


      <span id="label-adress">Adresse *</span>
      <input type="text" aria-labelledby="label-adress">            
      <input type="text" aria-label="complément d’adresse">
      

Par exemple, pour entrer une date sous forme de 3 champs, un pour le jour, un pour le mois et un pour l’année, voici une solution possible :


           <label for="jourNaissance">Date de naissance</label>
           <input type="text" id="jourNaissance" aria-label="jour de naissance (JJ)">
           <input type="text" id="adresse" aria-label="mois de naissance (MM)">
           <input type="text" id="ville" aria-label="année de naissance (AAAA)">
           

Le placeholder et le label

L’attribut placeholder ne peut pas être utilisé à la place d’un label. En effet :

En revanche, le placeholder peut servir de guide, d’aide pour remplir le champ sans que cette information soit absolument nécessaire (par exemple, proposer une valeur attendue valide) : ne pas hésiter à l’utiliser pour ce type de besoin.


      <div class="form-group">                                    
            <label for="numero-serie">Veuillez saisir le numéro de série *</label>
            <input type="text" name="serie" data-displayname="numéro de série" class="form-control" id="numero-serie" aria-describedby="helpblock" 
            aria-required="true" placeholder="exemple : TS-0000">
      </div>
    

Utilisation de l'attribut autocompleted

Pour tout champ dont le type est listé dans 7. Input Purposes for User Interface Components, il faut remplir l'attribut autocompleted du champ avec la valeur adéquate.


    <div class="form-group">                                    
          <label for="lname">Nom de famille :</label>
          <input id="lname" type="text" autocomplete="family-name" class="form-control">
          <label for="cc-num">Numéro de carte de crédit :</label>
          <input type="text" id="cc-num" autocomplete="cc-number" class="form-control">
    </div>
  

Préciser les champs obligatoires

Il faut bien sûr clairement indiquer pour tout utilisateur le fait qu’un champ soit obligatoire. Ceci peut être fait en utilisant un signe distinctif (mention, pictogramme, image, etc.) mais aussi avec un simple texte (par exemple, « obligatoire ») dans le label du champ. Rajouter, si besoin, une mention au début du formulaire pour indiquer que le symbole ou le pictogramme signale un champ obligatoire.

Les champs obligatoires doivent aussi être indiqués dans le code à l’aide de l’attribut HTML5 required ou de l’attribut ARIA aria-required notamment pour les déficients visuels.


      <input type="text" name="telephone" required>
      <input type="text" name="telephone" aria-required="true">
     

Préciser le type ou le format attendu

Lorsque c’est nécessaire, préciser dans le label du champ le type ou le format de la donnée attendu. Pour que cette information soit vocalisée automatiquement par les lecteurs d’écran, vous pouvez donc mettre ces informations dans la balise label ; sinon utiliser un attribut aria-describedby pour référencer du texte hors du label.


      <div class="form-group">                                    
            <label for="numero-serie">Veuillez saisir le numéro de série *</label>
            <input type="text" id="numero-serie" aria-describedby="helpblock" aria-required="true">
      </div>
      <span id="helpblock" class="help-block">Numéro de série commençant par "TS-" suivi de 4 chiffres (exemple: "TS-4521").</span>           
     

Regrouper les informations de même nature

Les champs de même nature doivent être regroupés, si nécessaire (champs ayant la même étiquette ou étiquette insuffisante à elle seule pour comprendre quoi mettre dans le champ), à l’aide d’une balise fieldset. Le fieldset doit également posséder comme premier enfant une légende explicite (balise legend). Le fieldset/legend est nécessaire, notamment, lorsque le legend est utile à la compréhension ou l’individualisation (différencier des label identiques dans un même formulaire) des balises label incluses dans le fieldset.


      <fieldset>                                    
            <legend>Couleur du capot de votre téléphone</legend>
            <input type="radio" name="couleur" id="blanc" checked>
            <label for="blanc">Blanc</label>
            <input type="radio" name="couleur" id="noir">
            <label for="noir">Noir</label>
      </fieldset>
     

      <fieldset>                                    
            <legend>Adresse de livraison</legend>
            <label for="nom">Contact</label>
            <input type="text" id="nom">
            <label for="adresse">Adresse</label>
            <input type="text" id="adresse">
            <label for="ville">Ville</label>
            <input type="text" id="ville">
      </fieldset>
      
    <fieldset>                                    
            <legend>Adresse de facturation</legend>
            <label for="nom1">Contact</label>                                                 
            <input type="text" id="nom1">
            <label for="adresse1">Adresse</label>
            <input type="text" id="adresse1">
            <label for="ville1">Ville</label>
            <input type="text" id="ville1">
      </fieldset>
     

Contrôle de saisie

Lors de la validation, si des champs obligatoires ne sont pas renseignés, ou si le format de la donnée saisie n’est pas valide, il faut prévenir l’utilisateur.

Utiliser l’attribut aria-invalid pour indiquer une erreur de saisie.

Indiquer dans le code les champs en erreur.


      <input type="text" name="telephone" aria-invalid="true">
     

Annoncer que le formulaire est incomplet ou qu'il existe des erreurs

Pour remonter globalement les erreurs, l'impossibilité de valider un formulaire car des champs obligatoires ne ont pas remplis ou tout autre retour général à faire sur un formulaire, la solution à privilégier est un message de statut, d'état ou contextuel.

Ce type de message permet, même aux utilisateurs de technologies d'assistance (AT) d'être notifié du message lors de la soumission du formulaire. Pour ces message de statut, le focus doit ,être mis sur le titre du message (s'il existe sinon, sur la première erreur de la liste), et chaque erreur doit avoir un lien vers le champ en erreur. De plus, pour que le message soit annoncé aux utilisateur d'AT sans que le focus soit dessus, on utilise le rôle ARIA alert


            <div role="alert">
                  <h2>Deux erreurs dans le formulaire</h2>
                  <ul>
                        <li>
                              <a href="#nom" id="nom_error">
                                    Le Nom de famille est un champ obligatoire, merci de le remplir.
                              </a>
                        </li>
                        <li>
                              <a href="#date" id="date_error">
                                    Le champ Date de naissance doit respecter le format JJ/MM/AAAA, par exemple 13/07/2008.
                              </a>
                        </li>
                  </ul>
                </div>           
           

Avertir l’utilisateur au niveau du champ en cas d’erreur de saisie

Si des erreurs de saisie empêchent la validation du formulaire, il faut en avertir l’utilisateur. Bien souvent des messages apparaissent à l’écran, mais par défaut ils ne sont pas vocalisés au lecteur d’écran. Une des solutions consiste à déplacer automatiquement le focus dans le premier champ en erreur. Ceci aura pour effet de faire vocaliser le ou les libellés ou étiquettes du champ de saisie en question.

Dans cet exemple de formulaire accessible, les messages d’erreurs sont déclarés comme des label et sont associés aux champs de saisie. Ainsi lorsque le focus arrive dans un champ, le lecteur d’écran vocalise le libellé du champ puis le message d’erreur associé.

Ce mécanisme est pris en charge directement par le plugin jQuery validate.


      <label for="numero-serie">Veuillez saisir le numéro de série *</label>
      <input aria-invalid="true" class="error" id="numero-serie" aria-describedby="helpblock" aria-required="true" type="text">
      <label for="numero-serie" class="error" id="numero-serie-error">Le champ numéro de série est obligatoire.</label>            
     

Attention, bien qu’il soit tout à fait valide d’utiliser plusieurs label pour un même champ de formulaire, il est pour le moment conseillé de doubler avec un attribut aria-labelledby. Consulter l’article de Steve Faulkner pour plus d’information sur le sujet.

      
      <label id="serie-label" for="numero-serie">Veuillez saisir le numéro de série *</label>
      <input aria-invalid="true" class="error" aria-labelledby="serie-label serie-error" id="numero-serie" aria-describedby="helpblock" aria-required="true" type="text">
      <label id="serie-error" for="numero-serie" class="error" id="numero-serie-error">Le champ numéro de série est obligatoire.</label>                    
     

Afficher des messages d’erreur explicites et, si besoin, suggérer des corrections

Les messages d’erreur affichés doivent être pertinents et, si besoin, proposer des exemples d’entrée valide.

Exemple valide :
capture d’écran d’un formulaire affichant des messages d’erreur valides

Exemple non-valide :
capture d’écran d’un formulaire affichant des messages d’erreur non-valides