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 et Microsoft : deux décennies passées à façonner l'avenir de l'accessibilité

image recadrée preety kumar 400x400 300x300 1 1.jpg
25 août 2026 Par Preety Kumar

Ce qui a commencé il y a près de deux décennies par des échanges entre deux personnes animées par la volonté d'améliorer l'accessibilité dans l'ensemble des expériences numériques de Microsoft s'est transformé en un partenariat durable, fondé sur l'apprentissage partagé, le respect mutuel et la conviction commune que l'accessibilité doit être intégrée à chaque étape du développement logiciel.

Lire l'article
Preety Kumar et Jenny Lay-Flurrie mènent un entretien, avec la ligne d'horizon de Seattle en arrière-plan.