Chrome-Entwicklertools mit Hilfstechnologien verwenden

Dodson

Dieser Leitfaden richtet sich an Nutzer, die hauptsächlich auf Hilfstechnologien wie Screenreader-Zugriff angewiesen sind und die Chrome-Entwicklertools verwenden. Chrome DevTools ist eine Suite von Webentwicklertools, die in den Google Chrome-Browser integriert sind. In der Referenz zur Barrierefreiheit finden Sie Informationen zu Entwicklertools-Funktionen zur Verbesserung der Barrierefreiheit einer Webseite.

Die Zugänglichkeit der Entwicklertools befindet sich in der Entwicklung. Einige Panels und Tabs funktionieren mit assistiven Technologien besser als andere. Dieser Leitfaden führt Sie durch die Bereiche, die am besten zugänglich sind, und hebt spezifische Probleme hervor, die dabei auftreten können.

Überblick

Bevor Sie beginnen, sollten Sie ein mentales Modell zur Struktur der Entwicklertools-Benutzeroberfläche haben. Die Entwicklertools sind in eine Reihe von Bereichen unterteilt, die in einer ARIA-tablist organisiert sind. Beispiel:

  • Im Steuerfeld Elemente können Sie DOM-Knoten oder CSS ansehen und ändern.
  • Im Bereich Console können Sie JavaScript-Protokolle lesen und Objekte live bearbeiten.

Im Inhaltsbereich der einzelnen Bereiche gibt es eine Reihe verschiedener Tools, die in der Dokumentation oft als Tabs oder Bereiche bezeichnet werden. Der Bereich Elemente enthält beispielsweise zusätzliche Tabs, auf denen Sie Ereignis-Listener, die Struktur der Barrierefreiheit und vieles mehr untersuchen können. Die Unterscheidung zwischen Tabs und Bereichen ist etwas willkürlich. Sie sehen nur einen der beiden Begriffe, um die Übereinstimmung mit der offiziellen Entwicklertools-Dokumentation zu wahren.

Tastenkombinationen

In der Referenz zu Tastenkombinationen für Entwicklertools finden Sie nützliche Informationen. Vergessen Sie nicht, es als Lesezeichen zu speichern, um darauf zurückzukommen, wenn Sie die verschiedenen Bereiche erkunden.

Entwicklertools öffnen

Lesen Sie zuerst den Artikel Chrome-Entwicklertools öffnen. Es gibt verschiedene Möglichkeiten, die Entwicklertools über Tastenkombinationen oder Menüpunkte zu öffnen.

Zwischen Steuerfeldern navigieren

Über die Tastatur navigieren

  • Drücken Sie in geöffneten Entwicklertools Strg + ] oder Befehlstaste + ] (Mac), um den nächsten Bereich hervorzuheben.
  • Drücken Sie Strg + [ oder Command + [ (Mac), um den vorherigen Bereich hervorzuheben.
  • Sie können auch Umschalttaste + Tabulatortaste verwenden, um den Fokus auf das tablist eines Bereichs zu verschieben, und mit den Pfeiltasten zwischen den Bereichen wechseln. Allerdings kann es schneller sein, die zuvor genannten Tastenkombinationen zu verwenden.

Bekannte Probleme

  • Einige Bereiche, z. B. die Bereiche Konsole und Leistung, werden möglicherweise sofort nach der Aktivierung in den Inhaltsbereich verschoben. Dies kann die Navigation mit den Pfeiltasten erschweren.
  • Der Name des ausgewählten Bereichs wird angesagt, aber erst, nachdem der fokussierte Inhalt im Steuerfeld gelesen wurde. Das kann leicht übersehen werden.

In Befehlsmenü navigieren

Wenn Sie den Fokus auf ein bestimmtes Steuerfeld legen möchten, verwenden Sie das Befehlsmenü:

  1. Drücken Sie in den Entwicklertools Strg + Umschalttaste + P oder Befehlstaste + Umschalttaste + P (Mac), um das Befehlsmenü zu öffnen. Das Befehlsmenü ist ein Kombinationsfeld für die automatische Vervollständigung der Suche.
  2. Geben Sie den Namen des Bereichs ein, den Sie öffnen möchten, und navigieren Sie mit dem Abwärtspfeil zur richtigen Option.
  3. Drücken Sie die Eingabetaste, um einen Befehl auszuführen.

So öffnen Sie beispielsweise das Steuerfeld Elemente:

  1. Öffnen Sie das Befehlsmenü.
  2. Geben Sie E und dann L ein. Die Option Bereich > Elemente anzeigen ist ausgewählt.
  3. Drücken Sie die Eingabetaste, um den Befehl auszuführen, mit dem der Bereich geöffnet wird.

Wenn Sie einen Bereich auf diese Weise öffnen, wird der Fokus auf dessen Inhalt gelegt. Im Bereich Elemente wird der DOM-Baum hervorgehoben.

Steuerfeld „Elemente“

Element auf der Seite prüfen

  1. Navigieren Sie mit dem Cursor des Screenreaders zu dem Element, das Sie prüfen möchten.
  2. Simulieren Sie einen Rechtsklick auf das Element, um das Kontextmenü zu öffnen.
  3. Wählen Sie die Option Untersuchen aus. Dadurch wird der Bereich Elemente geöffnet und das Element in der DOM-Baumstruktur hervorgehoben.

Der DOM-Baum wird als ARIA tree dargestellt. Ein Beispiel finden Sie unter DOM-Baum mit einer Tastatur navigieren.

Code für ein Element in der DOM-Baumstruktur kopieren

  1. Zeigen Sie mit dem Fokus auf einen Knoten in der DOM-Baumstruktur und rufen Sie das Kontextmenü auf.
  2. Maximieren Sie die Option Kopieren.
  3. Wählen Sie OuterHTML kopieren aus.

Bekannte Probleme

  • Mit OuterHTML kopieren wird häufig nicht der aktuelle Knoten ausgewählt, sondern der übergeordnete Knoten. Der Inhalt des Elements sollte jedoch noch im kopierten outerHTML-Element vorhanden sein.

Attribute eines Elements in der DOM-Baumstruktur ändern

  • Bewegen Sie den Fokus auf einen Knoten in der DOM-Baumstruktur und drücken Sie die Eingabetaste, um ihn bearbeiten zu können.
  • Drücken Sie die Tabulatortaste, um zwischen den Attributwerten zu wechseln. Wenn Sie „Leerzeichen“ hören, befinden Sie sich in einer leeren Texteingabe und können einen neuen Attributwert eingeben.
  • Drücken Sie Strg + Eingabetaste oder die Befehlstaste + Eingabetaste (Mac), um die Änderung zu akzeptieren und sich den gesamten Inhalt des Elements anzuhören.

Bekannte Probleme

  • Wenn Sie Text in die Texteingabe eingeben, erhalten Sie kein Feedback. Wenn Sie sich vertippen und die Pfeiltasten verwenden, erhalten Sie auch kein Feedback. Die einfachste Möglichkeit, Ihre Arbeit zu überprüfen, besteht darin, die Änderung zu akzeptieren und zu warten, bis das gesamte Element angekündigt wird.

HTML-Code eines Elements in der DOM-Baumstruktur bearbeiten

  • Bewegen Sie den Fokus auf einen Knoten in der DOM-Baumstruktur und drücken Sie die Eingabetaste, um ihn bearbeiten zu können.
  • Drücken Sie die Tabulatortaste, um zwischen den Attributwerten zu wechseln. Wenn Sie den Namen des Elements hören, z. B. „h2“, befinden Sie sich innerhalb einer Texteingabe und können den Typ des Elements ändern.
  • Drücken Sie Strg + Eingabetaste oder die Befehlstaste + Eingabetaste (Mac), um die Änderung zu akzeptieren.

Wenn Sie beispielsweise h3 eingeben und Strg + Eingabetaste oder Befehlstaste + Eingabetaste (Mac) drücken, werden die Start- und End-Tags des Elements in h3 geändert.

Tabs im Steuerfeld „Elemente“

Der Bereich Elemente enthält zusätzliche Tabs, auf denen Sie beispielsweise den auf ein Element angewendeten CSS-Code oder seine Position in der Baumansicht für Bedienungshilfen untersuchen können.

  • Bewegen Sie den Fokus auf einen Knoten in der DOM-Baumstruktur und drücken Sie die Tabulatortaste, bis Sie hören, dass der Bereich Stile ausgewählt ist.
  • Verwenden Sie den Rechtspfeil, um andere verfügbare Tabs anzusehen.

Die DOM-Baumstruktur wandelt Elemente mit href-Attributen in fokussierbare Links um. Daher müssen Sie möglicherweise mehrmals die Tabulatortaste drücken, um zum Bereich „Stile“ zu gelangen.

Bekannte Probleme

Die Tabs DOM-Haltepunkte und Eigenschaften sind nicht per Tastatur zugänglich.

Bereich „Stile“

Im Bereich Stile finden Sie Steuerelemente zum Filtern von Stilen, zum Umschalten von Elementstatus (z. B. :active und :focus), zum Wechseln zwischen Klassen und zum Hinzufügen neuer Klassen. Es gibt auch ein leistungsstarkes Stilinspektionstool, mit dem Sie Stile untersuchen und ändern können, die aktuell auf das Element angewendet werden, das im DOM-Baum im Fokus ist.

Das Hauptkonzept des Bereichs Styles ist, dass er nur Stile für den aktuell ausgewählten Knoten im DOM-Baum anzeigt. Angenommen, Sie haben sich die Stile eines <header>-Knotens angesehen und möchten sich nun die Stile für einen <footer>-Knoten ansehen. Dazu müssen Sie zuerst den Knoten <footer> in der DOM-Baumstruktur auswählen. Mit dem Untersuchen-Workflow können Sie einen Knoten untersuchen, der sich in der Nähe des Knotens footer befindet (z. B. ein Link in der Fußzeile), der den DOM-Baum fokussiert, und dann über die Tastatur zum gewünschten Knoten navigieren.

Im Bereich „Stile“ navigieren

Da alle Stiltools auf die eine oder andere Weise mit dem Bereich Styles verbunden sind, ist es sinnvoll, zuerst ein Experte dieses Tools zu werden.

  • Wenn der Fokus auf dem Bereich Styles liegt, drücken Sie die Tabulatortaste, um den Fokus dorthin zu verschieben und den Inhalt zu erkunden.
  • Drücken Sie die Tabulatortaste, bis der erste Stil aktiv wird. Wenn Sie einen Screenreader verwenden, wird dieser erste Stil als "element.style {}" angekündigt.
  • Drücken Sie den Abwärtspfeil, um in der Liste der Stile in der Reihenfolge ihrer Spezifität zu navigieren. Ein Screenreader liest jeden Stil vor und beginnt mit dem Namen der CSS-Datei, der Zeilennummer, in der der Stil angezeigt wird, und dem Stilnamen selbst. Beispiel: „main.css:233 .card__img {}“
  • Drücken Sie die Eingabetaste, um einen Stil genauer zu untersuchen. Der Fokus beginnt auf einer bearbeitbaren Version des Stilnamens.
  • Drücken Sie die Tabulatortaste, um zwischen den bearbeitbaren Versionen der einzelnen CSS-Eigenschaften und den entsprechenden Werten zu wechseln. Am Ende jedes Stilblocks befindet sich ein leeres bearbeitbares Textfeld, das Sie verwenden können, um zusätzliche CSS-Eigenschaften hinzuzufügen.
  • Sie können mit der Tabulatortaste weiter durch die Liste der Stile navigieren oder die Esc-Taste drücken, um diesen Modus zu verlassen und zur Navigation mit den Pfeiltasten zurückzukehren.

Weitere Tastenkombinationen finden Sie in der Tastaturreferenz für den Stilbereich.

Bekannte Probleme
  • Wenn Sie das bearbeitbare Textfeld Filter verwenden, können Sie nicht mehr in der Liste der Stile navigieren.

Elementstatus wechseln

So wechseln Sie den Status eines Elements, z. B. :active oder :focus:

  1. Gehen Sie zum Bereich Stile und drücken Sie die Tabulatortaste, bis die Schaltfläche Elementstatus ein-/ausblenden hervorgehoben ist.
  2. Drücken Sie die Eingabetaste, um die Sammlung der Elementstatus zu maximieren. Die Elementstatus werden als Gruppe von Kästchen dargestellt.
  3. Drücken Sie die Tabulatortaste, bis der erste Status (:active) im Fokus ist.
  4. Drücken Sie die Leertaste, um sie zu aktivieren. Wenn das aktuell ausgewählte Element im DOM-Baum den Stil :active hat, wird es jetzt angewendet.
  5. Drücken Sie weiterhin die Tabulatortaste, um alle verfügbaren Status zu erkunden.

Ausstiegskurs hinzufügen

Neben der Schaltfläche Elementstatus umschalten befindet sich die Schaltfläche Elementklassen. Verschieben Sie den Fokus darauf, indem Sie die Tabulatortaste und dann die Eingabetaste drücken. Der Fokus wird in ein Bearbeitungstextfeld mit der Bezeichnung Neue Klasse hinzufügen verschoben.

Die Schaltfläche Elementklassen wird hauptsächlich zum Hinzufügen vorhandener Klassen zu einem Element verwendet. Wenn Ihr Stylesheet beispielsweise eine Hilfsklasse namens .clearfix enthält, können Sie im Bearbeitungstextfeld auf . drücken, um eine Vorschlagsliste von Klassen aufzurufen, und mit dem Abwärtspfeil den Vorschlag .clearfix finden. Sie können den Kursnamen auch selbst eingeben und die Eingabetaste drücken, um ihn anzuwenden.

Neue Stilregel hinzufügen

Neben der Schaltfläche Elementklassen befindet sich die Schaltfläche Neue Stilregel. Um den Fokus darauf zu verschieben, drücken Sie die Tabulatortaste und dann die Eingabetaste. Der Fokus wird in ein bearbeitbares Textfeld im Style Inspector verschoben. Der ursprüngliche Textinhalt des Felds ist der Tag-Name des Elements, das im DOM-Baum ausgewählt wird. Sie können in dieses Feld einen beliebigen Klassennamen eingeben und dann die Tabulatortaste drücken, um ihr CSS-Eigenschaften zuzuweisen.

Berechneter Tab

Während der Fokus auf dem Tab Berechnet liegt, drücken Sie die Tabulatortaste, um den Fokus darauf zu verschieben und den Inhalt zu erkunden. Auf dem Tab Computed gibt es Steuerelemente, mit denen Sie untersuchen können, welche CSS-Eigenschaften tatsächlich auf ein Element in der Reihenfolge der Spezifität angewendet werden.

Alle berechneten Stile ansehen

Drücken Sie die Tabulatortaste, bis Sie zur Sammlung der berechneten Stile gelangen. Diese werden als ARIA-tree dargestellt. Wenn Sie ein Listenfeld erweitern, sehen Sie, welche CSS-Selektoren den berechneten Stil anwenden. Diese Auswahlmöglichkeiten sind nach Spezifität geordnet. Ein Screenreader gibt den berechneten Wert, mit dem der CSS-Selektor derzeit abgeglichen wird, den Dateinamen des Stylesheets, das den Selektor enthält, und die Zeilennummer des Selektors an.

Bekannte Probleme

  • Wenn Sie das Textfeld Filter verwenden, können Sie keine Stile mehr prüfen.

Tab „Ereignis-Listener“

Im Bereich Elemente können Sie auf dem Tab Ereignis-Listener die auf ein Element angewendeten Ereignis-Listener prüfen. Drücken Sie im Fokus auf den Bereich Styles den Rechtspfeil, um zum Tab Ereignis-Listener zu gelangen.

Event-Listener ansehen

Ereignis-Listener werden als ARIA-tree dargestellt. Sie können die Pfeiltasten verwenden, um zwischen ihnen zu wechseln. Ein Screenreader gibt den Namen des DOM-Objekts an, an das der Ereignis-Listener angehängt ist, sowie den Dateinamen, in dem der Ereignis-Listener definiert ist, und seine Zeilennummer.

Bereich „Bedienungshilfen“

Wenn der Fokus auf dem Bereich Bedienungshilfen liegt, drücken Sie die Tabulatortaste, um den Fokus dorthin zu verschieben und seinen Inhalt zu erkunden. Im Bereich Accessibility (Bedienungshilfen) finden Sie Steuerelemente zum Erkunden der Struktur für Barrierefreiheit, die auf ein Element angewendeten ARIA-Attribute und die berechneten Bedienungshilfen.

Baum für Barrierefreiheit

Der Accessibility Tree wird als ARIA-tree dargestellt, wobei jeder treeitem einem Element im DOM entspricht. Die Baumstruktur kündigt die berechnete Rolle für den ausgewählten Knoten an. Allgemeine Elemente wie div und span werden in der Baumstruktur als "GenericContainer" angekündigt. Verwenden Sie die Pfeiltasten, um den Baum zu durchlaufen und hierarchische Beziehungen zu untersuchen.

Bekannte Probleme

  • Der im Bereich Bedienungshilfen verwendete ARIA-Baumtyp wird in Chrome für macOS-Screenreader wie VoiceOver möglicherweise nicht korrekt angezeigt. Abonnieren Sie Chromium-Problem 868480, um über den Fortschritt zu diesem Problem informiert zu werden.
  • Die Abschnitte ARIA Attributes (ARIA-Attribute) und Computed Properties (Berechnete Eigenschaften) sind als ARIA-Bäume gekennzeichnet. Sie haben derzeit jedoch keinen Fokus auf Verwaltung, sodass sie nicht über die Tastatur bedient werden können.

Audit-Bereich

Im Bereich Audits können Sie eine Reihe von Tests für eine Website ausführen, um nach häufigen Problemen in Bezug auf Leistung, Zugänglichkeit, SEO und eine Reihe anderer Kategorien zu suchen.

Audit konfigurieren und ausführen

  1. Beim ersten Öffnen des Bereichs Audits ist die Schaltfläche Audit ausführen am Ende des Formulars hervorgehoben. Standardmäßig ist das Formular so konfiguriert, dass Audits für jede Kategorie mithilfe von Mobile Emulation über eine simulierte 3G-Verbindung ausgeführt werden.
  2. Drücken Sie Umschalttaste + Tabulatortaste oder gehen Sie zurück zum Suchmodus, um die Audit-Einstellungen zu ändern.
  3. Wenn Sie das Audit ausführen möchten, gehen Sie zurück zur Schaltfläche Run Audit und drücken Sie die Eingabetaste.
  4. Der Fokus wird in einem modalen Fenster mit der Schaltfläche Abbrechen angezeigt, über die Sie die Prüfung beenden können. Möglicherweise hören Sie eine Reihe von Earcons, wenn das Audit ausgeführt wird und die Seite mehrmals aktualisiert wird.

Bekannte Probleme

  • Die verschiedenen Abschnitte des Konfigurationsformulars sind derzeit nicht mit einem fieldset-Element ausgezeichnet. Es kann einfacher sein, sie im Suchmodus zu verwenden, um herauszufinden, welche Steuerelemente jedem Abschnitt zugeordnet sind.
  • Nach Abschluss des Audits wird keine Earcon- oder Live-Region-Ankündigung angezeigt. Im Allgemeinen dauert es etwa 30 Sekunden. Danach sollten Sie die Ergebnisse aufrufen können. Am einfachsten erhalten Sie die Ergebnisse mit dem Durchsuchen-Modus.

Navigation im Prüfbericht

Der Prüfbericht ist in Abschnitte unterteilt, die den einzelnen Auditkategorien entsprechen. Der Bericht wird mit einer Liste der Punktzahlen für jede Kategorie geöffnet. Diese Bewertungen sind auch Links, über die Sie zu den entsprechenden Abschnitten springen können. In jedem Abschnitt befinden sich erweiterbare details-Elemente, die Informationen zu bestandenen oder nicht bestandenen Audits enthalten. Standardmäßig werden nur fehlgeschlagene Prüfungen angezeigt. Jeder Abschnitt endet mit einem letzten details-Element, das alle bestandenen Audits enthält.

Wenn Sie ein neues Audit ausführen möchten, schließen Sie den Bericht mit Umschalttaste + Tabulatortaste und suchen Sie nach der Schaltfläche Audit durchführen.