Diese Seite ist eine umfassende Referenz zu den Bedienungshilfen in den Chrome-Entwicklertools. Es richtet sich an Webentwickler, die:
- Grundkenntnisse der Entwicklertools haben, z. B. wie sie geöffnet werden
- Sie sind mit den Prinzipien und Best Practices für Barrierefreiheit vertraut.
Mit dieser Referenz möchten wir Ihnen helfen, alle in den Entwicklertools verfügbaren Tools zu finden, mit denen Sie die Barrierefreiheit einer Seite prüfen können.
Unter Chrome-Entwicklertools mit unterstützender Technologie nutzen finden Sie Informationen dazu, wie Sie in den Entwicklertools mit einer Hilfstechnologie wie einem Screenreader navigieren können.
Unter Barrierefreiheit im Internet erfahren Sie, wie Sie barrierefreie Websites entwickeln.
Übersicht über die Bedienungshilfen in den Chrome-Entwicklertools
In diesem Abschnitt wird erläutert, wie sich die Entwicklertools in dein allgemeines Toolkit für Barrierefreiheit integrieren lassen.
Wenn Sie herausfinden möchten, ob eine Seite barrierefrei 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 für Screenreader korrekt ausgezeichnet?
Im Allgemeinen können Ihnen die Entwicklertools dabei helfen, Fehler in Bezug auf Frage 2 zu beheben, da diese Fehler automatisch erkannt werden können. Frage 1 ist genauso wichtig, aber leider können Ihnen die Entwicklertools dabei nicht weiterhelfen. Die einzige Möglichkeit, Fehler in Bezug auf Frage 1 zu finden, besteht darin, selbst eine Seite mit einer Tastatur oder einem Screenreader zu verwenden. Weitere Informationen finden Sie unter Anleitung zur Überprüfung der Barrierefreiheit.
Zugänglichkeit einer Seite prüfen
Im Allgemeinen können Sie mit den Bedienungshilfen im Bereich Lighthouse feststellen, ob:
- Eine Seite ist für Screenreader korrekt mit Markup versehen.
- Die Kontrastverhältnisse der Textelemente auf einer Seite sind ausreichend. 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 Entwicklertools auf den Tab Lighthouse. Die Entwicklertools bieten verschiedene Konfigurationsoptionen.
Wählen Sie unter Gerät die Option Mobilgerät aus, wenn Sie ein Mobilgerät simulieren möchten. Dadurch ändert sich der User-Agent-String unterschiedlich und die Größe des Darstellungsbereichs wird geändert. Wenn die mobile Version der Seite anders als die Desktopversion angezeigt wird, kann diese Option erhebliche Auswirkungen auf die Ergebnisse der Prüfung haben.
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 Drosselung können Sie das Netzwerk und die CPU drosseln. Dies ist für die Analyse der Lastleistung nützlich. Diese Option sollte für Ihre Barrierefreiheitsbewertung irrelevant sein, Sie können also eine beliebige Option verwenden.
Mit dem Kästchen Speicherinhalt löschen können Sie den gesamten Speicher löschen, bevor die Seite geladen wird, oder den Speicher zwischen dem Laden der Seite beibehalten. Diese Option ist wahrscheinlich auch für Ihre Barrierefreiheitsbewertung irrelevant, Sie können also die von Ihnen bevorzugte Option verwenden.
Klicken Sie auf Bericht erstellen. Nach 10 bis 30 Sekunden stellt die Entwicklertools einen Bericht bereit. 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 dieses Audits aufzurufen.
Siehe auch: aXe-Erweiterung
Sie können die aXe-Erweiterung oder die Lighthouse-Erweiterung statt des in Chrome standardmäßig verfügbaren Lighthouse-Steuerfelds 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 Benutzeroberfläche und beschreibt Audits etwas anders.
Ein Vorteil der aXe-Erweiterung gegenüber dem Bereich „Audits“ ist, dass Sie damit fehlerhafte Knoten untersuchen und hervorheben können.
Im Bereich „Bedienungshilfen“
Im Bereich „Bedienungshilfen“ können Sie den Baum für die Barrierefreiheit, ARIA-Attribute und berechnete Attribute für die Barrierefreiheit von 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 untersuchen möchten.
- Klicken Sie auf den Tab Bedienungshilfen. Dieser Tab ist möglicherweise hinter der Schaltfläche Weitere Tabs
verborgen.
Position eines Elements im Baum für Barrierefreiheit ansehen
Die Baumansicht für Barrierefreiheit ist eine Teilmenge der DOM-Baumstruktur. Sie enthält nur Elemente aus der DOM-Baumstruktur, die für die Anzeige des Seiteninhalts in einem Screenreader relevant und nützlich sind.
Im Bereich Bedienungshilfen können Sie die Position eines Elements in der Baumansicht der Bedienungshilfen prüfen.
In dieser Ansicht können Sie nur einen einzelnen Knoten und seine Ancestors untersuchen. So können Sie sich die gesamte Liste der Bedienungshilfen ansehen:
(Vorabversion) Ganzseitige Baumstruktur für Bedienungshilfen
Die ganzseitige Ansicht des Baums für Barrierefreiheit ermöglicht es Ihnen, den gesamten Baum zu erkunden, und hilft Ihnen dabei, besser zu verstehen, wie Ihre Webinhalte von Hilfstechnologien genutzt werden.
So sehen Sie sich den Baum für Barrierefreiheit an:
- Klicken Sie das Kästchen
Ganzseitige Barrierefreiheitsstruktur aktivieren an. Klicken Sie oben in der Aktionsleiste auf Entwicklertools aktualisieren.
Klicken Sie rechts oben im Steuerfeld Elemente auf die Schaltfläche
Zur Baumansicht für Bedienungshilfen wechseln.
Durchsuchen Sie den Baum für Barrierefreiheit. Sie können die Knoten maximieren oder klicken, um unter Computed-Attribute Details aufzurufen.
Wählen Sie einen Knoten aus und klicken Sie auf die Schaltfläche
Zur DOM-Baumansicht wechseln, um zur DOM-Baumansicht zurückzukehren.Der entsprechende DOM-Knoten ist jetzt ausgewählt. Dies ist eine gute Möglichkeit, die Zuordnung zwischen dem DOM-Knoten und seinem Bedienungshilfen-Baumknoten 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.
Quellreihenfolge von Elementen 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 auf assistive Technologien angewiesen sind, um im Web zu navigieren.
So rufen Sie die Reihenfolge der Quellen auf Ihrer Website auf und beheben Fehler:
- Prüfen Sie ein Element auf der Seite.
- Klicken Sie unter Elemente > Bedienungshilfen > Quellreihenfolge-Anzeige auf das Kästchen
Quellreihenfolge anzeigen.
Im Darstellungsbereich werden verschachtelte Elemente von den Entwicklertools mit Rahmen umrandet und mit Zahlen gekennzeichnet, die ihrer Quellreihenfolge entsprechen.
Berechnete Bedienungshilfen eines Elements ansehen
Einige Bedienungshilfen werden vom Browser dynamisch berechnet. Diese Attribute können im Bereich Bedienungshilfen im Bereich Berechnete Eigenschaften angezeigt werden.
Sie können sich die berechneten Eigenschaften eines Elements im Bereich „Bedienungshilfen“ ansehen.
Text mit niedrigem Kontrast erkennen und korrigieren
Die Entwicklertools können Probleme mit geringem Kontrast automatisch finden und bessere Farben zur Behebung vorschlagen. Weitere Informationen finden Sie unter Lesbarkeit Ihrer Website verbessern.