ErrorSummary
Le résumé de toutes les erreurs d'un formulaire, en haut, chacune menant vers le champ à corriger.
Sur cette page
Playground
Corrigez 1 champ pour enregistrer
Erreurs
Fond
<div class="feitio-error-summary" role="alert" tabindex="-1"><h3><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Corrigez 1 champ pour enregistrer</h3><ul><li><a href="#playground">Écrivez un nom pour le rappel</a></li></ul></div>Quand l'utiliser
- À chaque fois qu'un formulaire renvoie une erreur, même une seule.
Quand ne pas l'utiliser
- Pour un problème qui ne concerne pas un champ (impossibilité de sauvegarder) : une erreur Notice.
Exemples
Fix 2 fields to save
Name
Time
Sur la page
En haut du contenu, avant le formulaire : la première chose vue et entendue.
Afficher le code
<div class="feitio-error-summary" role="alert" tabindex="-1">
<h2>…Corrija 2 campos para salvar</h2>
<ul>
<li><a href="#nome">Escreva um nome para o agendamento</a></li>
<li><a href="#hora">Use um horário entre 00:00 e 23:59</a></li>
</ul>
</div>Anatomie
Fix 2 fields
- Boîte : l'arrière-plan d'erreur et la ligne rouge qui l'entoure.
- Titre : le nombre de champs et ce qu'il faut faire.
- Liste : un lien par erreur, avec la phrase du champ.
Faire et ne pas faire
Don’t
Oups ! Le formulaire a des erreurs.
Sans la liste, la personne cherche les erreurs, et "Oups" excuse sans aider.
Écriture
- Titre : "Corriger N champs pour sauvegarder", avec le verbe du bouton.
- Éléments : la même phrase que chaque ErrorMessage, dans l'ordre des champs.
Où cela va
- En haut du contenu, après les traces (Breadcrumbs) et avant le titre de page.
- Le titre de l'onglet obtient "Erreur : " devant, donc quiconque revient à l'onglet sait que quelque chose manque.
Accessibilité
role="alert": les lecteurs d'écran annoncent le résumé dès le chargement de la page, et le focus passe directement dessus.- Chaque lien mène à son champ (le premier, dans un groupe), qui prend le focus.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-error-summary" | obligatoire | L'arrière-plan d'erreur et la ligne rouge. |
role="alert" | toujours | Annoncé lorsqu'il apparaît. |
tabindex="-1" | toujours | Ainsi, le focus peut y aller. |
a href | "#id-do-campo" | Chaque erreur mène à son champ. |