Referenz zur Barrierefreiheit

Diese Seite ist eine umfassende Referenz zu Barrierefreiheitsfunktionen in Chrome DevTools.It ist für Webentwickler gedacht, die:

• Haben Sie ein grundlegendes Verständnis von DevTools, z. B. wie man es öffnet.
• Sind mit den Zugänglichkeitsprinzipien und Best Practices vertraut.

Der Zweck dieser Referenz ist es, Ihnen zu helfen, alle verfügbaren Werkzeuge zu entdecken inDevTools Das kann Ihnen helfen, die Zugänglichkeit einer Seite zu untersuchen.

Siehe Navigieren in Chrome-DevTools mit unterstützender Technologiewenn Sie Hilfe zum Navigieren in DevTools mit einer unterstützenden Technologie wie einem Screenreader suchen.

Übersicht der Barrierefreiheitsfunktionen in Chrome DevTools

In diesem Abschnitt wird erläutert, wie DevTools in Ihr gesamtes Toolkit für Barrierefreiheit passt.

Wenn Sie feststellen, ob eine Seite zugänglich ist, müssen Sie 2 allgemeine Fragen berücksichtigen:

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

Im Allgemeinen kann DevTools Ihnen helfen, Fehler im Zusammenhang mit Frage 2 zu beheben, da diese Fehler auf automatisierte Weise leicht zu erkennen sind. Frage 1 ist genauso wichtig, aber DevToolscan kann Ihnen dort leider nicht helfen. Die einzige Möglichkeit, Fehler im Zusammenhang mit Frage 1 zu finden, besteht darin, selbst zu versuchen, eine Pagewith-Tastatur oder einen Screenreader zu verwenden. Lesen Sie, wie Sie eine Überprüfung der Barrierefreiheit durchführen, um mehr zu erfahren.

Überprüfen der Barrierefreiheit einer Seite

Im Allgemeinen können Sie im Bereich Audits feststellen, ob:

• Eine Seite ist für Screenreader ordnungsgemäß markiert.
• Die Textelemente auf einer Seite haben ausreichende Kontrastverhältnisse. Siehe auch Anzeigen des Kontrastverhältnisses eines Textelements in der Farbauswahl.

So prüfen Sie eine Seite:

1. Wechseln Sie zu der URL, die Sie überprüfen möchten.

2. Klicken Sie in DevTools auf die Registerkarte Audits. DevTools zeigt Ihnen verschiedene Konfigurationsoptionen.

   

3. Wählen Sie unter Gerät die Option Mobil aus, wenn Sie ein Mobilgerät simulieren möchten. Diese Option changesdifferently Ihre User-Agent-Zeichenfolge und ändert die Größe des Ansichtsfensters. Wenn die mobile Version der Seite anders angezeigt wird als die Desktop-Version, kann diese Option erhebliche Auswirkungen auf die Ergebnisse Ihres Audits haben.

4. Stellen Sie im Abschnitt Audits sicher, dass die Barrierefreiheit aktiviert ist. Deaktivieren Sie die othercategories, wenn Sie sie aus Ihrem Bericht ausschließen möchten. Lassen Sie sie aktiviert, wenn Sie möchtenentdecken Sie andere Möglichkeiten, um die Qualität Ihrer Seite zu verbessern.

5. Die Drosselung abschnitt können sie drosseln die netzwerk und CPU, die ist nützlich, wenn analyzingload leistung. Diese Option sollte für Ihre Barrierefreiheitsbewertung irrelevant sein, sodass Sie sie nach Belieben verwenden können.

6. Mit dem Kontrollkästchen Speicher löschen können Sie den gesamten Speicher vor dem Laden der Seite oder preservestorage zwischen dem Laden der Seite löschen. Diese Option ist wahrscheinlich auch für Ihre Barrierefreiheitsbewertung irrelevant, sodass Sie alles verwenden können, was Sie bevorzugen.

7. Klicken Sie auf Audits ausführen. Nach 10 bis 30 Sekunden liefert DevTools einen Bericht.Ihr Bericht gibt Ihnen verschiedene Tipps, wie Sie die Barrierefreiheit der Seite verbessern können.

   

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

   

9. Klicken Sie auf Weitere Informationen, um die Dokumentation dieses Audits anzuzeigen.

   

Siehe auch: Axterweiterung

Möglicherweise verwenden Sie lieber die Axterweiterung als das Bedienfeld.Sie liefern im Allgemeinen die gleichen Informationen, da aXe die zugrunde liegende Engine ist, die das Audit-Panel antreibt. Die aXe-Erweiterung hat eine andere Benutzeroberfläche und beschreibt Audits etwas anders.Ein Vorteil der aXe-Erweiterung gegenüber dem Audits-Panel besteht darin, dass Sie fehlerhafte Knoten überprüfen und hervorheben können.

Der Bereich Barrierefreiheit

Im Bereich Barrierefreiheit können Sie den Barrierefreiheitsbaum, die ARIA-Attribute und die berechneten Barrierefreiheitseigenschaften von DOM-Knoten anzeigen.

So öffnen Sie den Bereich Barrierefreiheit:

1. Klicken Sie auf die Registerkarte Elemente.
2. Wählen Sie in der DOM-Struktur das Element aus, das Sie untersuchen möchten.
3. Klicken Sie auf die Registerkarte Barrierefreiheit. Diese Registerkarte kann hinter der Schaltfläche Weitere Registerkarten verborgen sein.

Anzeigen der Position eines Elements im Barrierefreiheitsbaum

Der Barrierefreiheitsbaum ist eine Teilmenge des DOM-Baums. Es enthält nur Elemente aus dem DOM-Baum, die für die Anzeige des Seiteninhalts in einem Screenreader relevant und nützlich sind.

Überprüfen Sie die Position eines Elements in der Struktur Barrierefreiheit im Bereich Barrierefreiheit.

ARIA-Attribute eines Elements anzeigen

ARIA-Attribute stellen sicher, dass Screenreader über alle Informationen verfügen, die sie benötigen, um den Inhalt einer Seite richtig darzustellen.

Zeigen Sie die ARIA-Attribute eines Elements im Bereich Barrierefreiheit an.

Zeigt die berechneten Barrierefreiheitseigenschaften eines Elements an

Einige Barrierefreiheitseigenschaften werden vom Browser dynamisch berechnet. Diese Eigenschaften können im Abschnitt Berechnete Eigenschaften des Bereichs Barrierefreiheit angezeigt werden.

Zeigen Sie die berechneten Barrierefreiheitseigenschaften eines Elements im Bereich Barrierefreiheit an.

Kontrastverhältnis eines Textelements in der Farbauswahl anzeigen

Einige Personen mit Sehbehinderung sehen Bereiche nicht als sehr hell oder sehr dunkel an. Alles neigt dazuerscheinen bei ungefähr der gleichen Helligkeit, was es schwierig macht, Konturen und Kanten zu unterscheiden.Das Kontrastverhältnis misst den Helligkeitsunterschied zwischen Vorder- und Hintergrund des Textes. Wenn Ihr Text ein niedriges Kontrastverhältnis hat, können diese sehbehinderten Benutzer Ihre Website buchstäblich als leeren Bildschirm erleben.

Mit der Farbauswahl können Sie sicherstellen, dass Ihr Text die empfohlenen Kontrastwerte erfüllt:

1. Klicken Sie auf die Registerkarte Elemente.

2. Wählen Sie in der DOM-Struktur das Textelement aus, das Sie überprüfen möchten.

   

3. Klicken Sie im Bereich Stile auf das Farbquadrat neben dem Wert color des Elements.

   

4. Überprüfen Sie den Abschnitt Kontrastverhältnis der Farbauswahl. Ein Häkchen bedeutet dasDas Element erfüllt die Mindestempfehlung.Zwei Häkchen bedeuten, dass es die erweiterte Empfehlung erfüllt.

   

5. Klicken Sie auf den Abschnitt Kontrastverhältnis, um weitere Informationen anzuzeigen. Eine Linie wird im Visualpicker oben in der Farbauswahl angezeigt. Wenn die aktuelle Farbe den Empfehlungen entspricht, dannalles auf derselben Seite der Linie entspricht auch den Empfehlungen. Wenn die aktuelle Farbe nicht den Empfehlungen entspricht, entspricht auch alles auf derselben Seite nicht den Empfehlungen.

   

Feedback