Chrome-Entwicklertools mit Hilfstechnologien verwenden

Rob Dodson

Dieser Leitfaden soll Nutzern helfen, die hauptsächlich auf Hilfstechnologien angewiesen sind, wie Screenreader, auf die Chrome-Entwicklertools zuzugreifen und sie zu verwenden. Die Chrome-Entwicklertools sind eine Reihe von Webentwicklertools, die in den Google Chrome-Browser integriert sind. In der Referenz zu Bedienungshilfen finden Sie Informationen zu Entwicklertools-Funktionen, mit denen Sie die Barrierefreiheit einer Webseite verbessern können.

Die Barrierefreiheit der Entwicklertools wird kontinuierlich verbessert. Einige Bereiche und Tabs funktionieren besser mit Hilfstechnologien als andere. In diesem Leitfaden werden die Bereiche beschrieben, die am besten zugänglich sind, und es werden bestimmte Probleme hervorgehoben, die dabei auftreten können.

Übersicht

Die Entwicklertools sind in mehrere Bereiche unterteilt, die in einer ARIA tablist organisiert sind. Beispiel:

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, um Ereignis-Listener, die Baumansicht für Barrierefreiheit und vieles mehr zu prüfen. Die Unterscheidung zwischen Tabs und Bereichen ist etwas willkürlich. Der einzige Grund, warum Sie den einen oder anderen Begriff sehen, ist, die Konsistenz mit der übrigen offiziellen Dokumentation der Entwicklertools zu wahren.

Tastenkombinationen

Die Referenz zu Tastenkombinationen für die Entwicklertools ist ein hilfreicher Spickzettel. Setzen Sie ein Lesezeichen dafür und greifen Sie darauf zurück, wenn Sie die verschiedenen Bereiche erkunden.

Entwicklertools öffnen

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

Zwischen Bereichen wechseln

Sie können mit der Tastatur, dem Befehlsmenü oder mit einer Maus oder einem Trackpad zwischen den Bereichen wechseln.

Mit der Tastatur navigieren

  • Wenn die Entwicklertools geöffnet sind, drücken Sie Strg+] oder Befehlstaste+] (Mac), um den Fokus auf den nächsten Bereich zu legen.
  • Drücken Sie Strg+[ oder Befehlstaste+[ (Mac) um den Fokus auf den vorherigen Bereich zu legen.
  • Sie können auch Umschalttaste+Tab verwenden, um den Fokus in die `tablist` eines Bereichs zu verschieben, und dann mit den Pfeiltasten zwischen den Bereichen wechseln. Die zuvor genannten Tastenkombinationen sind jedoch möglicherweise schneller.tablist

Bekannte Probleme

  • Bei einigen Bereichen, z. B. den Bereichen Konsole und Leistung , wird der Fokus möglicherweise sofort in den Inhaltsbereich verschoben, sobald sie aktiviert werden. Dadurch kann die Navigation mit den Pfeiltasten erschwert werden.
  • Der Name des ausgewählten Bereichs wird erst angekündigt, nachdem ein Screenreader den fokussierten Inhalt im Bereich gelesen hat. Dadurch kann er leicht übersehen werden.

Über das Befehlsmenü navigieren

So legen Sie den Fokus auf einen bestimmten Bereich: Verwenden Sie das Befehlsmenü.

  1. Wenn die Entwicklertools geöffnet sind, drücken Sie Strg+Umschalttaste+P oder Befehlstaste+Umschalttaste+P (Mac), um das Befehlsmenü zu öffnen. Das Befehlsmenü ist eine Fuzzy-Such-Combobox mit automatischer Vervollständigung.
  2. Geben Sie den Namen des Bereichs ein, den Sie öffnen möchten, und verwenden Sie dann die Abwärtspfeiltaste , um zur richtigen Option zu navigieren.
  3. Drücken Sie die Eingabetaste , um einen Befehl auszuführen.

So öffnen Sie beispielsweise den Bereich 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 den Inhalt des Bereichs selbst gelegt. Im Fall des Bereichs Elemente wird der Fokus in die DOM-Baumansicht verschoben.

Bereich „Elemente“

Element auf der Seite prüfen

  1. Navigieren Sie mit dem Cursor des Screenreaders zum 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 Prüfen aus. Dadurch wird der Bereich Elemente geöffnet und das Element in der DOM-Baumansicht fokussiert.

Die DOM-Baumansicht ist als ARIA tree angelegt. Ein Beispiel finden Sie unter Mit der Tastatur in der DOM-Baumansicht navigieren.

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

  1. Wenn der Fokus auf einem Knoten in der DOM-Baumansicht liegt, rufen Sie das Kontextmenü auf.
  2. Maximieren Sie die Option Kopieren.
  3. Wählen Sie outerHTML kopieren aus.

Bekannte Probleme

  • Kopieren outerHTML wählt oft den übergeordneten Knoten anstelle des gewünschten Knotens aus. Der Inhalt des Elements sollte jedoch weiterhin in outerHTML kopiert werden.

Attribute eines Elements in der DOM-Baumansicht ändern

  • Wenn der Fokus auf einem Knoten in der DOM-Baumansicht liegt, drücken Sie die Eingabetaste, um ihn bearbeitbar zu machen.
  • Drücken Sie die Tabulatortaste , um zwischen den Attributwerten zu wechseln. Wenn Sie „Leerzeichen“ hören, befinden Sie sich in einem leeren Texteingabefeld und können einen neuen Attributwert eingeben.
  • Drücken Sie Strg+Eingabetaste oder Befehlstaste+Eingabetaste (Mac), um die Änderung zu übernehmen und den gesamten Inhalt des Elements zu hören.

Bekannte Probleme

  • Wenn Sie etwas in das Texteingabefeld eingeben, erhalten Sie kein Feedback. Wenn Sie einen Tippfehler machen und mit den Pfeiltasten Ihre Eingabe prüfen, erhalten Sie kein Feedback. Am einfachsten können Sie Ihre Arbeit überprüfen, indem Sie die Änderung übernehmen und dann warten, bis das gesamte Element angekündigt wird.

HTML eines Elements in der DOM-Baumansicht bearbeiten

  • Wenn der Fokus auf einem Knoten in der DOM-Baumansicht liegt, drücken Sie die Eingabetaste, um ihn bearbeitbar zu machen.
  • 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 in einem Texteingabefeld und können den Typ des Elements ändern.
  • Drücken Sie Strg+Eingabetaste oder Befehlstaste+Eingabetaste (Mac), um die Änderung zu übernehmen.

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 Bereich „Elemente“

Der Bereich Elemente enthält zusätzliche Tabs, um beispielsweise das auf ein Element angewendete CSS oder seine Position in der Baumansicht für Barrierefreiheit zu prüfen.

  • Wenn der Fokus auf einem Knoten in der DOM-Baumansicht liegt, drücken Sie die Tabulatortaste , bis Sie hören dass der Bereich Stile ausgewählt ist.
  • Verwenden Sie die Rechtspfeiltaste , um andere verfügbare Tabs zu erkunden.

In der DOM-Baumansicht werden Elemente mit href Attributen in fokussierbare Links umgewandelt. Möglicherweise müssen Sie also mehrmals die Tabulatortaste drücken, um zum Bereich Stile zu gelangen.

Bekannte Probleme

Auf die Tabs DOM-Breakpoints und Attribute kann nicht mit der Tastatur zugegriffen werden.

Bereich „Stile“

Im Bereich Stile finden Sie Steuerelemente zum Filtern von Stilen, zum Umschalten von Elementstatus (z. B. :active und :focus), zum Umschalten von Klassen und zum Hinzufügen neuer Klassen. Außerdem gibt es ein leistungsstarkes Tool zur Stilprüfung, mit dem Sie Stile, die auf das im Vordergrund stehende Element in der DOM-Baumansicht angewendet werden, prüfen und ändern können.

Wichtig ist, dass im Bereich Stile nur Stile für den aktuell ausgewählten Knoten in der DOM-Baumansicht angezeigt werden. Angenommen, Sie haben die Stile eines <header>-Knotens geprüft und möchten sich nun die Stile eines <footer>-Knotens ansehen. Dazu müssen Sie den <footer> Knoten in der DOM-Baumansicht auswählen.

Möglicherweise ist es schneller, den Prüfen-Workflow zu verwenden, um einen Knoten zu prüfen , der sich in der Nähe des footer-Knotens befindet (z. B. ein Link im Footer). Dadurch wird die DOM-Baumansicht fokussiert. Anschließend können Sie mit der Tastatur zum gewünschten Knoten navigieren .

Im Bereich „Stile“ navigieren

Da alle Stiltools auf die eine oder andere Weise mit dem Bereich Stile verbunden sind, ist es sinnvoll, sich zuerst mit diesem Tool vertraut zu machen.

  • Wenn der Fokus auf dem Bereich Stile liegt, drücken Sie die Tabulatortaste , um den Fokus in den Bereich zu verschieben und seinen 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 die Abwärtspfeiltaste , um die Liste der Stile in der Reihenfolge ihrer Spezifität zu durchlaufen. Ein Screenreader kündigt jeden Stil mit dem Namen der CSS-Datei, der Zeilennummer, in der der Stil vorkommt, und dem Stilnamen selbst an. Beispiel: "main.css:233 .card__img {}"
  • Drücken Sie die Eingabetaste , um einen Stil genauer zu prüfen. Der Fokus liegt 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, in dem Sie zusätzliche CSS-Eigenschaften hinzufügen können.
  • Sie können weiterhin die Tabulatortaste drücken, um durch die Liste der Stile zu navigieren, oder die Esc-Taste drücken, um diesen Modus zu beenden und wieder mit den Pfeiltasten zu navigieren.

Weitere Tastenkombinationen finden Sie in der Referenz zu Tastenkombinationen für den Bereich „Stile“.

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

Elementstatus umschalten

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

  1. Navigieren Sie zum Bereich Stile und drücken Sie die Tabulatortaste , bis der Fokus auf der Schaltfläche Elementstatus umschalten liegt.
  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 Fokus auf dem ersten Status, :active, liegt.
  4. Drücken Sie die Leertaste , um ihn zu aktivieren. Wenn das aktuell ausgewählte Element in der DOM-Baumansicht einen :active-Stil hat, wird er jetzt angewendet.
  5. Drücken Sie weiterhin die Tabulatortaste , um alle verfügbaren Status zu erkunden.

Vorhandene Klasse 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 bearbeitbares Textfeld mit der Bezeichnung Neue Klasse hinzufügen verschoben.

Die Schaltfläche Elementklassen wird hauptsächlich verwendet, um einem Element vorhandene Klassen hinzuzufügen. Wenn Ihr Stylesheet beispielsweise eine Hilfsklasse namens .clearfix enthält, können Sie im bearbeitbaren Textfeld . drücken, um eine Vorschlagsliste mit Klassen aufzurufen, und dann mit der Abwärtspfeiltaste den Vorschlag .clearfix auswählen. Alternativ können Sie den Klassennamen 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. Verschieben Sie den Fokus darauf, indem Sie die Tabulatortaste drücken, und drücken Sie dann die Eingabetaste. Der Fokus wird in ein bearbeitbares Textfeld im Stilprüfer verschoben. Der ursprüngliche Textinhalt des Felds ist der Tag-Name des Elements, das in der DOM-Baumansicht ausgewählt ist. Sie können in dieses Feld einen beliebigen Klassennamen eingeben und dann die Tabulatortaste drücken, um ihm CSS-Eigenschaften zuzuweisen.

Tab „Berechnet“

Wenn der Fokus auf dem Berechnet Tab liegt, drücken Sie die Tabulatortaste , um den Fokus in den Bereich zu verschieben und seinen Inhalt zu erkunden. Auf dem Tab Berechnet gibt es Steuerelemente, mit denen Sie prüfen können, welche CSS-Eigenschaften tatsächlich auf ein Element angewendet werden, und zwar in der Reihenfolge ihrer Spezifität.

Alle berechneten Stile prüfen

Drücken Sie die Tabulatortaste , bis Sie zur Sammlung der berechneten Stile gelangen. Diese werden als ARIA-tree dargestellt. Wenn Sie eine Listbox maximieren, sehen Sie, welche CSS-Selektoren den berechneten Stil anwenden. Diese Selektoren sind nach Spezifität geordnet.

Ein Screenreader kündigt den berechneten Wert, den CSS-Selektor, die Datei 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 Ereignis-Listener prüfen, die auf ein Element angewendet werden. Wenn der Fokus auf dem Bereich Stile liegt, drücken Sie die Rechtspfeiltaste , um zum Tab Ereignis-Listener zu navigieren.

Ereignis-Listener prüfen

Ereignis-Listener werden als ARIA-tree dargestellt. Sie können mit den Pfeiltasten darin navigieren. Ein Screenreader kündigt 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 in den Bereich zu verschieben und seinen Inhalt zu erkunden. Im Bereich Bedienungshilfen gibt es Steuerelemente, mit denen Sie die Baumansicht für Barrierefreiheit, die auf ein Element angewendeten ARIA-Attribute und die berechneten Bedienungshilfen-Attribute prüfen können.

Baumansicht für Barrierefreiheit

Die Baumansicht für Barrierefreiheit wird als ARIA tree dargestellt, wobei jedes treeitem einem Element im DOM entspricht. In der Baumansicht wird die berechnete Rolle für den ausgewählten Knoten angekündigt. Allgemeine Elemente wie div und span werden in der Baumansicht als „GenericContainer“ angekündigt. Verwenden Sie die Pfeiltasten, um durch die Baumansicht zu navigieren und die Beziehungen zwischen über- und untergeordneten Elementen zu prüfen.

Bekannte Probleme

  • Der Typ der ARIA-Baumansicht, der vom Bereich Bedienungshilfen verwendet wird, ist in Chrome für macOS-Screenreader wie VoiceOver möglicherweise nicht verfügbar. Abonnieren Sie das Chromium-Problem #868480, um über den Fortschritt bei der Behebung dieses Problems informiert zu werden.
  • Die Abschnitte ARIA-Attribute und Berechnete Attribute sind als ARIA-Baumansichten gekennzeichnet, enthalten aber keine Fokusverwaltung. Das bedeutet, dass diese Abschnitte nicht mit der Tastatur bedient werden können.

Bereich „Audits“

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, Barrierefreiheit, SEO und eine Reihe anderer Kategorien zu suchen.

Audit konfigurieren und ausführen

  1. Wenn der Bereich Audits zum ersten Mal geöffnet wird, liegt der Fokus auf der Schaltfläche Audit ausführen am Ende des Formulars. Standardmäßig ist das Formular so konfiguriert, dass Audits für alle Kategorien mit mobiler Emulation über eine simulierte 3G-Verbindung ausgeführt werden.
  2. Verwenden Sie Umschalttaste+Tab oder navigieren Sie im Browsermodus zurück, um die Auditeinstellungen zu ändern.
  3. Wenn Sie bereit sind, das Audit auszuführen, navigieren Sie zurück zur Schaltfläche Audit ausführen und drücken Sie die Eingabetaste.
  4. Der Fokus wird in ein modales Fenster mit der Schaltfläche Abbrechen verschoben, mit der Sie das Audit beenden können. Möglicherweise hören Sie eine Reihe von akustischen Signalen, während das Audit ausgeführt wird und die Seite mehrmals aktualisiert wird.

Bekannte Probleme

  • Die verschiedenen Abschnitte des Konfigurationsformulars sind nicht mit einem fieldset-Element gekennzeichnet. Möglicherweise ist es einfacher, im Browsermodus darin zu navigieren, um herauszufinden, welche Steuerelemente mit den einzelnen Abschnitten verknüpft sind.
  • Wenn das Audit abgeschlossen ist, wird kein akustisches Signal ausgegeben und es erfolgt keine Ankündigung über eine Live-Region. In der Regel dauert es etwa 30 Sekunden. Danach sollten Sie zu den Ergebnissen navigieren können. Verwenden Sie den Browsermodus, um schnell zu den Ergebnissen zu gelangen.

Im Auditbericht navigieren

Der Auditbericht ist in Abschnitte unterteilt, die den einzelnen Auditkategorien entsprechen. Der Bericht beginnt mit einer Liste der Ergebnisse für jede Kategorie. Diese Ergebnisse sind auch Links, mit denen Sie zu den entsprechenden Abschnitten springen können. In jedem Abschnitt befinden sich maximierbare details-Elemente, die Informationen zu bestandenen oder nicht bestandenen Audits enthalten. Standardmäßig werden nur nicht bestandene Audits angezeigt. Jeder Abschnitt endet mit einem letzten details-Element, das alle bestandenen Audits enthält.

Wenn Sie ein neues Audit ausführen möchten, verwenden Sie Umschalttaste+Tab , um den Bericht zu beenden, und suchen Sie nach der Schaltfläche Audit ausführen.