Auf dieser Seite finden Sie eine umfassende Referenz zu den Bedienungshilfen in den Chrome-Entwicklertools. Sie richtet sich an Webentwickler, die:
- Sie sollten Grundkenntnisse in den DevTools haben, z. B. wie Sie sie öffnen.
- mit den Grundsätzen und Best Practices für Barrierefreiheit vertraut sind.
In dieser Referenz erfahren Sie, welche Tools in den DevTools verfügbar sind, mit denen Sie die Barrierefreiheit einer Seite prüfen können.
Im Hilfeartikel Chrome DevTools mit Hilfstechnologien verwenden erfahren Sie, wie Sie die Chrome DevTools mit einer Hilfstechnologie wie einem Screenreader verwenden.
Unter Barrierefreiheit lernen erfahren Sie, wie Sie barrierefreie Websites entwickeln.
Bedienungshilfen in den Chrome DevTools
In diesem Abschnitt wird erläutert, wie DevTools in Ihr gesamtes Tool-Kit für Barrierefreiheit passt.
Wenn Sie feststellen möchten, ob eine Seite barrierefrei ist, sollten Sie sich zwei allgemeine Fragen stellen:
- Kann ich mich auf der Seite mit einer Tastatur oder einem Screenreader bewegen?
- Sind die Elemente der Seite für Screenreader richtig markiert?
Im Allgemeinen können Sie mit DevTools Fehler im Zusammenhang mit Frage 2 beheben, da diese Fehler automatisch leicht zu erkennen sind. Frage 1 ist genauso wichtig, aber leider können Ihnen die DevTools dabei nicht helfen. Die einzige Möglichkeit, Fehler im Zusammenhang mit Frage 1 zu finden, besteht darin, die Seite selbst mit einer Tastatur oder einem Screenreader zu verwenden. Weitere Informationen finden Sie unter Prüfung auf Barrierefreiheit.
Barrierefreiheit einer Seite prüfen
Im Allgemeinen können Sie mit den Bedienungshilfen im Bereich Lighthouse feststellen, ob:
- Eine Seite ist für Screenreader korrekt markiert.
- Die Textelemente auf einer Seite haben ein ausreichendes Kontrastverhältnis. Weitere Informationen finden Sie unter Lesbarkeit Ihrer Website verbessern.
So prüfen Sie eine Seite:
- Rufen Sie die URL auf, die Sie prüfen möchten.
Klicken Sie in den DevTools auf den Bereich Lighthouse. In den DevTools werden verschiedene Konfigurationsoptionen angezeigt.
Wählen Sie unter Gerät die Option Mobil aus, wenn Sie ein Mobilgerät simulieren möchten. Mit dieser Option wird der User-Agent-String anders geändert und die Größe des Darstellungsbereichs angepasst. Wenn sich die mobile Version der Seite von der Desktopversion unterscheidet, kann diese Option erhebliche Auswirkungen auf die Ergebnisse Ihrer Analyse haben.
Achten Sie im Abschnitt Lighthouse darauf, dass Bedienungshilfen aktiviert ist. Deaktivieren Sie die anderen Kategorien, wenn Sie sie aus dem Bericht ausschließen möchten. Lassen Sie sie aktiviert, wenn Sie weitere 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 hilfreich, wenn Sie die Auslastungsleistung analysieren. Diese Option sollte für Ihren Bedienungshilfen-Bewertungswert irrelevant sein. Sie können also die Option verwenden, die Ihnen am besten gefällt.
Mit dem Kästchen Speicherplatz löschen können Sie den gesamten Speicherplatz vor dem Laden der Seite löschen oder den Speicherplatz zwischen den Seitenladevorgängen beibehalten. Diese Option ist wahrscheinlich auch für Ihren Bedienbarkeits-Bewertungswert irrelevant. Sie können also die Option verwenden, die Ihnen am besten gefällt.
Klicken Sie auf Bericht erstellen. Nach 10 bis 30 Sekunden wird in den DevTools ein Bericht angezeigt. In Ihrem Bericht finden Sie verschiedene Tipps zur Verbesserung der Barrierefreiheit der Seite.
Klicken Sie auf eine Analyse, um mehr darüber zu erfahren.
Klicken Sie auf Weitere Informationen, um die Dokumentation zu dieser Prüfung aufzurufen.
Siehe auch: aXe-Erweiterung
Sie können die aXe-Erweiterung oder die Lighthouse-Erweiterung anstelle des Lighthouse-Steuerfelds verwenden, das standardmäßig in Chrome verfügbar ist. Sie liefern in der Regel dieselben Informationen, da aXe die zugrunde liegende Engine ist, die das Lighthouse-Steuerfeld antreibt. 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 damit fehlerhafte Knoten prüfen und hervorheben können.
Inhalts-Neuformatierung mit der Gerätesymbolleiste testen
Gemäß dem Kriterium „Reflow“ der Richtlinien für barrierefreie Webinhalte (WCAG) sollten Webinhalte auch dann ohne Informationsverlust sichtbar bleiben, wenn die Größe des Darstellungsbereichs geändert oder die Ausrichtung geändert 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 Ihre Inhalte neu angeordnet werden, ändern Sie die Größe des Darstellungsbereichs dynamisch mit der Gerätesymbolleiste im Bereich Lighthouse.
Ziehen Sie die Ziehpunkte, um die Größe des Darstellungsbereichs anzupassen. Die zu testenden Dimensionen finden Sie im Erfolgskriterium für die automatische Layoutanpassung der WCAG.
Tab „Bedienungshilfen“
Auf dem Tab „Barrierefreiheit“ können Sie den Baum für die Barrierefreiheit, ARIA-Attribute und berechnete Barrierefreiheitseigenschaften von DOM-Knoten aufrufen.
So öffnen Sie den Tab Bedienungshilfen:
- Klicken Sie auf den Bereich Elemente.
- Wählen Sie im DOM-Baum das Element aus, das Sie prüfen möchten.
- Klicken Sie auf den Tab Bedienungshilfen. Dieser Tab ist möglicherweise hinter der Schaltfläche Weitere Tabs keyboard_double_arrow_right ausgeblendet.
Sie können den Tab Bedienungshilfen nach vorne ziehen, um in Zukunft schneller darauf zugreifen zu können.
Position eines Elements im Baum für Barrierefreiheit ansehen
Der Baum für Barrierefreiheit ist eine Teilmenge des DOM-Baums. Es enthält nur Elemente aus dem DOM-Baum, die für die Darstellung des Inhalts der Seite in einem Screenreader relevant und nützlich sind.
Prüfen Sie die Position eines Elements im Bedienungshilfen-Baum auf dem Tab Barrierefreiheit.
In dieser Ansicht können Sie nur einen einzelnen Knoten und seine Vorfahren untersuchen. So rufen Sie den gesamten Navigationsbaum für Barrierefreiheit auf:
(Vorabversion) Vollbild-Baumansicht für Barrierefreiheit ansehen
In der Vollansicht des Baums für Barrierefreiheit können Sie den gesamten Baum untersuchen und besser nachvollziehen, wie Ihre Webinhalte für Hilfstechnologien sichtbar sind.
So rufen Sie den Bedienungshilfen-Baum auf:
- Klicken Sie auf Wissenschaft Vollbild-Baumansicht für Barrierefreiheit aktivieren.
Klicken Sie oben in der Aktionsleiste auf DevTools neu laden.
Aktivieren oder deaktivieren Sie rechts oben im Bereich Elemente die Schaltfläche accessibility_new Zur Bedienungshilfen-Baumstruktur wechseln.
Durchsuchen Sie den Bedienungshilfen-Baum. Sie können Knoten maximieren oder unter Berechnete Properties auf Details klicken.
Wählen Sie einen Knoten aus und klicken Sie auf die Schaltfläche accessibility_new Zur DOM-Baumansicht wechseln, um zur DOM-Baumansicht zurückzukehren.
Der entsprechende DOM-Knoten ist jetzt ausgewählt. So können Sie die Zuordnung zwischen dem DOM-Knoten und dem Knoten im Baum für Barrierefreiheit besser nachvollziehen.
ARIA-Attribute eines Elements aufrufen
ARIA-Attribute sorgen dafür, dass Screenreader alle Informationen haben, die sie benötigen, um den Inhalt einer Seite korrekt darzustellen.
Die ARIA-Attribute eines Elements finden Sie auf dem Tab „Barrierefreiheit“.
Quellreihenfolge der Elemente 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 surfen.
So rufen Sie die Quellenreihenfolge auf Ihrer Website auf und beheben Fehler:
- Prüfen Sie ein Element auf der Seite.
- Klicke unter Elemente > Bedienungshilfen > Ansicht der Quellreihenfolge auf das check_box Quellreihenfolge anzeigen.
In den DevTools werden verschachtelte Elemente im Viewport mit Rahmen umrissen und mit Zahlen gekennzeichnet, die ihrer Quellreihenfolge entsprechen.
Berechnete Zugänglichkeitseigenschaften eines Elements aufrufen
Einige Bedienungshilfen-Properties werden vom Browser dynamisch berechnet. Sie finden diese Eigenschaften auf dem Tab Barrierefreiheit im Bereich Berechnete Eigenschaften.
Die berechneten Bedienungshilfen-Eigenschaften eines Elements finden Sie auf dem Tab „Bedienungshilfen“.
Text mit geringem Kontrast erkennen und beheben
Die DevTools können Probleme mit geringem Kontrast automatisch erkennen und bessere Farben vorschlagen, um sie zu beheben. Weitere Informationen finden Sie unter Lesbarkeit Ihrer Website verbessern.