Referenz zu Bedienungshilfen

Kayce Basques

Sofia Emelianova

Auf dieser Seite finden Sie eine umfassende Referenz zu den Bedienungshilfen in den Chrome-Entwicklertools. Sie richtet sich an Webentwickler, die

• Sie sollten grundlegende Kenntnisse von DevTools haben, z. B. wie Sie sie öffnen.
• Sie sind mit Grundsätzen und Best Practices für Barrierefreiheit vertraut.

Diese Referenz soll Ihnen helfen, alle Tools in DevTools zu finden, mit denen Sie die Barrierefreiheit einer Seite untersuchen können.

Wenn Sie Hilfe beim Navigieren in den DevTools mit einer unterstützenden Technologie wie einem Screenreader benötigen, lesen Sie den Artikel Mit unterstützenden Technologien in den Chrome-Entwicklertools navigieren.

Unter Learn Accessibility finden Sie Informationen zum Entwickeln barrierefreier Websites.

Übersicht über die Bedienungshilfen in Chrome DevTools

In diesem Abschnitt wird erläutert, wie DevTools in Ihr gesamtes Barrierefreiheitstoolkit passt.

Bei der Entscheidung, ob eine Seite zugänglich ist, sollten Sie sich zwei allgemeine Fragen stellen:

1. Kann ich auf der Seite mit einer Tastatur oder einem Screenreader navigieren?
2. Sind die Elemente der Seite für Screenreader richtig gekennzeichnet?

Im Allgemeinen können Sie mit DevTools Fehler im Zusammenhang mit Frage 2 beheben, da diese Fehler einfach automatisch erkannt werden können. Frage 1 ist genauso wichtig, aber leider können Sie DevTools dabei nicht unterstützen. 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 Prüfung auf Barrierefreiheit durchführen.

Barrierefreiheit einer Seite prüfen

Im Allgemeinen können Sie mit den Bedienungshilfen-Prüfungen im Bereich Lighthouse feststellen, ob:

• Eine Seite ist für Screenreader richtig gekennzeichnet.
• Die Textelemente auf einer Seite haben ein ausreichendes Kontrastverhältnis. Weitere Informationen finden Sie unter Website lesbarer gestalten.

So prüfen Sie eine Seite:

1. Rufen Sie die URL auf, die Sie prüfen möchten.

2. Klicken Sie in den DevTools auf den Tab Lighthouse. In den DevTools werden verschiedene Konfigurationsoptionen angezeigt.

   

3. 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 Viewports wird angepasst. Wenn die mobile Version der Seite anders als die Desktopversion angezeigt wird, kann sich diese Option erheblich auf die Ergebnisse Ihres Audits auswirken.

4. Achten Sie darauf, dass im Bereich Lighthouse die Option Bedienungshilfen aktiviert ist. Deaktivieren Sie die anderen Kategorien, wenn Sie sie aus Ihrem Bericht ausschließen möchten. Lassen Sie sie aktiviert, wenn Sie weitere Möglichkeiten zur Verbesserung der Qualität Ihrer Seite finden möchten.

5. Im Bereich Drosselung können Sie das Netzwerk und die CPU drosseln. Das ist nützlich, wenn Sie die Ladeleistung analysieren. Diese Option sollte sich nicht auf Ihren Barrierefreiheitswert auswirken. Sie können also verwenden, was Ihnen lieber ist.

6. Mit dem Kästchen Speicher löschen können Sie den gesamten Speicher vor dem Laden der Seite löschen oder den Speicher zwischen Seitenaufrufen beibehalten. Diese Option ist wahrscheinlich auch für Ihren Barrierefreiheitswert irrelevant. Sie können also verwenden, was Sie bevorzugen.

7. Klicken Sie auf Bericht erstellen. Nach 10 bis 30 Sekunden wird in den Entwicklertools ein Bericht angezeigt. In Ihrem Bericht finden Sie verschiedene Tipps zur Verbesserung der Barrierefreiheit der Seite.

   

8. Klicken Sie auf einen Audit, um mehr darüber zu erfahren.

   

9. Klicken Sie auf Weitere Informationen, um die Dokumentation zu diesem Audit aufzurufen.

   

Siehe auch: aXe-Erweiterung

Möglicherweise bevorzugen Sie die aXe-Erweiterung oder die Lighthouse-Erweiterung anstelle des Lighthouse-Bereichs, der standardmäßig in Chrome verfügbar ist. Sie liefern in der Regel dieselben Informationen, da aXe die zugrunde liegende Engine ist, die das Lighthouse-Panel 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 ist, dass Sie damit fehlerhafte Knoten untersuchen und hervorheben können.

Inhaltsfluss mit der Geräte-Symbolleiste testen

Das Kriterium WCAG-Reflow (Web Content Accessibility Guidelines) empfiehlt, dass Webinhalte auch dann ohne Informationsverlust sichtbar bleiben, wenn die Größe des Viewports geändert wird oder sich die Ausrichtung ändert. Wenn Sie Inhalte an einer einzelnen Spalte ausrichten, unterstützen Sie Nutzer, die vergrößerten Text verwenden. Wenn Sie testen möchten, wie Ihre Inhalte umfließen, ändern Sie die Größe des Darstellungsbereichs dynamisch mit der Geräte-Symbolleiste im Lighthouse-Bereich.

Um die Größe des Darstellungsbereichs zu ändern, ziehen Sie die Ziehpunkte auf die gewünschten Abmessungen. Die spezifischen Dimensionen, die getestet werden müssen, finden Sie im WCAG-Erfolgskriterium für das Umfließen von Inhalten.

Tab „Bedienungshilfen“

Auf dem Tab „Barrierefreiheit“ können Sie den Barrierefreiheitsbaum, ARIA-Attribute und berechnete Barrierefreiheitseigenschaften von DOM-Knoten ansehen.

So öffnen Sie den Tab Bedienungshilfen:

1. Klicken Sie auf den Bereich Elemente.
2. Wählen Sie im DOM-Baum das Element aus, das Sie untersuchen möchten.
3. Klicken Sie auf den Tab Bedienungshilfen. Dieser Tab ist möglicherweise hinter der Schaltfläche Weitere Tabs keyboard_double_arrow_right verborgen.

Sie können den Tab Bedienungshilfen nach vorn ziehen, um in Zukunft schneller darauf zugreifen zu können.

Position eines Elements im Baum für Barrierefreiheit ansehen

Die Baumansicht für Barrierefreiheit ist eine Teilmenge des DOM-Baums. Es enthält nur Elemente aus dem DOM-Baum, die für die Anzeige der Seiteninhalte in einem Screenreader relevant und nützlich sind.

Auf dem Tab „Bedienungshilfen“ können Sie die Position eines Elements im Bedienungshilfenbaum untersuchen.

In dieser Ansicht können Sie nur einen einzelnen Knoten und seine übergeordneten Knoten untersuchen. So sehen Sie sich den gesamten Barrierefreiheitsbaum an:

(Vorabversion) Vollbild-Baumansicht für Barrierefreiheit ansehen

In der Vollbildansicht des Barrierefreiheitsbaums können Sie den gesamten Baum durchsuchen und besser nachvollziehen, wie Ihre Webinhalte für assistive Technologien dargestellt werden.

So sehen Sie sich die Baumansicht für Barrierefreiheit an:

1. Klicken Sie das Kästchen neben science Enable full-page accessibility tree an.

2. Klicken Sie oben in der Aktionsleiste auf DevTools neu laden.

   

3. Klicken Sie rechts oben im Bereich Elemente auf die Schaltfläche accessibility_new Zur Ansicht des Bedienungshilfenbaums wechseln.

   

4. Sehen Sie sich die Baumansicht für Barrierefreiheit an. Sie können Knoten maximieren oder darauf klicken, um Details unter Berechnete Eigenschaften aufzurufen.

5. 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 zugehörigen Knoten im Barrierefreiheitsbaum nachvollziehen.

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 auf dem Tab „Bedienungshilfen“ ansehen.

Quellenreihenfolge von Elementen auf dem Bildschirm ansehen

Die Elemente auf der Seite werden nicht immer in der Reihenfolge angezeigt, in der sie in der Quelle enthalten sind. Das kann Nutzer verwirren, die auf Hilfstechnologien angewiesen sind, um im Web zu navigieren.

So rufen Sie die Quellreihenfolge auf Ihrer Website auf und beheben Fehler:

1. Element auf der Seite untersuchen
2. Klicken Sie unter Elemente > Bedienungshilfen > Source Order Viewer (Tool zur Anzeige der Quellreihenfolge) auf das Kästchen check_box Show source order (Quellreihenfolge anzeigen).

Im Darstellungsbereich umrandet DevTools verschachtelte Elemente mit Rahmen und kennzeichnet sie mit Zahlen, die ihrer Quellreihenfolge entsprechen.

Berechnete Barrierefreiheitsattribute eines Elements ansehen

Einige Eigenschaften für Bedienungshilfen werden vom Browser dynamisch berechnet. Diese Attribute können Sie auf dem Tab Barrierefreiheit im Bereich Berechnete Attribute ansehen.

Die berechneten Bedienungshilfe-Attribute eines Elements können Sie auf dem Tab „Bedienungshilfe“ ansehen.

Tab „Rendering“

Auf dem Tab Rendering können Sie bestimmte CSS-Media-Funktionen emulieren, ohne sie manuell in Ihrem Code oder Ihrer Testumgebung anzugeben. Diese Media-Funktionen ändern das Erscheinungsbild Ihrer Webseite basierend auf den Geräteeinstellungen des Nutzers. So testen Sie die visuelle Barrierefreiheit Ihrer Seite: Öffnen Sie den Tab Rendering und sehen Sie sich die folgenden Optionen an:

• Mit Sehschwächen emulieren können Sie Ihre Seite mit verschiedenen simulierten Sehschwächen ansehen.
• CSS-Medienfunktion prefers-color-scheme emulieren, um zu sehen, wie Ihre Seite mit aktiviertem dunklen oder hellen Modus aussieht. Viele betrachten den dunklen Modus als eine ästhetische Entscheidung, aber Dark mode as an accessibility tool (Der dunkle Modus als Tool für Barrierefreiheit) zeigt, dass er auch anderweitig nützlich ist.
• Mit CSS-Medientyp emulieren können Sie Ihre Seite im Druck- oder Bildschirmstil anzeigen lassen.
• CSS-Medienfunktion forced-colors emulieren: So sehen Sie, wie Ihre Seite aussieht, wenn der User-Agent einen Modus mit erzwungenen Farben aktiviert hat.
• CSS-Medienfunktion prefers-contrast emulieren: Damit können Sie Ihre Webinhalte mit einem höheren, niedrigeren oder bestimmten Kontrastwert anzeigen lassen.
• CSS-Medienfunktion prefers-reduced-motion emulieren: So können Sie Ihre Webinhalte mit reduzierter Bewegung ansehen. Bei einigen Nutzern können animierte Inhalte zu Ablenkung oder Übelkeit führen. Mit dieser Option können Sie sehen, wie Ihre Seite ohne Animationen oder Funktionen wie sanftes Scrollen aussieht.
• CSS-Media-Funktion prefers-reduced-transparency emulieren: So sehen Sie, wie Ihre Webinhalte dargestellt werden, wenn der Nutzer anfordert, die auf dem Gerät verwendeten transparenten oder durchscheinenden Ebeneneffekte zu reduzieren.

Text mit geringem Kontrast erkennen und korrigieren

DevTools kann automatisch Probleme mit geringem Kontrast erkennen und bessere Farben vorschlagen, um sie zu beheben. Weitere Informationen