Messages d’état

Ce que cela signifie

Comprendre Messages d’état (en anglais) | Comment satisfaire à Messages d’état (en anglais) (Niveau AA) Dans un contenu implémenté via un langage de balisage, les messages d’état peuvent être déterminés par un programme informatique grâce à un rôle ou des propriétés afin qu’ils puissent être présentés à l’utilisateur par des technologies d’assistance sans recevoir le focus. 5. Conformité § Cette section reprend les exigences de conformité aux WCAG 2.1. Elle explique aussi comment faire une déclaration de conformité, ce qui est optionnel. Finalement, elle décrit la signification du terme compatible avec l’accessibilité puisque la conformité ne peut dépendre que des technologies qui sont utilisées de manière compatible avec l’accessibilité. Le document Comprendre la conformité (en anglais) comprend des explications plus précises sur la notion de compatibilité avec l’accessibilité. 5.1 Interprétation des exigences normatives § Le contenu principal des WCAG 2.1 est normatif et définit les exigences qui ont un impact sur les déclarations de conformité. Les éléments introductifs, les annexes, les sections marquées comme « non normatives », les diagrammes, les exemples et les notes sont informatifs (non normatifs). Les éléments non normatifs fournissent des conseils pour aider à interpréter les règles, mais ne constituent pas des exigences ayant un impact sur une déclaration de conformité. Les mots clés PEUT ( MAY ), DOIT ( MUST ), NE DOIT PAS ( MUST NOT ), NON RECOMMANDÉ ( NOT RECOMMENDED ), RECOMMANDÉ ( RECOMMENDED ), DEVRAIT ( SHOULD ), et NE DEVRAIT PAS ( SHOULD NOT ) doivent être interprétés comme décrit dans . 5.2 Les exigences de conformité § Afin qu’une page Web soit conforme aux WCAG 2.1, toutes les exigences suivantes doivent être satisfaites :

Failing example

<!-- Fails: success toast injected into DOM silently -->
<div id="toast" class="toast">Item added to cart</div>
<script>
  document.getElementById("toast").textContent = "Added!";
</script>

How to fix it

<!-- Pass: ARIA live region announced to screen readers -->
<div id="toast" role="status" aria-live="polite"
     aria-atomic="true" class="toast"></div>
<script>
  // Injecting text into a live region triggers announcement
  document.getElementById("toast").textContent = "Item added to cart";
</script>

More Robust criteria

• 4.1.2Nom, rôle et valeurA