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). |