Formulaires

31 janvier 2023

RGAA : Formulaires

Étiquette de champ
Information complémentaire
Nom visible et nom accessible
Regroupement de champs
Liste de choix
Intitulés de bouton
Champ obligatoire et facultatif
Aides et contrôles de saisie
Personnaliser les messages d’erreurs natif
Modification, mises à jour ou récupération des données
Champs avec saisi automatique

Étiquette de champ

Une étiquette pertinente :

label visible
ou un bouton visible
ou, a minima, un attribut title

Le placeholder ne remplace pas une étiquette visible.
Si title et placeholder alors leur contenu sont identiques
Les labels et les champs doivent être accolés, pas de définition claire (à l'appréciation de chacun !)

Dans le code, le champ doit avoir un nom accessible

aria-label
aria-labelledby / id
<label> avec relation for / id
title

Le placeholder n’est pas un nom accessible robuste

Information complémentaire

Ajouté le complément directe dans l'étiquette de champ
L'utilisation d'une double <label for=""> est déconseiller
```
<label for="name">
    <strong>Prénom</strong><br>
    40 caractere max
</label>
<input id="name"/>
```

ou une combinaison de label et de aria-describedby

<label for="name">Prénom</label>
<input id="name" aria-describedby="info"/>
<p id="info">40 caractere max</p>

ou utilisé un aria-labelledby multiple

<p id="label">Prénom</p>
<input type="text" aria-labelledby="label info"/>
<p id="info">40 caractere max</p>

Nom visible et nom accessible

Le nom visible doit être contenu dans le nom accessible
Attention à l'algorithme de calcul du nom accessible

Regroupement de champs

Réunir les éléments communs avec :

<fieldset> et titrer avec <legend>

<fieldset>
    <legend>Adresse de facturation</legend>
    [champs ...]
</fieldset>

ou une div avec le role="group" et titrer avec aria-label ou aria-labelledby

<div role="group" aria-labelledby="toto">
    <p id="toto">Adresse de livraison</p>
    [champs ...]
</div>

La légende peut être masqué mais doit être restitué par les lecteurs d'écran

Exemple courant de regroupement à faire :

Ensemble de Radio
Ensemble de Chexbox
Période d'une date (debut, fin)
Ajouter un personne, se répétant, (nom, prénom, age)

Liste de choix

Regrouper les items de même nature d’une liste de choix <select> si nécessaire

<select>
    <optgroup label="Véhicules">
        <option>Voiture</option>
        <option>Motos</option>
        …
    </optgroup>
    <optgroup label="Immobilier">
        <option>Maison</option>
        <option>Appartements</option>
        …
    </optgroup>
</select>

Intitulés de bouton

L'intitulé (nom accessible) est pertinent ;
- «Valider» : ne permet pas de comprendre ce qui va se passer
- «Calculer la simulation» : pertinent
Si le bouton possède un nom visible alors il est aussi contenu dans le nom accessible

<input type="submit" value="Envoyer le message" />

<input type="image" src="loupe.png" alt="Rechercher sur le site">

<input type="submit" value="OK" title="Envoyer le message" />

<input type="submit" aria-label="Effacer mes données"/>

<input type="submit" aria-labelledby="desc-btn" />
<span id="desc-btn">Envoyer le message</span>

Champ obligatoire et facultatif

Tout est obligatoire : Mettre en début de formulaire que tous les champs sont obligatoires
Mixte : Ajouter une astérisque dans les champs obligatoire + mettre une légende en haut du formulaire
Majorité de facultatif : Possibililité de mettre les champs optionnels directement après le label

Ou au moyen d'un texte relié avec aria-describedby

<label for="name">Prénom</label>
<input id="name" aria-describedby="required"/>
<p id="required">Champs obligatoire</p>

Il faut une indication visible, un attribut required ne suffit pas !

Aides et contrôles de saisie

Format attendu : fournir le format de saisie
Contrôle de saisie : fournir un exemple de saisie

Directement dans l'étiquette du champ concerné
Ou via l’attribut aria-describedby="id_dun_texte", voir Information complémentaire
L'indication doit être visible

Message d'erreur

Le message doit être visible est restitué
Les textes liés par les propriétés aria-labelledby ou aria-describedby font partie des propriétés de l’élément, ils sont donc toujours disponibles, y compris lorsqu’ils sont cachés par CSS avec display:none ou visibility:hidden

Champ obligatoire : format attendu à fournir (a faire de facon global si possible)
Message générique dans le titre de la page : « erreur sur le formulaire » est très suffisant

Dans le message d'erreur on peut donner :
- un exemple réel 01/02/23 au lieu du JJ/MM/AAAA, pour une date c'est clairement mieux, mais pour une adresse email c'est moins intéressant
- de l'aide à la complétion, pas obligatoire mais mieux
Les exemples de format ne doivent pas être que dans les placeholders car ce n'est pas accessible

Personnaliser les messages d’erreurs natif

L'API Constraint validation permet de personnaliser les messages d’erreurs générés par les type d’input particuliers.

<form>
    <label class="label" for="emailform">Votre email:</label>
    <p><input type="email" name="email" id="emailform"></p>
    <input type="submit" value="valider">
</form>

var email = document.getElementById("emailform");
email.addEventListener('invalid', function() {
    if (this.value.trim() !== '') {
        this.setCustomValidity("Saisie invalide. Exemple valide\n: toto@foobar.com");
    }
}, false);

Modification, mises à jour ou récupération des données

Si le formulaire

modifie ou supprime des données ;
ou transmet des données sensibles, réponses à un examen ;
a des conséquences financières, juridiques.

L'utilisateurs doit pouvoir

vérifier, modifier ou annuler les saisies avant envoie du formulaire ;
ou il existe un mécanisme de confirmation explicite via une case à cocher ou une étape supplémentaire.

Pour les formulaires de signature électronique, type mandat SEPA, la modification peut être désactivé comme le but de ces formulaires est de valider les données saisies précédemment

Champs avec saisi automatique

Pour les champs qui collectent des informations personnelles sur l’utilisateur, la nature du champ (finalité) est déterminable à partir du code (attributs/propriétés).

Utilisation de l’attribut autocomplete

La liste des valeurs disponibles est fournie par la spécification WCAG 2.1 :

name - Nom complet ;
honorific-prefix - Abréviation, civilité ou titre ;
given-name - Prénom ;
additional-name - Prénoms additionnels ;
family-name - Nom de famille ;
honorific-suffix - Suffixe honorifique ;
nickname - Surnom, diminutif ;
organization-title - Fonction, intitulé de poste ;
username - Nom d’utilisateur ;
new-password - Nouveau mot de passe (par exemple, lors de la création d’un compte ou d’un changement de mot de passe) ;
current-password - Mot de passe actuel pour le compte identifié par le champ username (par exemple, lors d’une connexion) ;
organization - Nom de l’organisation correspondant à la personne, à l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
street-address - Adresse postale (multiligne, nouvelles lignes conservées) - attention champ textarea attendu ;
address-line1 - Adresse postale (une ligne par champ, ligne 1) ;
address-line2 - Adresse postale (une ligne par champ, ligne 2) ;
address-line3 - Adresse postale (une ligne par champ, ligne 3) ;
address-level4 - Le niveau administratif le plus détaillé, pour les adresses pourvues de quatre niveaux administratifs ;
address-level3 - Le troisième niveau administratif, pour les adresses pourvues d’au moins trois niveaux administratifs ;
address-level2 - Le deuxième niveau administratif, pour les adresses pourvues d’au moins deux niveaux administratifs ;
address-level1 - Le plus large niveau administratif d’une adresse, c’est-à-dire la province dans laquelle se trouve la localité ;
country - Code pays ;
country-name - Nom de pays ;
postal-code - Code postal, code CEDEX (si le CEDEX est présent, ajouter “CEDEX”, et ce qui le suit doit être ajouté dans le champ address-level2) ;
cc-name - Nom complet figurant sur le moyen de paiement ;
cc-given-name - Prénom figurant sur le moyen de paiement ;
cc-additional-name - Prénoms additionnels figurant sur le moyen de paiement cc-family-name - Nom de famille figurant sur le moyen de paiement ;
cc-number - Code identifiant le moyen de paiement (e.g., un numéro de carte bancaire) ;
cc-exp - Date d’expiration du moyen de paiement ;
cc-exp-month - Le mois de la date d’expiration du moyen de paiement ;
cc-exp-year - L’année de la date d’expiration du moyen de paiement ;
cc-csc - Code de sécurité du moyen de paiement (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc.) ;
cc-type - Type de moyen de paiement (e.g. Visa) ;
transaction-currency - La devise qui a la préférence de l’utilisateur lors d’une transaction ;
transaction-amount - Le montant qui a la préférence de l’utilisateur lors d’une transaction (e.g., en réponse à une enchère ou à un prix soldé) ;
language - Langue préférée ;
bday - Date d’anniversaire ;
bday-day - Le jour de la date d’anniversaire ;
bday-month - Le mois de la date d’anniversaire ;
bday-year - L’année de la date d’anniversaire ;
sex - Identité sexuelle ;
url - Page d’accueil ou une autre page Web correspondant à l’organisation, la personne, l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
photo - Photographie, icône ou une autre image correspondant à l’organisation, la personne, l’adresse ou à l’information de contact dans les autres champs associés avec ce champ ;
tel - Numéro de téléphone complet, y compris le code pays ;
tel-country-code - Code pays du numéro de téléphone ;
tel-national - Numéro de téléphone sans la partie code pays, avec un préfixe interne au pays, s’il y a lieu ;
tel-area-code - Indicatif régional du numéro de téléphone, avec un préfixe interne au pays, s’il y a lieu ;
tel-local - Numéro de téléphone sans la partie code pays ni l’indicatif régional ;
tel-local-prefix - La première partie du composant du numéro de téléphone qui suit l’indicatif régional, lorsque ce composant est scindé en deux parties ;
tel-local-suffix - La seconde partie du composant du numéro de téléphone qui suit l’indicatif régional, lorsque ce composant est scindé en deux parties ;
tel-extension - Numéro de téléphone d’un poste interne ;
email - Adresse électronique ;
impp - URL correspondant d’un protocole de messagerie instantanée (par exemple, "aim:goim?screenname=example" ou "xmpp:fred@example.net").