Auf dieser Seite finden Sie eine umfassende Referenz zu den Bedienungshilfen in den Chrome-Entwicklertools. Sie richtet sich an Webentwickler, die:
- Du solltest dich mit den Entwicklertools vertraut machen, z. B. wie sie geöffnet werden.
- Sie sind mit den Prinzipien und Best Practices für Barrierefreiheit vertraut.
Diese Referenz soll Ihnen helfen, alle in den Entwicklertools verfügbaren Tools kennenzulernen, mit denen Sie die Barrierefreiheit einer Seite untersuchen können.
Unter Navigation in Chrome-Entwicklertools mit assistiver Technologie finden Sie weitere Informationen zum Verwenden von Entwicklertools mit einer Hilfstechnologie wie einem Screenreader.
Weitere Informationen zur Entwicklung barrierefreier Websites finden Sie unter Bedienungshilfen.
Bedienungshilfen in den Chrome-Entwicklertools – Übersicht
In diesem Abschnitt wird erläutert, wie die Entwicklertools in Ihr allgemeines Toolkit für Bedienungshilfen passen.
Wenn Sie herausfinden möchten, ob eine Seite zugänglich ist, sollten Sie sich zwei allgemeine Fragen stellen:
- Kann ich mit einer Tastatur oder einem Screenreader auf der Seite navigieren?
- Sind die Elemente der Seite ordnungsgemäß für Screenreader ausgezeichnet?
Im Allgemeinen können die Entwicklertools Ihnen helfen, Fehler im Zusammenhang mit Frage 2 zu beheben, da diese Fehler automatisch erkannt werden können. Frage Nr. 1 ist genauso wichtig, aber die Entwicklertools können euch dort leider nicht helfen. Die einzige Möglichkeit, Fehler im Zusammenhang mit Frage 1 zu finden, besteht darin, selbst eine Seite mit einer Tastatur oder einem Screenreader zu verwenden. Weitere Informationen finden Sie unter Überprüfung der Barrierefreiheit.
Barrierefreiheit einer Seite prüfen
Im Allgemeinen können Sie anhand der Bedienungshilfen-Prüfungen im Bereich Lighthouse feststellen, ob Folgendes zutrifft:
- Eine Seite ist ordnungsgemäß für Screenreader ausgezeichnet.
- Die Kontrastverhältnisse der Textelemente auf einer Seite sind ausreichend. Weitere Informationen finden Sie unter Website 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 Tab Lighthouse. Die Entwicklertools zeigen Ihnen verschiedene Konfigurationsoptionen.
Wählen Sie unter Gerät die Option Mobil aus, wenn Sie ein Mobilgerät simulieren möchten. Mit dieser Option ändert sich der User-Agent-String unterschiedlich und die Größe des Darstellungsbereichs wird angepasst. Wenn die mobile Version der Seite anders als die Desktopversion angezeigt wird, kann sich diese Option erheblich auf die Ergebnisse Ihrer Prüfung auswirken.
Im Abschnitt Lighthouse muss die Option Bedienungshilfen aktiviert sein. 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 entdecken möchten.
Im Abschnitt Throttling (Drosselung) können Sie das Netzwerk und die CPU drosseln. Dies ist bei der Analyse der Lastleistung nützlich. Diese Option sollte für Ihren Wert für Barrierefreiheit nicht relevant sein, Sie können also beliebig wählen.
Mit dem Kästchen Speicherinhalt löschen können Sie den gesamten Speicher löschen, bevor die Seite geladen wird, oder den Speicherplatz bis zum Seitenaufbau beibehalten. Diese Option ist wahrscheinlich irrelevant für Ihre Punktzahl für Barrierefreiheit, Sie können also beliebig wählen.
Klicken Sie auf Bericht erstellen. Nach 10 bis 30 Sekunden liefert die Entwicklertools einen Bericht. Ihr Bericht enthält verschiedene Tipps, wie Sie die Barrierefreiheit der Seite verbessern können.
Klicken Sie auf eine Prüfung, 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 anstelle des standardmäßig in Chrome verfügbaren Lighthouse-Steuerfelds die aXe-Erweiterung oder die Lighthouse-Erweiterung verwenden. Sie liefern in der Regel dieselben Informationen, da aXe die zugrunde liegende Engine für das Lighthouse-Steuerfeld ist. Die aXe-Erweiterung hat eine andere UI und beschreibt Audits etwas anders.
Ein Vorteil der aXe-Erweiterung gegenüber dem Bereich „Audits“ besteht darin, dass Sie fehlerhafte Knoten untersuchen und hervorheben können.
Der Bereich „Bedienungshilfen“
Im Bereich „Bedienungshilfen“ können Sie die Baumstruktur für Barrierefreiheit, die ARIA-Attribute und die berechneten Eigenschaften der DOM-Knoten ansehen.
So öffnen Sie den Bereich „Bedienungshilfen“:
- Klicken Sie auf den Tab Elemente.
- Wählen Sie in der DOM-Baumstruktur das Element aus, das Sie überprüfen möchten.
- Klicken Sie auf den Tab Bedienungshilfen. Dieser Tab ist möglicherweise hinter der Schaltfläche Weitere Tabs
verborgen.
verborgen.
Position eines Elements im Baum für Barrierefreiheit ansehen
Die Barrierefreiheitsstruktur ist eine Teilmenge des DOM-Baums. Sie enthält nur Elemente aus dem DOM-Baum, die für die Darstellung des Seiteninhalts in einem Screenreader relevant und nützlich sind.
Überprüfen Sie die Position eines Elements in der Baumstruktur für Barrierefreiheit im Bereich „Bedienungshilfen“.
In dieser Ansicht können Sie nur einen einzelnen Knoten und dessen Ancestors untersuchen. So können Sie sich den gesamten Baum für Barrierefreiheit ansehen:
(Vorabversion) Ganzseitigen Baum für Barrierefreiheit ansehen
Die Vollbildansicht des Baums für Barrierefreiheit ermöglicht es Ihnen, die gesamte Baumstruktur zu erkunden und besser zu verstehen, wie Ihre Webinhalte mit Hilfstechnologien konfrontiert werden.
So erkunden Sie den Baum für Barrierefreiheit:
- Klicken Sie auf das Kästchen
Ganzseitige Barrierefreiheitsstruktur aktivieren.
Klicken Sie oben in der Aktionsleiste auf Entwicklertools aktualisieren.
Aktivieren bzw. deaktivieren Sie rechts oben im Bereich Elemente die Schaltfläche
Zur Baumansicht für Barrierefreiheit wechseln.
Sehen Sie sich den Baum für Bedienungshilfen an. Sie können Knoten maximieren oder per Klick unter Berechnete Attribute Details aufrufen.
Wählen Sie einen Knoten aus und klicken Sie auf die Schaltfläche
Zur DOM-Baumansicht wechseln, um zurück zur DOM-Baumansicht zu wechseln.
Der entsprechende DOM-Knoten ist jetzt ausgewählt. Dies ist ein gutes Mittel, um die Zuordnung zwischen dem DOM-Knoten und seinem Baumknoten für die Barrierefreiheit zu verstehen.
ARIA-Attribute eines Elements ansehen
ARIA-Attribute sorgen dafür, dass Screenreader alle Informationen haben, die sie benötigen, um den Inhalt einer Seite richtig darzustellen.
Sehen Sie sich die ARIA-Attribute eines Elements im Bereich „Bedienungshilfen“ an.
Reihenfolge der Elemente auf dem Bildschirm ansehen
Die Elemente auf der Seite werden nicht immer in der Reihenfolge angezeigt, in der sie sich in der Quelle befinden. Dies könnte Nutzende verwirren, die beim Navigieren auf assistive Technologien angewiesen sind.
So rufen Sie die Quellenreihenfolge auf Ihrer Website auf und beheben Fehler:
- Untersuchen Sie ein Element auf der Seite.
- Klicken Sie unter Elemente > Bedienungshilfen > Quellreihenfolge-Betrachter auf das Kästchen
Reihenfolge der Quellreihenfolge anzeigen.
Im Darstellungsbereich werden verschachtelte Elemente von DevTools mit Rahmen umrandet und mit Zahlen markiert, die ihrer Quellreihenfolge entsprechen.
Berechnete Bedienungshilfen eines Elements ansehen
Einige Bedienungshilfen werden dynamisch vom Browser berechnet. Sie können diese Eigenschaften im Bereich Bedienungshilfen unter Berechnete Eigenschaften aufrufen.
Sehen Sie sich die berechneten Eigenschaften eines Elements für die Barrierefreiheit im Bereich „Bedienungshilfen“ an.
Kontrastarmen Text erkennen und korrigieren
Die Entwicklertools können automatisch Probleme mit geringem Kontrast finden und bessere Farben vorschlagen, um sie zu beheben. Weitere Informationen finden Sie unter Website lesbar machen.