Auf dieser Seite finden Sie eine umfassende Referenz zu den Bedienungshilfen in den Chrome-Entwicklertools. Sie richtet sich an Webentwickler, die
- Grundkenntnisse in den Entwicklertools haben, z. B. wissen, wie sie geöffnet werden.
- mit den Prinzipien und Best Practices der Barrierefreiheit vertraut sind.
Diese Referenz soll Ihnen helfen, alle Tools in den Entwicklertools zu finden, mit denen Sie die Barrierefreiheit einer Seite prüfen können.
Wenn Sie Hilfe bei der Navigation in den Entwicklertools mit einer Hilfstechnologie wie einem Screenreader benötigen, lesen Sie den Hilfeartikel Navigating Chrome DevTools With Assistive Technology (Navigation in den Chrome-Entwicklertools mit Bedienungshilfen).
Informationen zum Entwickeln barrierefreier Websites finden Sie unter Learn Accessibility (Barrierefreiheit lernen).
Übersicht über die Bedienungshilfen in den Chrome-Entwicklertools
In diesem Abschnitt wird erläutert, wie die Entwicklertools in Ihr allgemeines Toolkit für Barrierefreiheit passen.
Wenn Sie feststellen möchten, ob eine Seite barrierefrei ist, müssen Sie sich zwei allgemeine Fragen stellen:
- Kann ich auf der Seite mit einer Tastatur oder einem Screenreader navigieren?
- Sind die Elemente der Seite für Screenreader richtig gekennzeichnet?
Im Allgemeinen können die Entwicklertools Ihnen helfen, Fehler im Zusammenhang mit Frage 2 zu beheben, da diese Fehler einfach automatisch erkannt werden können. Frage 1 ist genauso wichtig, aber leider können die Entwicklertools Ihnen dabei nicht helfen. Die einzige Möglichkeit, Fehler im Zusammenhang mit Frage 1 zu finden, besteht darin, eine Seite selbst mit einer Tastatur oder einem Screenreader zu verwenden. Weitere Informationen finden Sie unter How To Do An Accessibility Review (So führen Sie eine Überprüfung der Barrierefreiheit durch).
Barrierefreiheit einer Seite prüfen
Verwenden Sie im Allgemeinen die Prüfungen der Barrierefreiheit im Bereich Lighthouse , um festzustellen, ob:
- eine Seite für Screenreader richtig gekennzeichnet ist.
- die Textelemente auf einer Seite ausreichende Kontrastverhältnisse haben. Weitere Informationen finden Sie unter Website besser lesbar machen.
So prüfen Sie eine Seite:
- Rufen Sie die URL auf, die Sie prüfen möchten.
Klicken Sie in den Entwicklertools auf den Bereich Lighthouse. In den Entwicklertools werden verschiedene Konfigurationsoptionen angezeigt.
Wählen Sie unter Gerät die Option Mobilgerät aus, wenn Sie ein Mobilgerät simulieren möchten. Mit dieser Option wird der User-Agent-String geändert und die Größe des Darstellungsbereichs angepasst. Wenn sich die mobile Version der Seite von der Desktopversion unterscheidet, kann sich diese Option erheblich auf die Ergebnisse der Prüfung auswirken.
Achten Sie im Bereich Lighthouse darauf, dass Barrierefreiheit aktiviert ist. Deaktivieren Sie die anderen Kategorien, wenn Sie sie aus dem Bericht ausschließen möchten. Lassen Sie sie aktiviert, wenn Sie andere Möglichkeiten zur Verbesserung der Qualität Ihrer Seite finden möchten.
Im Bereich Drosselung können Sie das Netzwerk und die CPU drosseln. Das ist nützlich, wenn Sie die Ladeleistung analysieren. Diese Option sollte für Ihre Bewertung der Barrierefreiheit irrelevant sein. Sie können also verwenden, was Sie bevorzugen.
Mit dem Kästchen Speicher löschen können Sie den gesamten Speicher löschen, bevor die Seite geladen wird, oder den Speicher zwischen den Seitenaufrufen beibehalten. Auch diese Option ist wahrscheinlich für Ihre Bewertung der Barrierefreiheit irrelevant. Sie können also verwenden, was Sie bevorzugen.
Klicken Sie auf Bericht erstellen. Nach 10 bis 30 Sekunden wird in den Entwicklertools ein Bericht erstellt. Der Bericht enthält verschiedene Tipps zur Verbesserung der Barrierefreiheit der Seite.
Klicken Sie auf eine Prüfung, um weitere Informationen zu erhalten.
Klicken Sie auf Weitere Informationen , um die Dokumentation zu dieser Prüfung aufzurufen.
Siehe auch: aXe-Erweiterung
Möglicherweise möchten Sie die aXe-Erweiterung oder die Lighthouse-Erweiterung anstelle des Bereichs Lighthouse verwenden, der standardmäßig in Chrome verfügbar ist. Sie liefern im Allgemeinen dieselben Informationen, da aXe die zugrunde liegende Engine ist, die den Bereich Lighthouse unterstützt. Die aXe-Erweiterung hat eine andere Benutzeroberfläche und beschreibt Prüfungen etwas anders.
Ein Vorteil der aXe-Erweiterung gegenüber dem Bereich Audits besteht darin, dass Sie fehlerhafte Knoten prüfen und hervorheben können.
Inhaltsfluss mit der Geräte-Symbolleiste testen
Gemäß den Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG) reflow muss Webcontent auch dann ohne Informationsverlust sichtbar bleiben, wenn die Größe des Darstellungsbereichs geändert oder die Ausrichtung angepasst wird. Durch das Ausrichten von Inhalten in einer einzigen Spalte werden Nutzer unterstützt, die vergrößerten Text verwenden. Wenn Sie testen möchten, wie der Inhalt fließt, ändern Sie die Größe des Darstellungsbereichs dynamisch mit der Geräte-Symbolleiste im Bereich Lighthouse.
Ziehen Sie die Ziehpunkte auf die gewünschten Abmessungen, um die Größe des Darstellungsbereichs zu ändern. Die spezifischen Abmessungen, die Sie testen sollten, finden Sie im Erfolgskriterium für den Inhaltsfluss der WCAG.
Tab „Barrierefreiheit“
Auf dem Tab Barrierefreiheit können Sie die Baumansicht für Barrierefreiheit, ARIA-Attribute und berechnete Eigenschaften der Barrierefreiheit von DOM-Knoten ansehen.
So öffnen Sie den Tab Barrierefreiheit:
- Klicken Sie auf den Bereich Elemente.
- Wählen Sie in der DOM-Baumansicht das Element aus, das Sie prüfen möchten.
- Klicken Sie auf den Tab Barrierefreiheit. Dieser Tab ist möglicherweise hinter der Schaltfläche Weitere Tabs keyboard_double_arrow_right verborgen.
Sie können den Tab Barrierefreiheit nach vorne ziehen, um in Zukunft schneller darauf zugreifen zu können.
Position eines Elements in der Baumansicht für Barrierefreiheit ansehen
Die Baumansicht für Barrierefreiheit ist eine Teilmenge der DOM-Baumansicht. Sie enthält nur Elemente aus der DOM-Baumansicht, die relevant und nützlich sind, um die Inhalte der Seite in einem Screenreader anzuzeigen.
Wenn Sie die Position eines Elements in der Baumansicht für Barrierefreiheit auf dem Tab „Barrierefreiheit“ prüfen möchten, aktivieren oder deaktivieren Sie „Baumansicht für Barrierefreiheit anzeigen“.
Mit dieser Option wird die DOM-Baumansicht im Bereich Elemente durch eine Baumansicht für Barrierefreiheit für die gesamte Seite ersetzt. Diese Baumansicht hilft Ihnen, besser zu verstehen, wie Ihre Webinhalte für Hilfstechnologien dargestellt werden.
Wenn Sie die Baumansicht für Barrierefreiheit durchsuchen möchten, können Sie Knoten maximieren und auswählen, um ihre Details unter Berechnete Eigenschaften zu sehen.
Sie können jederzeit wieder zur DOM-Baumansicht wechseln. Der entsprechende DOM-Knoten bleibt ausgewählt. So können Sie die Zuordnung zwischen dem DOM-Knoten und dem Knoten in der Baumansicht für Barrierefreiheit besser verstehen.
ARIA-Attribute eines Elements ansehen
ARIA-Attribute sorgen dafür, dass Screenreader alle Informationen haben, die sie benötigen, um die Inhalte einer Seite richtig darzustellen.
Die ARIA-Attribute eines Elements können Sie in dem Tab „Barrierefreiheit“ ansehen.
Quellreihenfolge von Elementen auf dem Bildschirm ansehen
Die Elemente auf der Seite werden nicht immer in der Reihenfolge angezeigt, in der sie in der Quelle stehen. Das kann Nutzer verwirren, die auf Hilfstechnologien angewiesen sind, um im Web zu navigieren.
So sehen Sie die Quellreihenfolge auf Ihrer Website und beheben Fehler:
- Prüfen Sie ein Element auf der Seite.
- Aktivieren Sie unter Elemente > Barrierefreiheit > Quellreihenfolge das Kästchen check_box Quellreihenfolge anzeigen.
Im Darstellungsbereich umranden die Entwicklertools verschachtelte Elemente mit Rahmen und kennzeichnen sie mit Zahlen, die ihrer Quellreihenfolge entsprechen.
Berechnete Eigenschaften der Barrierefreiheit eines Elements ansehen
Einige Eigenschaften der Barrierefreiheit werden vom Browser dynamisch berechnet. Diese Eigenschaften können Sie auf dem Tab Barrierefreiheit im Bereich Berechnete Eigenschaften ansehen.
Die berechneten Eigenschaften der Barrierefreiheit eines Elements können Sie in dem Tab „Barrierefreiheit“ ansehen.
Tab „Rendering“
Auf dem Tab Rendering können Sie bestimmte CSS-Medienfunktionen emulieren, ohne sie manuell in Ihrem Code oder in der Testumgebung angeben zu müssen. Diese Medienfunktionen ändern das Erscheinungsbild Ihrer Webseite basierend auf den Geräteeinstellungen des Nutzers. Wenn Sie die visuelle Barrierefreiheit Ihrer Seite testen möchten, öffnen Sie den Tab Rendering und sehen Sie sich die folgenden Optionen an:
- Emulieren Sie Sehbehinderungen, um Ihre Seite mit verschiedenen simulierten Sehbehinderungen anzusehen.
- Emulieren Sie die CSS-Medienfunktion
prefers-color-scheme, um zu sehen, wie Ihre Seite aussieht, wenn der dunkle oder helle Modus aktiviert ist. Viele betrachten den dunklen Modus als eine ästhetische Wahl, aber als Bedienungshilfe ist er auch aus anderen Gründen nützlich. - Emulieren Sie den CSS-Medientyp, um Ihre Seite im Stil von Druck- oder Bildschirmmedien zu sehen.
- Emulieren Sie die CSS-Medienfunktion
forced-colors, um zu sehen, wie Ihre Seite aussieht, wenn der User-Agent einen Modus mit erzwungenen Farben aktiviert hat. - Emulieren Sie die CSS-Medienfunktion
prefers-contrast, um Ihre Webinhalte mit einem höheren, niedrigeren oder bestimmten Kontrastwert zu sehen. - Emulieren Sie die CSS-Medienfunktion
prefers-reduced-motion, um Ihre Webinhalte mit reduzierten Animationen zu sehen. Einige Nutzer werden durch animierte Inhalte abgelenkt oder ihnen wird davon übel. Mit dieser Option können Sie sehen, wie Ihre Seite ohne Animationen oder Funktionen wie sanftes Scrollen aussieht. - Emulieren Sie die CSS-Medienfunktion
prefers-reduced-transparency, um zu sehen, wie Ihre Webinhalte aussehen, wenn der Nutzer die transparenten oder durchscheinenden Layer-Effekte auf dem Gerät reduzieren möchte.
Text mit geringem Kontrast finden und beheben
Die Entwicklertools können automatisch Probleme mit geringem Kontrast finden und bessere Farben vorschlagen, um sie zu beheben. Weitere Informationen finden Sie unter Website besser lesbar machen.