Features für Barrierefreiheitstests

Um Ihre Webseiten auf Barrierefreiheit zu testen, erstellen Sie zunächst eine Checkliste mit Barrierefreiheitsaspekten zum Testen, und verwenden Sie dann die relevanten DevTools-Features, um jeden Aspekt zu überprüfen.

Alt-Text für Bilder

Zu überprüfenden Barrierefreiheitsaspekt Feature von DevTools Artikel oder Unterüberschrift
Sicherstellen, dass Bilder Alternativtext enthalten Problemtool > Abschnitt "Barrierefreiheit " des Berichts Sicherstellen, dass Bilder Alternativtext enthalten

Tastaturunterstützung

Zu überprüfenden Barrierefreiheitsaspekt Feature von DevTools Artikel oder Unterüberschrift
Überprüfen der Tastaturunterstützung Tool > Abschnitt "Barrierefreiheit " der Überlagerung prüfen Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen und HTML-Seiten mit dem Inspect-Tool analysieren.
Überprüfen der Tastaturunterstützung Tab, Shift+Tabund Enter Tasten Ü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 Tool "Quellen**" prüfen** Analysieren Sie die fehlenden Anzeige des Tastaturfokus in einem Randleistenmenü
Überprüfen der Tastaturunterstützung: Sicherstellen, dass Formularschaltflächen mit der Tastatur verwendet werden können Überprüfen des Tools, der DOM-Struktur im Elementtool und der Registerkarte " Ereignislistener " Analysieren Sie die fehlende Tastaturunterstützung in einem Formular
Überprüfen der Tastaturunterstützung: Überprüfen der Tab Tastenreihenfolge Elements tool > Accessibility tab > Source Order Viewer Testen Sie die Tastaturunterstützung mithilfe des Source Order Viewers

Textkontrast

Zu überprüfenden Barrierefreiheitsaspekt Feature von DevTools Artikel oder Unterüberschrift
Vergewissern Sie sich, dass der Text genügend Kontrast aufweist (automatisch für die gesamte Seite) Problemtool > Abschnitt "Barrierefreiheit " des Berichts Sicherstellen, dass textfarben genügend Kontrast aufweisen
Vergewissern Sie sich, dass der Text genügend Kontrast aufweist. Elementtool > Registerkarte " Formatvorlagen " > Farbauswahl Testen Sie den Kontrast von Text und Farbe mithilfe des Farbwählers
Vergewissern Sie sich, dass der Text genügend Kontrast aufweist. Tool > Abschnitt "Barrierefreiheit " der Zeile "Überlagerung" > "Kontrast" prüfen Verwenden Sie das Inspect-Tool, um Barrierefreiheitsprobleme zu erkennen, indem Sie mit dem Mauszeiger auf die Webseite zeigen und HTML-Seiten mit dem Inspect-Tool analysieren.
Stellen Sie sicher, dass der Text genügend Kontrast aufweist: im Hoverzustand Elements tool > Styles tab > Toggle Element State (shows Force element state checkboxes) Überprüfen Sie die Barrierefreiheit aller Zustände von Elementen
Stellen Sie sicher, dass der Text ausreichend Kontrast aufweist: mit dunklem Design (dunkler Modus) und hellem Design Renderingtool > Emulieren des CSS-Medienfeatures bevorzugt das Farbschema Überprüfen Sie auf Kontrastprobleme mit dunklem Design und hellem Design

Unterstützung für Sprachausgabe

Zu überprüfenden Barrierefreiheitsaspekt Feature von DevTools Artikel oder Unterüberschrift
Überprüfen der Unterstützung der Sprachausgabe: Überprüfen, ob Eingabefelder Bezeichnungen aufweisen Problemtool > Abschnitt "Barrierefreiheit " des Berichts Überprüfen, ob Eingabefelder Beschriftungen 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 mit dem Mauszeiger auf die Webseite zeigen und HTML-Seiten mit dem Inspect-Tool analysieren.
Überprüfen der Sprachausgabeunterstützung Elementtool > Registerkarte "Barrierefreiheit " > Barrierefreiheitsstruktur Überprüfen Sie die Barrierefreiheitsstruktur auf Tastatur- und Sprachausgabeunterstützung, und testen Sie die Barrierefreiheit mithilfe der Registerkarte "Barrierefreiheit".

Sehschwächen

Zu überprüfenden Barrierefreiheitsaspekt Feature von DevTools Artikel oder Unterüberschrift
Stellen Sie sicher, dass die Webseite von Personen mit Farbenblindheit verwendet werden kann. Renderingtool > Emulieren der Dropdownliste für Sehschwächen Stellen Sie sicher, dass die Seite von Personen mit Farbblindheit verwendet werden kann
Stellen Sie sicher, dass die Webseite mit unscharfem Sehen verwendet werden kann. Renderingtool > Emulieren der Dropdownliste für Sehschwächen Stellen Sie sicher, ob die Seite bei verschwommener Sicht verwendet werden kann
Stellen Sie sicher, dass die Webseite mit deaktivierter UI-Animation (reduzierte Bewegung) verwendet werden kann. Renderingtool > Emulieren des CSS-Medienfeatures bevorzugt reduzierte Bewegung Stellen Sie sicher, ob eine Seite mit ausgeschalteter UI-Animation verwendet werden kann

Verwendbar, wenn schmal

Zu überprüfenden Barrierefreiheitsaspekt Feature von DevTools Artikel oder Unterüberschrift
Stellen Sie sicher, dass das Webseitenlayout verwendet werden kann, wenn es schmal ist. Geräteemulationstool Vergewissern Sie sich, dass das Webseitenlayout bei schmalen Geräten verwendet werden kann, und emulieren Sie mobile Geräte (Geräteemulation).

Weitere Informationen