aria-expanded-state-mismatch
aria-expanded sollte dazu passen, ob der gesteuerte Inhalt angezeigt wird
Markiert ein Element, dessen aria-expanded-Wert nicht dazu passt, ob die Elemente angezeigt werden, die sein aria-controls nennt, zur manuellen Prüfung.
Anwendbarkeit. Elemente, die die Seite mit aria-expanded="true" oder aria-expanded="false" anzeigt und deren aria-controls mindestens ein Element im selben Baum nennt. Außen vor bleiben:
- eine combobox, deren
aria-controlsihr Popup nennt, das oft auch im zugeklappten Zustand in der Seite bleibt; - gesteuerte Elemente, die das Element selbst enthalten (ein Baumeintrag, der das Elternelement seiner eigenen Gruppe nennt).
Erwartung. aria-expanded teilt assistiven Technologien mit, ob der Inhalt angezeigt wird, den das Element steuert. Sagt es das Gegenteil dessen, was die Seite zeigt, erfahren Screenreader-Nutzende, ein Bereich sei geschlossen, während er offen ist, oder umgekehrt.
aria-expanded="false", und jedes Element, dasaria-controlsnennt, wird angezeigt: cantTell (EXPANDED_FALSE_CONTROLLED_SHOWN).aria-expanded="true", und jedes Element, dasaria-controlsnennt, ist ausgeblendet: cantTell (EXPANDED_TRUE_CONTROLLED_HIDDEN).- Andernfalls: pass.
Ein Element gilt als ausgeblendet, wenn es nicht im Accessibility Tree ist: display: none, visibility: hidden, hidden, ein geschlossenes <details>, content-visibility: hidden, inert oder aria-hidden="true" auf ihm oder einem Vorfahren und, im Browser, eine eigene Box, die auf keine Höhe oder Breite zusammengefallen ist und deren Überlauf abgeschnitten wird (ein mit height: 0 animierter Akkordeon-Bereich). Ein auf andere Weise zugeklappter Bereich (eine Transformation, die Höhe eines Vorfahren) gilt als angezeigt, und der Inhalt, den ein Steuerelement aufklappt, kann im zugeklappten Zustand sichtbar bleiben (ein Absatz, den line-clamp auf zwei Zeilen kürzt); deshalb ist ein Befund eine Frage.
Was ein Befund meldet.
ariaExpanded:trueoderfalse, wie es das Attribut angibt.controlledCount: wie viele der Elemente, diearia-controlsnennt, verglichen wurden.
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
<button aria-expanded="false" aria-controls="shipping">Shipping</button><div id="shipping" hidden>Orders ship within two working days.</div>
Der Bereich ist ausgeblendet, wie aria-expanded="false" es angibt.
<button aria-expanded="false" aria-controls="shipping">Shipping</button><div id="shipping">Orders ship within two working days.</div>
aria-expanded="false" teilt einem Screenreader mit, dass der Bereich geschlossen ist, er wird aber angezeigt. Eine Person prüft, ob der Bereich offen ist oder ob das Steuerelement nur Inhalt aufklappt, der sichtbar bleibt.
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.
EXPANDED_FALSE_CONTROLLED_SHOWN
- Suchen Sie den im Bericht genannten Umschalter; er gibt an, reduziert zu sein.
- Betrachten Sie den Inhalt, den er steuert, und prüfen Sie, ob er vollständig oder nur als Vorschau angezeigt wird, etwa wenige gekürzte Zeilen.
- Aktivieren Sie den Umschalter mit Eingabetaste oder der Leertaste und prüfen Sie den Bereich „Barrierefreiheit“: Der expanded-Zustand sollte dem Angezeigten folgen.
Bestanden. Der Inhalt ist reduziert oder nur als Vorschau sichtbar, solange der Umschalter „reduziert“ angibt, und der Zustand ändert sich, wenn der Inhalt aufklappt.
Nicht bestanden. Der Inhalt wird vollständig angezeigt, während der Umschalter Screenreader-Nutzenden mitteilt, er sei reduziert; das verstößt gegen WCAG 4.1.2.
EXPANDED_TRUE_CONTROLLED_HIDDEN
- Suchen Sie den im Bericht genannten Umschalter; er gibt an, erweitert zu sein.
- Suchen Sie den Inhalt, den er steuert, und prüfen Sie, ob er auf dem Bildschirm angezeigt wird; warten Sie, bis eine etwaige Animation beendet ist.
- Aktivieren Sie den Umschalter mit Eingabetaste oder der Leertaste und prüfen Sie im Bereich „Barrierefreiheit“, ob der expanded-Zustand dem Angezeigten folgt.
Bestanden. Der Inhalt wird angezeigt, solange der Umschalter „erweitert“ angibt, sobald ein etwaiger Übergang beendet ist.
Nicht bestanden. Der Inhalt bleibt verborgen, während der Umschalter Screenreader-Nutzenden mitteilt, er sei erweitert; das verstößt gegen WCAG 4.1.2.