Utilisation de « Aria-invalid » pour signaler une erreur

Sailesh Panchang

By 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

Test your custom elements and trust the results with Axe-core’s support for ElementInternals

Wilco Fiers 400 x 400 1 300 x 300
August 27, 2026 By Wilco Fiers

If you're a large enterprise organization with accessibility issues resulting from interoperability challenges, moving to ElementInternals is a savvy move. You can standardize, and safely test. And, with Axe-core now supporting ElementInternals, you can test those components and trust the results.

Lire l'article
A testing flow, depicting a single custom button scanned by Axe-core for React, Angular or Vue frameworks

Deque and Microsoft: Two decades of shaping the future of accessibility

cropped preety kumar400x400 300x300 1 1.jpg
August 25, 2026 By Preety Kumar

What started nearly two decades ago as conversations between two people passionate about improving accessibility across Microsoft's digital experiences has grown into a lasting partnership built on shared learning, mutual respect, and a common belief that accessibility should be built into every stage of software development.

Lire l'article
Preety Kumar and Jenny Lay-Flurrie conducting an interview, with the Seattle skyline in the background.