live-region-announcements
Live-Regionen sollten Statusmeldungen ansagen können
Markiert eine Live-Region, die vor assistiven Technologien verborgen ist oder busy bleibt, und, mit dem Live-Region-Hook, eine, die mit ihrem Text hinzugefügt oder in einem Zug angezeigt und gefüllt wird, zur manuellen Prüfung.
Anwendbarkeit. Live-Regionen, die die Seite zeichnet: Elemente, deren aria-live polite oder assertive ist oder, ohne aria-live, deren Rolle status, log oder alert ist, sowie <output>-Elemente. aria-live="off" schaltet jede von ihnen ab. Eine Live-Region, die mit display: none, visibility: hidden oder [hidden] ausgeblendet ist, bleibt außen vor: Eine Region, die darauf wartet, angezeigt zu werden, ist die Seite im Ruhezustand. Eine Live-Region hinter einem geöffneten modalen <dialog>, den der Browser inert macht, wird einbezogen, obwohl andere Regeln solche Inhalte auslassen. Mit dem Live-Region-Hook (liveRegionHookScript) auch die Live-Regionen, bei denen er gesehen hat, dass sie ihren Text auf eine Weise erhielten, die häufig nicht angesagt wird, ob sie noch auf der Seite sind oder nicht.
Erwartung. WCAG 4.1.3: Eine Statusmeldung kann den Nutzenden durch assistive Technologien präsentiert werden, ohne den Fokus zu erhalten, und das leistet eine Live-Region, wenn sich ihr Inhalt ändert, während assistive Technologien sie erreichen können.
- Eine gezeichnete Live-Region in oder auf aria-hidden="true" oder inert oder hinter einem geöffneten modalen <dialog>: cantTell (
LIVE_REGION_HIDDEN). Sie ist nicht im Accessibility Tree, daher kann nichts, was sie erhält, angesagt werden (hinter dem Dialog, solange der Dialog geöffnet ist). - Eine Live-Region mit aria-busy="true" zum Zeitpunkt des Scans: cantTell (
LIVE_REGION_BUSY). Assistive Technologien können ihre Änderungen zurückhalten, bis aria-busy aufgehoben ist. - Vom Hook erfasst, eine Live-Region, die der Seite mit bereits enthaltenem Text hinzugefügt wurde, außer role="alert": cantTell (
LIVE_REGION_INSERTED_WITH_CONTENT). Screenreader sagen häufig Änderungen an einer Region an, die sie bereits kennen, nicht den Inhalt einer neuen Region. - Vom Hook erfasst, eine Live-Region, die ausgeblendet war und in derselben Task angezeigt wurde und ihren Text erhielt: cantTell (
LIVE_REGION_SHOWN_AND_FILLED). Sie war nicht im Accessibility Tree, als der Text ankam. - Andernfalls: pass.
Prüfen Sie, ob die Seite die Region für Statusmeldungen nutzt und ob sie in der Seite steht, angezeigt wird und erreichbar ist, bevor sich ihr Text ändert.
Was ein Befund meldet.
politeness: die der Region,politeoderassertive.hiddenBy: beiLIVE_REGION_HIDDENaria-hidden,inertodermodalfür eine Region hinter einem geöffneten modalen <dialog>. Eine Region hinter dem Dialog istmodal, was sie sonst auch ausblendet (inert oder aria-hidden auf ihr oder darüber, mit oder ohne includeHiddenElements): Solange der Dialog geöffnet ist, ist er die wirksame Ursache.text: bei den beiden Befunden des Hooks der Text, den die Region erhielt (bis zu 300 Zeichen).removed: bei den beiden Befunden des Hooks true, wenn die Region beim Scan nicht mehr auf der Seite war; das Vorkommen liegt dann auf dem Dokumentelement, undregionbeschreibt sie (tag,role,id).
Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.
Beispiele
<div role="status"></div>
Eine leere status-Region, in der Seite und erreichbar, bevor eine Meldung eintrifft.
<div aria-hidden="true"><div role="status"></div></div>
Die Region ist vor assistiven Technologien verborgen, daher kann nichts, was sie erhält, angesagt werden. Eine Person prüft, ob die Seite sie für Statusmeldungen nutzt.
So prüfen Sie es
Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.
LIVE_REGION_BUSY
- Suchen Sie die im Bericht genannte Live-Region; sie hatte beim Scannen der Seite aria-busy="true".
- Lösen Sie die Aktion aus, die die Region aktualisiert, untersuchen Sie sie dann in den Entwicklertools und prüfen Sie, ob aria-busy nach Abschluss der Aktualisierung auf false wechselt oder entfernt wird.
- Wiederholen Sie die Aktion bei laufendem Screenreader und achten Sie auf die Meldung.
- Hören Sie von diesem Bereich nichts, prüfen Sie, ob die Seite dieselbe Meldung auf anderem Weg ansagt, zum Beispiel aus einem anderen Statusbereich, den der Screenreader vorliest. Das zählt nur, wenn Sie die ganze Meldung hören, ohne den Fokus zu bewegen.
Bestanden. Der Screenreader sagt die Meldung an, ohne dass der Fokus wandert, weil aria-busy nach der Aktualisierung entfernt wird oder weil die Seite dieselbe Meldung auf anderem Weg ansagt.
Nicht bestanden. aria-busy bleibt true, der Screenreader hält die Meldung zurück oder überspringt sie, und die Seite sagt sie auf keinem anderen Weg an; das verstößt gegen WCAG 4.1.3.
LIVE_REGION_HIDDEN
- Suchen Sie die im Bericht genannte Live-Region und notieren Sie, was sie verbirgt (der Bericht sagt es): aria-hidden="true" oder inert an ihr oder einem Vorfahren, oder ein modaler Dialog, der vor ihr geöffnet ist.
- Prüfen Sie, ob beim Scannen der Seite ein modaler Dialog geöffnet war; falls ja, notieren Sie, ob die Seite in die Region schreibt, während er geöffnet ist, schließen Sie ihn dann und sehen Sie, ob die Region noch verborgen ist.
- Lösen Sie bei laufendem Screenreader die Aktion aus, die die Region aktualisiert (ein Formular absenden, etwas in den Warenkorb legen, eine Suche ausführen).
- Achten Sie auf die Meldung. Hören Sie nichts, prüfen Sie im Bereich Barrierefreiheit der Entwicklertools, ob dieser Bereich oder ein anderer Statusbereich mit derselben Meldung im Baum ist, wenn sich der Text ändert.
Bestanden. Der Screenreader sagt die Meldung an, ohne dass der Fokus wandert, weil der Bereich beim Textwechsel nicht verborgen ist (oder nie für Meldungen genutzt wird) oder weil ein anderer, nicht verborgener Statusbereich dieselbe Meldung trägt.
Nicht bestanden. Der Bereich ist noch durch aria-hidden, inert oder einen offenen modalen Dialog verborgen, wenn die Meldung eintrifft, und nichts anderes sagt sie an, der Screenreader sagt also nichts; das verstößt gegen WCAG 4.1.3.
LIVE_REGION_INSERTED_WITH_CONTENT
- Suchen Sie die Meldung, die der Bericht zitiert, und die Aktion, die sie anzeigt (der Bericht nennt Text und Region).
- Starten Sie einen Screenreader und führen Sie dann diese Aktion aus.
- Achten Sie auf die Meldung, ohne den Fokus dorthin zu bewegen.
- Wird sie nicht vorgelesen, prüfen Sie in den Entwicklertools, ob die Seite die Region bereits gefüllt einfügt; eine leere Region sollte zuerst auf der Seite stehen und der Text später hineingeschrieben werden.
Bestanden. Der Screenreader sagt die Meldung an, wenn sie erscheint, ohne dass sich der Fokus bewegt.
Nicht bestanden. Die Meldung erscheint auf dem Bildschirm, aber der Screenreader sagt sie nicht an, weil die Region mit bereits enthaltenem Text eingefügt wurde; das verstößt gegen WCAG 4.1.3 (ARIA22).
LIVE_REGION_SHOWN_AND_FILLED
- Suchen Sie die Meldung, die der Bericht zitiert, und die Aktion, die sie anzeigt.
- Starten Sie einen Screenreader und führen Sie dann diese Aktion aus.
- Achten Sie auf die Meldung, ohne den Fokus dorthin zu bewegen.
- Wird sie nicht vorgelesen, prüfen Sie in den Entwicklertools, ob die Region bis zu dem Moment verborgen ist, in dem ihr Text gesetzt wird; sie sollte sichtbar (oder vorhanden und leer) sein, bevor der Text eintrifft.
Bestanden. Der Screenreader sagt die Meldung an, wenn sie erscheint, ohne dass sich der Fokus bewegt.
Nicht bestanden. Die Meldung erscheint, aber der Screenreader sagt sie nicht an, weil die Region im selben Moment angezeigt und gefüllt wurde; das verstößt gegen WCAG 4.1.3 (ARIA22).