Freigeben über

Features für Barrierefreiheitstests

  • Artikel

In diesem Artikel werden typische Barrierefreiheitsaspekte aufgeführt, die für Webseiten getestet werden müssen, sowie die entsprechenden Features in Microsoft DevTools.

Alternativtext für Bilder

Zu überprüfende Barrierefreiheitsaspekt Feature von DevTools Artikel
Überprüfen, ob Bilder Alternativtext enthalten Tool "Probleme">: Abschnitt "Barrierefreiheit" des Berichts Vergewissern Sie sich, dass Bilder Alternativtext inAutomatisches Testen einer Webseite auf Barrierefreiheitsprobleme enthalten.
Überprüfen, ob Bilder Alternativtext enthalten Lighthouse-Tool> Probleme beim Alternativtext Testen der Barrierefreiheit mit Lighthouse

Tastaturunterstützung

Zu überprüfende Barrierefreiheitsaspekt Feature von DevTools Artikel
Überprüfen der Tastaturunterstützung Überprüfen desAbschnitts "Barrierefreiheit" des Überlagerungstools > Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen und HTML-Seiten mithilfe des Inspect-Tools analysieren.
Überprüfen der Tastaturunterstützung TAB-, UMSCHALT+TAB- und EINGABETASTE Überprüfen der Tastaturunterstützung mithilfe der TAB- und EINGABETASTE
Überprüfen der Tastaturunterstützung: Vergewissern Sie sich, dass der Fokus angegeben ist. Überprüfungstool, Registerkarte "Formatvorlagen" und Quellentool Analysieren der fehlenden Anzeige des Tastaturfokus
Überprüfen der Tastaturunterstützung: Überprüfen, ob Formularschaltflächen mit der Tastatur verwendet werden können Untersuchungstool , DOM-Struktur im Tool "Elemente " und Registerkarte " Ereignislistener " Analysieren der fehlenden Tastaturunterstützung in einem Formular
Überprüfen der Tastaturunterstützung: Überprüfen der Tabulatortastenreihenfolge Registerkarte "Barrierefreiheit" > des Elements-Tools>Quellcodereihenfolge-Viewer Testen der Tastaturunterstützung mithilfe des Quellreihenfolge-Viewers
Überprüfen der Tastaturunterstützung Lighthouse-Tool> Probleme bei der Tastaturunterstützung Testen der Barrierefreiheit mit Lighthouse

Textkontrast

Zu überprüfende Barrierefreiheitsaspekt Feature von DevTools Artikel
Stellen Sie sicher, dass der Text ausreichend Kontrast aufweist (automatisch für die gesamte Seite). Tool "Probleme">: Abschnitt "Barrierefreiheit" des Berichts Vergewissern Sie sich, dass textfarben genügend Kontrast aufweisen, in Automatisches Testen einer Webseite auf Barrierefreiheitsprobleme.
Vergewissern Sie sich, dass der Text genügend Kontrast aufweist. Registerkarte '>Stile' 'Elemente' '>Farbauswahl' Testen des Text-Farbkontrasts mit der Farbauswahl
Vergewissern Sie sich, dass der Text genügend Kontrast aufweist. Abschnitt"Barrierefreiheit" des Überlagerungskontrasts >> überprüfen Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen und HTML-Seiten mithilfe des Inspect-Tools analysieren.
Stellen Sie sicher, dass der Text genügend Kontrast aufweist: im Hover-Zustand Registerkarte ">Stile" des Elements-Tools >Elementzustand umschalten (zeigt Kontrollkästchen für den Elementzustand erzwingen) Überprüfen der Barrierefreiheit aller Zustände von Elementen
Stellen Sie sicher, dass text ausreichend Kontrast aufweist: mit dunklem Design (dunklem Modus) und hellem Design Renderingtool>Emulate CSS media feature prefers-color-scheme Überprüfen auf Kontrastprobleme mit dunklem design und hellem Design
Stellen Sie sicher, dass der Text ausreichend Kontrast aufweist (automatisch für die gesamte Seite). Lighthouse-Tool> Probleme beim Textkontrast Testen der Barrierefreiheit mit Lighthouse

Sprachausgabeunterstützung

Zu überprüfende Barrierefreiheitsaspekt Feature von DevTools Artikel
Überprüfen der Sprachausgabeunterstützung: Überprüfen, ob Eingabefelder Bezeichnungen aufweisen Tool "Probleme">: Abschnitt "Barrierefreiheit" des Berichts Vergewissern Sie sich, dass Eingabefelder Bezeichnungen inAutomatisches Testen einer Webseite auf Barrierefreiheitsprobleme enthalten.
Überprüfen der Sprachausgabeunterstützung Überprüfen desAbschnitts> "Barrierefreiheit" des Überlagerungsnamens > und der Rolle Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen und HTML-Seiten mithilfe des Inspect-Tools analysieren.
Überprüfen der Sprachausgabeunterstützung Elementetool>Registerkarte "Barrierefreiheit " >Barrierefreiheitsstruktur Überprüfen Sie die Barrierefreiheitsstruktur auf Tastatur- und Sprachausgabeunterstützung, und testen Sie die Barrierefreiheit mithilfe der Registerkarte Barrierefreiheit.
Überprüfen der Sprachausgabeunterstützung Lighthouse-Tool> Probleme mit der Sprachausgabeunterstützung Testen der Barrierefreiheit mit Lighthouse

Sehschwächen

Zu überprüfende Barrierefreiheitsaspekt Feature von DevTools Artikel
Vergewissern Sie sich, dass die Webseite von Personen mit Farbblindheit verwendet werden kann. Dropdownliste des Renderingtools>"Sehfehler emulieren " Überprüfen, ob eine Seite von Personen mit Farbenblindheit verwendet werden kann
Überprüfen, ob die Webseite mit verschwommenem Sehen verwendet werden kann Dropdownliste des Renderingtools>"Sehfehler emulieren " Überprüfen, ob eine Seite mit verschwommenem Sehen verwendet werden kann
Vergewissern Sie sich, dass die Webseite mit deaktivierter Animation der Benutzeroberfläche verwendet werden kann (reduzierte Bewegung). Renderingtool>Emulate CSS media feature prefers-reduced-motion Vergewissern Sie sich, dass eine Seite mit deaktivierter Benutzeroberflächenanimation verwendet werden kann.
Überprüfen, ob die Webseite von Personen mit Sehschwächen verwendet werden kann Lighthouse-Tool> Probleme mit Sehschwächen Testen der Barrierefreiheit mit Lighthouse

Verwendbar bei schmalen

Zu überprüfende Barrierefreiheitsaspekt Feature von DevTools Artikel
Stellen Sie sicher, dass das Webseitenlayout verwendet werden kann, wenn es schmal ist. Tool zur Geräteemulation Überprüfen Sie, ob das Webseitenlayout verwendet werden kann, wenn es schmal ist, und emulieren Sie mobile Geräte (Geräteemulation)

Siehe auch