Répondre aux événements de formulaire
Vous pouvez utiliser JavaScript pour répondre aux interactions des utilisateurs dans votre formulaire, afficher des champs supplémentaires, envoyer un formulaire et bien plus encore.
Aider les utilisateurs à remplir d'autres options de formulaire
Imaginez que vous ayez créé un formulaire d'enquête. Une fois qu'un utilisateur a sélectionné une option, vous souhaitez afficher un <input> supplémentaire pour poser une question spécifique liée à la sélection.
Comment n'afficher que l'élément <input> pertinent ?
Vous ne pouvez utiliser JavaScript pour afficher un <input> que si l'élément <input type="radio"> associé est actuellement sélectionné.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Examinons le code JavaScript de la démonstration.
Avez-vous remarqué les attributs aria-controls et aria-expanded ?
Utilisez ces attributs ARIA pour aider les utilisateurs de lecteurs d'écran à comprendre quand une commande de formulaire supplémentaire est affichée ou masquée.
S'assurer que les utilisateurs peuvent envoyer un formulaire sans quitter une page
Imaginons que vous ayez un formulaire de commentaire. Lorsqu'un lecteur ajoute un commentaire et envoie le formulaire, l'idéal est qu'il puisse immédiatement voir le commentaire sans actualiser la page.
Pour ce faire, écoutez l'événement onsubmit, puis utilisez event.preventDefault() pour empêcher le comportement par défaut et envoyez FormData à l'aide de l'API Fetch.
Votre script backend peut vérifier si une requête POST semble provenir du navigateur (à l'aide de l'attribut action d'un élément de formulaire, où method="post") ou de JavaScript, comme une requête fetch().
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
Toujours informer les utilisateurs de lecteurs d'écran des modifications apportées au contenu dynamique
Ajoutez un élément avec l'attribut aria-live="polite" à votre code HTML, puis mettez à jour le contenu de l'élément après une modification.
Par exemple, remplacez le texte par "Votre commentaire a bien été publié" une fois qu'un utilisateur a envoyé un commentaire.
En savoir plus sur les régions actives ARIA
Validation avec JavaScript
Assurez-vous que les messages d'erreur correspondent au style et au ton de votre site.
La formulation des messages d'erreur par défaut varie selon les navigateurs.
Comment pouvez-vous vous assurer que le même message est présenté à tous les utilisateurs et qu'il est conforme au style et au ton de votre site ?
Utilisez la méthode setCustomValidity() de l'API Constraint Validation pour définir vos propres messages d'erreur.
S'assurer que les utilisateurs sont informés des erreurs en temps réel
Les fonctionnalités HTML intégrées de validation des formulaires sont idéales pour avertir les utilisateurs des champs de formulaire non valides avant que les données ne soient envoyées à votre backend. Ne serait-il pas intéressant d'informer les utilisateurs dès qu'ils quittent un champ de formulaire ?
Écoutez l'événement blur qui se déclenche lorsqu'un élément n'est plus sélectionné, puis utilisez l'interface ValidityState pour détecter si une commande de formulaire n'est pas valide.
S'assurer que les utilisateurs peuvent voir le mot de passe qu'ils ont saisi
Le texte saisi pour <input type="password"> est masqué par défaut afin de respecter la confidentialité des utilisateurs.
Aider les utilisateurs à saisir leur mot de passe, en affichant l'icône <button> permettant d'activer/de désactiver l'affichage du texte saisi.
Essayer la version de démonstration Pour activer la visibilité du texte saisi, utilisez l'option Show Password (Afficher le mot de passe) <button>.
Comment ça marche ? Lorsque vous cliquez sur Afficher le mot de passe, l'attribut type du champ de mot de passe, qui passe de type="password" à type="text", et le texte <button> devient "Masquer le mot de passe".
Il est important de rendre le bouton Afficher le mot de passe accessible.
Associez <button> à <input type="password"> à l'aide de l'attribut aria-controls.
Pour avertir les utilisateurs du lecteur d'écran si le mot de passe est actuellement affiché ou masqué, utilisez un élément masqué avec aria-live="polite" et modifiez son texte en conséquence.
Il est important que les utilisateurs de lecteurs d'écran sachent quand un mot de passe est affiché et visible par une autre personne regardant leur écran.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
Découvrez comment implémenter une option d'affichage du mot de passe.