- Accueil
- > Recueil
- > Quelques notes sur les thématiques du RGAA
- > Formulaires
Formulaires
31 janvier 2023- É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
etplaceholder
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 relationfor
/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 dearia-describedby
<label for="name" aria-describedby="info">Prénom</label> <input id="name"/> <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 lerole="group"
et titrer avecaria-label
ouaria-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" aria-describedby="required">Prénom</label> <input id="name"/> <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.
- Support de l’API par les navigateurs (trés bon)
- Documentation MDN
- Custom Validation Messages for HTML5 Form Constraints
<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 champusername
(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 champtextarea
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 champaddress-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"
).