Comment configurer l'ARIA pour les erreurs de formulaire

La plupart des formulaires fonctionnent bien pour les utilisateurs voyants, mais échouent pour les personnes utilisant des technologies d'assistance. Un utilisateur voyant voit une bordure rouge et un message d'erreur. Un utilisateur de lecteur d'écran n'entend souvent rien.

Vous pouvez corriger cela avec deux attributs ARIA et une petite région live. Ce changement nécessite moins de 50 lignes de code.

Voici comment relier vos erreurs à vos champs de saisie.

  1. Utilisez aria-describedby Le champ de saisie doit pointer vers l'élément d'erreur. Ajoutez aria-describedby à votre input et définissez sa valeur sur l'ID de votre div d'erreur.

Exemple :

  • ID de l'input : email-input
  • ID de l'erreur : email-error
  • Code : aria-describedby="email-error"

Cela indique au lecteur d'écran de lire le message d'erreur lorsque l'utilisateur met le focus sur le champ. Vous pouvez ajouter plusieurs ID si vous avez également du texte d'aide.

  1. Utilisez aria-invalid Cet attribut indique à l'utilisateur que la saisie est incorrecte. Définissez aria-invalid sur true lorsqu'une erreur apparaît. Définissez-le sur false lorsque l'erreur est effacée.

Une erreur courante consiste à mettre une div de conteneur en rouge tout en ne plaçant aria-invalid que sur l'input. Cela crée une incohérence. Assurez-vous que vos styles visuels et vos attributs ARIA ciblent le même élément.

  1. Ajoutez une région live Si une erreur apparaît alors que l'utilisateur est encore en train de taper, il pourrait ne pas la remarquer. Utilisez aria-live="polite" sur votre div d'erreur.
  • aria-live="polite" indique au lecteur d'écran d'annoncer l'erreur lors d'une pause naturelle.
  • N'utilisez pas « assertive » sauf en cas d'urgence. Les erreurs de formulaire ne sont pas des urgences.
  1. Gérez la validation asynchrone Si vous vérifiez un nom d'utilisateur ou une adresse en arrière-plan, les utilisateurs doivent savoir que le système travaille.
  • Modèle A : Utilisez aria-busy="true" sur l'input pendant que la vérification est en cours.
  • Modèle B : Utilisez une région live cachée pour annoncer les mises à jour de statut comme « Vérification du nom d'utilisateur... »

Le modèle B est plus fiable sur les différents lecteurs d'écran.

Les tests sont obligatoires. Les outils automatisés sont utiles, mais ils ne peuvent pas remplacer les tests manuels. Utilisez NVDA sur Windows ou VoiceOver sur macOS.

Votre liste de contrôle pour les tests :

  • Naviguez avec la touche Tab vers le champ. Le label doit être annoncé.
  • Saisissez une valeur invalide. L'erreur doit être annoncée.
  • Revenez sur le champ avec Tab. Le label doit être annoncé en même temps que l'erreur.
  • Corrigez l'erreur. Le message d'erreur doit disparaître.

Source : https://dev.to/137foundry/how-to-wire-aria-describedby-and-aria-invalid-on-form-errors-without-breaking-your-styles-4583