Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
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) |