Utilisation de « Aria-invalid » pour signaler une erreur

Sailesh Panchang

Par Sailesh Panchang

3 janvier 2014

ErreurAria-invalid=true

Définir la propriété `aria-invalid` sur « true » est un moyen simple et rapide d'indiquer qu'un champ n'a pas passé la validation. Cependant, son utilité du point de vue de l'accessibilité se limite aux situations suivantes :

  • L'erreur est tellement évidente à l'œil nu, et
  • Il n'est pas vraiment nécessaire de donner une description détaillée de l'erreur.

On peut citer, à titre d'exemple, les champs dont le libellé ou le texte d'instruction indique expressément :

  • Format des données pour les dates, adresses e-mail, numéros de téléphone, etc.
  • Plage minimale – maximale des valeurs attendues

Il arrive parfois que le texte de remplacement ou le texte par défaut indique également le format de données attendu avant même que l'utilisateur ne tente de remplir le champ (il convient de veiller à ce que cette information soit accessible). Selon le contexte, le format des données ou la plage attendue peuvent être évidents ou clairs d'après l'usage courant et ne sont pas nécessairement mentionnés explicitement dans toutes les situations.

  • La valeur « Aria-invalid » peut également être attribuée à des champs « obligatoires » lorsqu'un utilisateur omet de les remplir.

Notifications d'erreur

Lorsqu’un champ a l’attribut `aria-invalid` défini sur « true », VoiceOver dans Safari annonce « données non valides » lorsque le champ reçoit le focus ; JAWS et NVDA signalent l’erreur comme une « saisie non valide ». Pour les utilisateurs malvoyants utilisant des technologies d’assistance compatibles avec ARIA, ces notifications sont essentielles pour identifier les champs dont la validation a échoué dans les situations décrites ci-dessus.

Cet attribut ARIA doit être défini / activé par programmation. Il ne doit pas être défini sur « true » avant que la validation des données saisies ne soit effectuée ou que le formulaire ne soit envoyé. Définir aria-invalid sur « false » revient à ne pas inclure du tout cet attribut pour le contrôle du formulaire. Dans ce cas, comme on peut s'y attendre, aucune information n'est transmise aux utilisateurs par les technologies d'assistance.

Lorsqu'il est nécessaire d'identifier le champ qui n'a pas passé la validation et d'afficher une description claire de l'erreur, définir l'attribut `aria-invalid` sur « true » est redondant et n'apporte pas grand-chose du point de vue de la conformité en matière d'accessibilité. Dans un tel cas, le simple fait d'indiquer qu'une erreur s'est produite et d'associer par programmation le message d'erreur détaillé au champ concerné permettra de satisfaire aux exigences des critères SC 3.3.1 et SC 1.3.1.

Lorsque la suggestion permettant de corriger l'erreur est présentée à l'utilisateur (afin de respecter la spécification SC 3.3.3, niveau AA), elle peut être formulée de manière à décrire également l'erreur. Là encore, l'attribut `aria-invalid="true"` est superflu.

Dans l'exemple 1, l'attribut `aria-invalid` est utilisé lorsque le code d'identification personnel (PIN), l'adresse e-mail ou la date de début ne respectent pas le format attendu. Un message d'erreur est associé au champ à l'aide de l'attribut `aria-describedby` lorsqu'aucune valeur n'est saisie dans les trois premiers champs ou lorsque la date de début demandée est antérieure à la date actuelle.

Dans l'exemple 2, l'attribut « aria-invalid » a été utilisé sur des champs obligatoires qui ne contiennent aucune donnée.

Référence :

  1. États et propriétés pris en charge : WAI-ARIA 1.1
  2. Aria-required=true : conformité aux WCAG 2.0 ou bonnes pratiques ?

Sailesh Panchang

Consultant principal en accessibilité, Deque Systems

Sailesh Panchang

Sailesh Panchang

L’un des premiers collaborateurs d’ Deque, Sailesh possède une grande expérience dans la réalisation d’évaluations d’accessibilité de contenus Web et de logiciels, en combinant des techniques de test automatisées et manuelles, notamment des revues de code. De plus, il aide les clients d’ Deque à se familiariser avec les outils d’ Dequeet à les utiliser efficacement. Sailesh maîtrise parfaitement l’application des techniques d’accessibilité pour le HTML et WAI-ARIA afin de se conformer à la Section 508, aux WCAG et à des législations telles que l’Air Carrier Access Act (ACAA). Sailesh utilise lui-même des technologies d’assistance et s’appuie sur des logiciels de lecture d’écran tels que JAWS, NVDA, VoiceOver et TalkBack.

Mots-clés :  WAI-ARIA Accessibilité du Web

Recevez les articles de blog directement dans votre boîte mail

Pas de bavardages inutiles, mais des informations concrètes sur l'accessibilité, fournies par des experts qualifiés.

Vous acceptez que Deque , utilise et partage des informations conformément à Dequedéclaration de confidentialité. Vous pouvez modifier votre consentement à tout moment en nous contactant.

En savoir plus sur ce sujet

Pour que votre entreprise prospère à l'ère de l'IA agentique, considérez l'accessibilité comme un élément fondamental de votre stratégie en matière d'IA

Preety Kumar 100 x 150
29 juillet 2026 Par Preety Kumar

Il faut intégrer l'accessibilité dès la première instruction donnée à l'IA pour la rédaction de code, et non pas y remédier a posteriori. Et comme la communauté des personnes en situation de handicap perfectionne depuis des décennies l'interaction homme-machine pour différentes modalités d'entrée et de sortie, son expertise n'est pas seulement importante d'un point de vue moral ; elle est techniquement essentielle pour développer une IA robuste et fiable qui fonctionne réellement.

Lire l'article
Image de type organigramme illustrant l'arborescence de l'accessibilité et son influence sur l'accessibilité centrée sur l'humain et celle centrée sur les agents d'IA.

Pourquoi l'accessibilité numérique est une priorité stratégique pour HSBC

Logo de Deque
28 juillet 2026 Par Deque Systems

Mali Fernando, responsable du groupe « Expérience numérique et accessibilité » chez HSBC, évoque le rôle de l'accessibilité numérique dans l'amélioration de l'expérience bancaire, le renforcement des relations avec la clientèle et la réussite commerciale à long terme.

Lire l'article
Logo HSBC