WCAG 2.1 - 4.1.3
Status Messages
In Inhalten, die mit Auszeichnungssprachen implementiert sind, können Statusmeldungen programmgesteuert über Rollen oder Eigenschaften bestimmt werden, sodass sie von unterstützenden Technologien dem Benutzer präsentiert werden können, ohne den Fokus zu erhalten.
Inhalt
Was Bedeutet das Success Criterium 4.1.3 - Status Messages?Warum ist es so wichtig, das Success Criterium 4.1.3 - Status Messages zu beachten?Was hat das Success Criterium 4.1.3 - Status Messages mit dem BFSG zu tun?Lösungen für 4.1.3 - Status Messages anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 4.1.3 - Status Messages?Was Bedeutet das Success Criterium 4.1.3 - Status Messages?
Success Criterion 4.1.3 – Status Messages schreibt vor, dass wichtige Statusmeldungen – also Hinweise, die Nutzer*innen (besonders Screenreader-Nutzern) über z.B. Fehler, Bestätigungen oder Änderungen informieren – programmatisch so eingebunden werden, dass sie ohne Fokuswechsel oder andere Interaktion erfasst werden können. Das bedeutet: Wenn sich der Zustand einer Seite ändert (z.B. nach einem erfolgreichen Formularversand), sollen diese Änderungen automatisch gemeldet werden, auch wenn der Fokus zum Beispiel noch auf dem Formularfeld bleibt.
Technisch wird dies meist mithilfe von ARIA-Live-Regionen (z.B. aria-live) gelöst. Dadurch erkennen Screenreader automatisch, dass es eine neue Information gibt, und lesen diese sofort vor.
Warum ist es so wichtig, das Success Criterium 4.1.3 - Status Messages zu beachten?
Viele Nutzer*innen mit Screenreader oder anderen Hilfsmitteln erfahren ohne diese Statusmeldungen nicht, dass sich etwas auf der Seite geändert hat. Zum Beispiel würden sie nach dem Absenden eines Formulars keine Bestätigung oder Fehlermeldung wahrnehmen, sofern diese nur visuell angezeigt wird. Statusmeldungen, die ordentlich zugänglich gemacht werden, helfen ihnen daher, sich besser auf der Website zurechtzufinden und keinen wichtigen Kontext zu verpassen.
Was hat das Success Criterium 4.1.3 - Status Messages mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Webseitenbetreiber, alle digitalen Angebote für Menschen mit Behinderungen nutzbar zu machen. Da Statusmeldungen wesentlich für eine barrierefreie Nutzerführung sind, ist dieses Kriterium laut WCAG Pflicht. Wird dies nicht erfüllt, entsteht eine Zugangshürde: Nicht alle Nutzer*innen erhalten die nötigen Informationen und können digitale Angebote nicht vollständig verwenden. Eine BFSG-Konformität ist dann nicht gegeben.
Lösungen für 4.1.3 - Status Messages anhand von Codebeispielen
Falscher Code
<form id="myform">
<input type="text" name="email" />
<button type="submit">Abschicken</button>
</form>
<p id="status">Ihre Anmeldung war erfolgreich!</p>Korrekter Code
<form id="myform">
<input type="text" name="email" />
<button type="submit">Abschicken</button>
</form>
<p id="status" aria-live="polite">Ihre Anmeldung war erfolgreich!</p>Im schlechten Beispiel gibt es keine ARIA-Live-Angabe: Screenreader erkennen daher die Statusmeldung nicht automatisch. Im guten Beispiel informiert das Attribut `aria-live="polite"` den Screenreader, dass sich der Textinahlt in diesem Element dynamisch ändern kann und vorgelesen werden sollte, sobald sich etwas ändert.
Falscher Code
<div class="status-message" style="display:none;">Es ist ein Fehler aufgetreten.</div>
<button onclick="showMessage()">Senden</button>Korrekter Code
<div class="status-message" aria-live="assertive" style="display:none;">Es ist ein Fehler aufgetreten.</div>
<button onclick="showMessage()">Senden</button>Wird eine Fehlermeldung per JavaScript eingeblendet, aber nicht als Live-Region gekennzeichnet, hören Screenreader-Nutzende diese Anzeige nicht. Mit `aria-live="assertive"` wird die Meldung sofort vorgelesen, ohne dass Nutzer*innen aktiv darauf fokussieren müssen.
Wie löse ich Verstöße gegen das Success Criterium 4.1.3 - Status Messages?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.