Features für Barrierefreiheitstests in DevTools

Um Ihre Webseiten auf Barrierefreiheit zu testen, erstellen Sie zunächst eine Prüfliste mit zu testigen Aspekten der Barrierefreiheit, und verwenden Sie dann die relevanten DevTools-Features, um jeden Aspekt zu überprüfen.

Zu überprüfende Barrierefreiheitsaspekt Feature von DevTools Artikel oder Unterüberschrift
Stellen Sie sicher, dass Bilder über alt-Text verfügen Problemtool > Barrierefreiheitsbereich des Berichts Stellen Sie sicher, dass Bilder über alt-Text verfügen
Überprüfen der Tastaturunterstützung Untersuchen des Tools > Abschnitts "Barrierefreiheit" der Überlagerung Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie auf die Webseite zeigen
Überprüfen der Tastaturunterstützung Tab``Shift+Tab, und Enter Schlüsseln Überprüfen Sie die Tastaturunterstützung mithilfe der Tab- und Eingabetasten
Überprüfen der Tastaturunterstützung: Überprüfen, ob der Fokus angegeben ist Tool, Registerkarte "Formatvorlagen" und "Quellen" überprüfen Analysieren Sie die fehlenden Anzeige des Tastaturfokus in einem Randleistenmenü
Überprüfen der Tastaturunterstützung: Überprüfen, ob Formularschaltflächen mit der Tastatur verwendet werden können Überprüfungstool, DOM-Struktur im Elementtool und Registerkarte "Ereignislistener" Analysieren Sie die fehlende Tastaturunterstützung in einem Formular
Überprüfen der Tastaturunterstützung: Überprüfen der Tab Tastenreihenfolge Elementtool > Registerkarte "Barrierefreiheit" > Source Order Viewer Testen Sie die Tastaturunterstützung mithilfe des Source Order Viewers
Stellen Sie sicher, dass Text über ausreichend Kontrast verfügt (automatisch für die gesamte Seite). Problemtool > Barrierefreiheitsbereich des Berichts Sicherstellen, dass Textfarben über genügend Kontrast verfügen
Sicherstellen, dass Text über genügend Kontrast verfügt Elementtool > Registerkarte "Formatvorlagen" > Farbauswahl Testen Sie den Kontrast von Text und Farbe mithilfe des Farbwählers
Sicherstellen, dass Text über genügend Kontrast verfügt Überprüfen des Tools > Abschnitts "Barrierefreiheit" der Überlagerung > Zeile "Kontrast" Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie auf die Webseite zeigen
Stellen Sie sicher, dass Text genügend Kontrast aufweist: im Hoverzustand Elementtool > Registerkarte "Formatvorlagen" > "Elementstatus umschalten" Überprüfen Sie die Barrierefreiheit aller Zustände von Elementen
Stellen Sie sicher, dass Text genügend Kontrast aufweist: mit dunklem Design (dunklem Modus) und hellem Design Renderingtool > Emulieren des CSS-Medienfeatures "prefers-color-scheme" Überprüfen Sie auf Kontrastprobleme mit dunklem Design und hellem Design
Überprüfen der Sprachausgabeunterstützung: Überprüfen, ob Eingabefelder Bezeichnungen aufweisen Problemtool > Barrierefreiheitsbereich des Berichts Überprüfen, ob Eingabefelder Bezeichnungen aufweisen
Überprüfen der Sprachausgabeunterstützung Überprüfen des Tools > Abschnitt "Barrierefreiheit" der Überlagerung > Name und Rolle Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie auf die Webseite zeigen
Überprüfen der Sprachausgabeunterstützung Elementtool > Registerkarte "Barrierefreiheit" > Barrierefreiheitsstruktur Überprüfen Sie die Barrierefreiheitsstruktur auf Tastatur- und Sprachausgabeunterstützung,und testen Sie die Barrierefreiheit auf der Registerkarte "Barrierefreiheit".
Stellen Sie sicher, dass die Webseite von Personen mit Farbenblindheit verwendet werden kann. Renderingtool > Emulieren der Dropdownliste "Sehschwächen emulieren" Stellen Sie sicher, dass die Seite von Personen mit Farbblindheit verwendet werden kann
Überprüfen, ob die Webseite mit verschwommener Sehkraft verwendet werden kann Renderingtool > Emulieren der Dropdownliste "Sehschwächen emulieren" Überprüfen Sie, ob die Seite mit verschwommener Sicht verwendet werden kann
Stellen Sie sicher, dass die Webseite mit deaktivierter UI-Animation verwendet werden kann (reduzierte Bewegung) Renderingtool > Emulieren von CSS-Medienfeatures bevorzugt reduzierte Bewegung Stellen Sie sicher, dass die Seite mit deaktivierter UI-Animation verwendet werden kann
Stellen Sie sicher, dass das Webseitenlayout verwendet werden kann, wenn es schmal ist. Geräteemulationstool Überprüfen Sie, ob das Webseitenlayout verwendet werden kann, wenn es schmal ist,und emulieren Sie mobile Geräte in Microsoft Edge DevTools

Weitere Informationen