Überprüfen der Barrierefreiheit aller Zustände von Elementen

Überprüfen Sie die Barrierefreiheit aller Zustände von Elementen, z. B. den Textfarbenkontrast während des Zustands hover . Das Inspect-Tool meldet Barrierefreiheitsprobleme für jeweils einen Zustand. Um die Barrierefreiheit der verschiedenen Zustände von Elementen zu überprüfen, verwenden Sie auf der Registerkarte Formatvorlagen den Abschnitt :hov (Elementzustandumschalten) des Bereichs Formatvorlagen , wie in diesem Artikel beschrieben.

Wir zeigen zunächst, warum zustandssimulation erforderlich ist, wenn das Inspect-Tool verwendet wird, und dann zeigen wir, wie die Zustandssimulation verwendet wird.

Überprüfen des Textfarbenkontrasts im Standardzustand

Um den Textfarbkontrast einzelner Elemente auf einer Webseite zu überprüfen, verwenden Sie die Seitenüberlagerung des Inspect-Tools :

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

3. Klicken Sie in der linken oberen Ecke von DevTools auf die Schaltfläche Inspect (), damit die Schaltfläche hervorgehoben (blau) ist.

4. Zeigen Sie auf Elemente in der gerenderten Webseite. Die Informationsüberlagerung des Tools Überprüfen wird mit Informationen zum Element unter dem Mauszeiger angezeigt.

   Wenn Kontrastinformationen verfügbar sind, zeigt die Überlagerung Überprüfen das Kontrastverhältnis und ein Kontrollkästchenelement an. Ein grünes Häkchen gibt an, dass genügend Kontrast vorhanden ist, und ein gelbes Warnungssymbol zeigt an, dass nicht genügend Kontrast vorhanden ist.

   Beispielsweise weisen die Links im Navigationsmenü der Seitenleiste einen ausreichenden Kontrast auf, wie in der Überlagerung überprüfen gezeigt:

   

   Das grüne Listenelement "Hunde" im Abschnitt "Spende status" weist nicht genügend Kontrast auf und wird daher durch eine Warnung in der Überlagerung "Inspect" gekennzeichnet:

   

Wenn Sie mit dem Mauszeiger zeigen, wenn das Inspect-Tool aktiv ist, wird der Textfarbenkontrast für den Hoverzustand nicht angezeigt.

Die Informationsüberlagerung des Untersuchungstools stellt nur einen einzelnen Zustand dar. Elemente auf der Seite können unterschiedliche Zustände aufweisen, die alle getestet werden müssen. Wenn Sie beispielsweise mit dem Mauszeiger auf das Menü der Demoseite für Barrierefreiheitstests zeigen, ändern die Menüelemente die Farbe.

Vergewissern Sie sich zunächst, dass Ihre Animationen ausgeführt werden, wenn Sie das Tool Inspect nicht verwenden:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Zeigen Sie im Navigationsmenü der Seitenleiste auf die blauen Menüelemente. Die Farbe des Menüelements wird beim Zeigen animiert:

   

Vergewissern Sie sich als Nächstes, dass Ihre Animationen nicht ausgeführt werden, wenn Sie das Tool Inspect verwenden:

1. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

2. Klicken Sie in der linken oberen Ecke von DevTools auf die Schaltfläche Tool überprüfen ().

3. Zeigen Sie auf der gerenderten Webseite auf die blauen Links im Navigationsmenü der Seitenleiste. Die Animationen für die Menüelemente werden nicht ausgeführt. Stattdessen werden die Menüelemente mithilfe der Farbmarkierung für das Flexbox-Overlay angezeigt.

   Wenn Sie das Inspect-Tool verwenden, können Sie den hover Zustand für Elemente nicht erreichen, um das Textkontrastverhältnis zu testen, da der hover Zustand in Ihren Formatvorlagen nicht ausgelöst wird.

Die Überprüfung auf einen ausreichenden Textkontrast auf diese Weise reicht nicht aus, da die Elemente auf der Seite unterschiedliche Zustände aufweisen können.

Verwenden der Zustandssimulation zum Simulieren des Hoverzustands eines animierten Menüelements

Wenn das Überprüfungstool aktiv ist, müssen Sie den Status des Menüelements simulieren, anstatt auf ein animiertes Element zu zeigen. Um den Zustand eines Menüelements zu simulieren, verwenden Sie die Zustandssimulation im Bereich Formatvorlagen . Der Bereich Formatvorlagen verfügt über die Schaltfläche :hov (Elementzustand umschalten), die eine Gruppe von Kontrollkästchen mit der Bezeichnung Elementzustand erzwingen anzeigt.

So aktivieren Sie den Hoverzustand, während Sie das Inspect-Tool verwenden:

1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie F12. DevTools wird neben der Webseite geöffnet.

3. Klicken Sie in der linken oberen Ecke von DevTools auf die Schaltfläche Überprüfen (), damit das Symbol hervorgehoben ist (blau).

4. Klicken Sie auf der gerenderten Webseite im Navigationsmenü der Randleiste auf den blauen Link Cats . Das Tool Elemente wird geöffnet, wobei das Element <a href="#cats">Cats</a> ausgewählt ist:

   

5. Klicken Sie im Bereich Formatvorlagen auf die Schaltfläche Elementzustand umschalten (:hov). Der Abschnitt Elementzustand erzwingen wird angezeigt:

   

6. Klicken Sie auf das Kontrollkästchen :hover . Im DOM wird links vom Element <a href="#cats">Cats</a>ein gelber Punkt angezeigt, der angibt, dass das Element einen simulierten Zustand aufweist. Das Menüelement "Katzen " wird jetzt auf der Webseite angezeigt, als würde der Mauszeiger darauf zeigen, und jede Animation, die sich im Menüelement befindet, kann ausgeführt werden:

   

Überprüfen des Kontrasts des Elements beim Zeigen darauf

Nachdem der simulierte Zustand angewendet wurde, können Sie das Inspect-Tool erneut verwenden, um den Kontrast des Elements zu überprüfen, wenn der Benutzer darauf zeigt, wie folgt:

1. Klicken Sie oben auf die Schaltfläche Überprüfen () in der linken oberen Ecke von DevTools, damit das Symbol hervorgehoben ist (blau).

2. Zeigen Sie im Navigationsmenü der Seitenleiste auf den blauen Link Katzen . Der Link ist aufgrund des simulierten Hoverzustands jetzt hellblau. Die Informationsüberlagerung des Tools "Überprüfen " wird mit einem orangefarbenen Ausrufezeichen in der Zeile Kontrast angezeigt, der angibt, dass der Kontrast nicht hoch genug ist:

   

Die Zustandssimulation ist auch eine gute Möglichkeit, um zu überprüfen, ob Sie verschiedene Benutzeranforderungen berücksichtigt haben, z. B. die Bedürfnisse von Tastaturbenutzern. Mithilfe der Kontrollkästchen Elementzustand erzwingen können Sie den :focus Zustand simulieren und überprüfen, ob sich fokussierbare Elemente ändern, um anzugeben, dass sie den Fokus haben. Das Fehlen eines Indikators, wenn ein Element den Fokus hat, ist ein Problem mit der Barrierefreiheit. Weitere Informationen finden Sie unter Analysieren der fehlenden Anzeige des Tastaturfokus.