Chrome-Entwicklertools mit Hilfstechnologien verwenden

Rob Dodson

Diese Anleitung soll Nutzern helfen, die hauptsächlich auf assistive Technologien wie Screenreader angewiesen sind, 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. Wenn Sie nach Entwicklertools-Funktionen suchen, mit denen sich die Barrierefreiheit einer Webseite verbessern lässt, lesen Sie die Referenz zur Barrierefreiheit.

Die Barrierefreiheit der Entwicklertools ist noch in der Entwicklung. Einige Bereiche und Tabs funktionieren besser mit unterstützenden Technologien als andere. In diesem Leitfaden werden die am besten zugänglichen Bereiche beschrieben und auf spezifische Probleme hingewiesen, die auftreten können.

Übersicht

Bevor Sie beginnen, sollten Sie sich ein Bild davon machen, wie die DevTools-Benutzeroberfläche aufgebaut ist. DevTools ist in eine Reihe von Bereichen unterteilt, die in einem ARIA tablist organisiert sind. Beispiel:

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

Im Inhaltsbereich der einzelnen Felder finden Sie verschiedene Tools, die in der Dokumentation häufig als Tabs oder Bereiche bezeichnet werden. Das Elements-Panel enthält beispielsweise zusätzliche Tabs, mit denen Sie Ereignis-Listener, den Barrierefreiheitsbaum und vieles mehr untersuchen können. Die Unterscheidung zwischen Tabs und Bereichen ist etwas willkürlich. Der einzige Grund, warum Sie den einen oder den anderen Begriff sehen, ist die Konsistenz mit dem Rest der offiziellen DevTools-Dokumentation.

Tastenkombinationen

Die DevTools-Referenz zu Tastenkombinationen ist ein hilfreicher Spickzettel. Setzen Sie ein Lesezeichen dafür, damit Sie später darauf zurückgreifen können, wenn Sie sich die verschiedenen Bereiche ansehen.

Entwicklertools öffnen

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

Zwischen Feldern wechseln

Mit der Tastatur navigieren

  • Drücken Sie bei geöffneten Entwicklertools Strg + ] oder Befehlstaste + ] (Mac), um den Fokus auf das nächste Feld zu richten.
  • Drücken Sie Strg + [ oder Befehlstaste + [ (Mac), um den Fokus auf das vorherige Feld zu richten.
  • Sie können auch Umschalt + Tab verwenden, um den Fokus in das tablist eines Bereichs zu verschieben, und dann mit den Pfeiltasten die Bereiche wechseln. Die oben genannten Tastenkombinationen sind jedoch möglicherweise schneller.

Bekannte Probleme

  • Bei einigen Bereichen, z. B. Konsole und Leistung, wird der Fokus möglicherweise sofort auf den Inhaltsbereich verschoben, sobald sie aktiviert werden. Das kann die Navigation mit den Pfeiltasten erschweren.
  • Der Name des ausgewählten Bereichs wird erst vorgelesen, nachdem die fokussierten Inhalte im Bereich vorgelesen wurden. Das kann leicht übersehen werden.

Navigation über das Befehlsmenü

So fokussieren Sie ein bestimmtes Feld über das Befehlsmenü:

  1. Drücken Sie bei geöffneten Entwicklertools Strg + Umschalt + P oder Befehlstaste + Umschalt + P (Mac), um das Befehlsmenü zu öffnen. Das Befehlsmenü ist eine Combobox mit automatischer Vervollständigung für unscharfe Suche.
  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 einblenden ist ausgewählt.
  3. Drücken Sie die Eingabetaste, um den Befehl auszuführen, mit dem das Steuerfeld geöffnet wird.

Wenn Sie ein Feld auf diese Weise öffnen, wird der Fokus auf den Inhalt des Felds verschoben. Im Bereich Elemente wird der Fokus in den DOM-Baum verschoben.

Bereich „Elemente“

Element auf der Seite untersuchen

  1. Bewegen Sie den Cursor des Screenreaders zum Element, das Sie untersuchen möchten.
  2. Simulieren Sie einen Rechtsklick auf das Element, um das Kontextmenü zu öffnen.
  3. Wählen Sie die Option Untersuchen aus. Der Elementbereich wird geöffnet und das Element wird im DOM-Baum fokussiert.

Der DOM-Baum ist als ARIA tree angeordnet. Ein Beispiel finden Sie unter Mit der Tastatur im DOM-Baum navigieren.

Code für ein Element im DOM-Baum kopieren

  1. Rufen Sie das Kontextmenü auf, indem Sie mit dem Fokus auf einem Knoten im DOM-Baum mit der rechten Maustaste klicken.
  2. Maximieren Sie die Option Kopieren.
  3. Wählen Sie outerHTML kopieren aus.

Bekannte Probleme

  • Bei outerHTML kopieren wird oft nicht der aktuelle Knoten, sondern der übergeordnete Knoten ausgewählt. Der Inhalt des Elements sollte jedoch weiterhin im kopierten outerHTML enthalten sein.

Attribute eines Elements im DOM-Baum ändern

  • Wenn der Fokus auf einem Knoten im DOM-Baum liegt, drücken Sie die Eingabetaste, um ihn bearbeitbar zu machen.
  • Drücken Sie die Tabulatortaste, um zwischen 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 Text eingeben, erhalten Sie kein Feedback. Wenn Sie einen Tippfehler machen und die Pfeiltasten verwenden, um Ihre Eingabe zu prüfen, erhalten Sie ebenfalls kein Feedback. Am einfachsten prüfen Sie Ihre Arbeit, indem Sie die Änderung übernehmen und dann darauf achten, dass das gesamte Element vorgelesen wird.

HTML eines Elements im DOM-Baum bearbeiten

  • Wenn der Fokus auf einem Knoten im DOM-Baum liegt, drücken Sie die Eingabetaste, um ihn bearbeitbar zu machen.
  • Drücken Sie die Tabulatortaste, um zwischen Attributwerten zu wechseln. Wenn Sie den Namen des Elements hören, z. B. „h2“, befinden Sie sich in einer Texteingabe 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 + Eingabe oder Befehlstaste + Eingabe (Mac) drücken, werden die Start- und End-Tags des Elements in h3 geändert.

Tabs im Bereich „Elemente“

Das Elemente-Steuerfeld enthält zusätzliche Tabs, mit denen Sie beispielsweise das auf ein Element angewendete CSS oder seine Position im Barrierefreiheitsbaum untersuchen können.

  • Wenn der Fokus auf einem Knoten im DOM-Baum liegt, 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 aufzurufen.

Im DOM-Baum werden Elemente mit href-Attributen in fokussierbare Links umgewandelt. Möglicherweise müssen Sie also mehrmals die Tabulatortaste drücken, um den Bereich „Stile“ zu erreichen.

Bekannte Probleme

Auf die Tabs DOM-Haltepunkte und Eigenschaften kann nicht über die Tastatur zugegriffen werden.

Bereich „Stile“

Im Bereich Styles finden Sie Steuerelemente zum Filtern von Styles, zum Ein- und Ausblenden von Elementstatus (z. B. :active und :focus), zum Ein- und Ausblenden von Klassen und zum Hinzufügen neuer Klassen. Außerdem gibt es ein leistungsstarkes Tool zur Stilprüfung, mit dem Sie die aktuell auf das Element angewendeten Stile untersuchen und ändern können, das im DOM-Baum ausgewählt ist.

Das Wichtigste, was Sie über den Bereich Styles wissen müssen, ist, dass dort nur Stile für den aktuell ausgewählten Knoten im DOM-Baum angezeigt werden. Angenommen, Sie haben die Stile eines <header>-Knotens untersucht und möchten sich nun die Stile eines <footer>-Knotens ansehen. Dazu müssen Sie zuerst den Knoten <footer> im DOM-Baum auswählen. Möglicherweise geht es schneller, wenn Sie den Workflow Untersuchen verwenden, um einen Knoten in der Nähe des footer-Knotens zu untersuchen (z. B. einen Link in der Fußzeile). Dadurch wird der DOM-Baum fokussiert. Anschließend können Sie mit der Tastatur zum gewünschten Knoten navigieren.

Im Bereich „Formatvorlagen“ navigieren

Da alle Stil-Tools 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 die Inhalte 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 die Liste der Stile in der Reihenfolge ihrer Spezifität zu durchlaufen. Eine Sprachausgabe gibt jeden Stil aus, beginnend mit dem Namen der CSS-Datei, der Zeilennummer, in der der Stil enthalten ist, und dem Stilnamen selbst. Beispiel: „main.css:233 .card__img {}“
  • Drücken Sie die Eingabetaste, um einen Stil genauer zu untersuchen. Der Fokus wird auf eine bearbeitbare Version des Stilnamens gesetzt.
  • Drücken Sie die Tabulatortaste, um zwischen bearbeitbaren Versionen der einzelnen CSS-Eigenschaften und den entsprechenden Werten zu wechseln. Am Ende jedes Stilblocks befindet sich ein leeres bearbeitbares Textfeld, in das Sie zusätzliche CSS-Eigenschaften einfügen können.
  • Sie können weiterhin die Tabulatortaste drücken, um durch die Liste der Stile zu wechseln, oder die Esc-Taste, um diesen Modus zu beenden und zur Navigation mit den Pfeiltasten zurückzukehren.

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

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

Elementstatus ein-/ausblenden

So ändern 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 umschalten den Fokus hat.
  2. Drücken Sie die Eingabetaste, um die Sammlung von Elementstatus zu maximieren. Die Elementstatus werden als Gruppe von Kästchen dargestellt.
  3. Drücken Sie die Tabulatortaste, bis der Fokus auf dem ersten Bundesstaat, :active, liegt.
  4. Drücken Sie die Leertaste, um die Funktion zu aktivieren. Wenn das aktuell ausgewählte Element im DOM-Baum einen :active-Stil hat, wird dieser jetzt angewendet.
  5. Drücken Sie weiterhin die Tabulatortaste, um alle verfügbaren Status zu sehen.

Abgangsklasse hinzufügen

Neben der Schaltfläche Elementstatus ein-/ausblenden 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 Bearbeitungsfeld mit dem Label Neuen Kurs hinzufügen verschoben.

Die Schaltfläche Elementklassen wird hauptsächlich verwendet, um einem Element vorhandene Klassen hinzuzufügen. Wenn Ihr Stylesheet beispielsweise eine Hilfsklasse mit dem Namen .clearfix enthält, können Sie im Bearbeitungsfeld . drücken, um eine Vorschlagsliste mit Klassen aufzurufen, und mit dem Abwärtspfeil den Vorschlag .clearfix suchen. Sie können den Klassennamen auch selbst eingeben und dann die Eingabetaste drücken, um ihn anzuwenden.

Neue Stilregel hinzufügen

Neben der Schaltfläche Elementklassen befindet sich die Schaltfläche Neue Styleregel. Verschieben Sie den Fokus darauf, indem Sie die Tabulatortaste drücken, und drücken Sie die Eingabetaste. Der Fokus wird in ein bearbeitbares Textfeld im Stilinspektor verschoben. Der ursprüngliche Textinhalt des Felds ist der Tag-Name des Elements, das im DOM-Baum 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 Tab Berechnet liegt, drücken Sie die Tabulatortaste, um den Fokus in den Tab zu verschieben und seinen Inhalt zu erkunden. Auf dem Tab Berechnet finden Sie Steuerelemente, mit denen Sie untersuchen können, welche CSS-Eigenschaften in der Reihenfolge ihrer Spezifität tatsächlich auf ein Element angewendet werden.

Alle berechneten Stile ansehen

Drücken Sie die Tabulatortaste, bis Sie die Sammlung der berechneten Stile erreichen. Sie werden als ARIA tree dargestellt. Wenn Sie eine Listenbox maximieren, sehen Sie, mit welchen CSS-Selektoren der berechnete Stil angewendet wird. Diese Selektoren sind nach Spezifität geordnet. Eine Sprachausgabe gibt den berechneten Wert, den CSS-Selektor, der derzeit übereinstimmt, den Dateinamen des Stylesheets, das den Selektor enthält, und die Zeilennummer für den Selektor an.

Bekannte Probleme

  • Wenn Sie das Textfeld Filter verwenden, können Sie keine Stile mehr untersuchen.

Tab „Event-Listener“

Im Bereich Elemente können Sie auf dem Tab Event-Listener die Event-Listener prüfen, die auf ein Element angewendet werden. Drücken Sie im Bereich Styles den Rechtspfeil, um zum Tab Event Listeners (Event-Listener) zu wechseln.

Event-Listener ansehen

Event-Listener werden als ARIA tree dargestellt. Mit den Pfeiltasten können Sie sich durch die Optionen bewegen. Eine Sprachausgabe gibt den Namen des DOM-Objekts aus, an das der Event-Listener angehängt ist, sowie den Dateinamen, in dem der Event-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 die Inhalte zu erkunden. Im Bereich Bedienungshilfen gibt es Steuerelemente zum Untersuchen des Bedienungshilfenbaums, der auf ein Element angewendeten ARIA-Attribute und der berechneten Bedienungshilfeneigenschaften.

Baumansicht für Barrierefreiheit

Der Bedienungshilfe-Baum wird als ARIA-tree dargestellt, wobei jedes treeitem einem Element im DOM entspricht. Im Baum wird die berechnete Rolle für den ausgewählten Knoten angekündigt. Allgemeine Elemente wie div und span werden im Baum als „GenericContainer“ angekündigt. Verwenden Sie die Pfeiltasten, um den Baum zu durchlaufen und übergeordnete/untergeordnete Beziehungen zu untersuchen.

Bekannte Probleme

  • Der Typ des ARIA-Baums, der im Bereich Bedienungshilfen verwendet wird, wird in Chrome möglicherweise nicht richtig für macOS-Screenreader wie VoiceOver bereitgestellt. Abonnieren Sie Chromium-Problem #868480, um über den Fortschritt bei diesem Problem informiert zu werden.
  • Die Abschnitte ARIA-Attribute und Berechnete Eigenschaften sind als ARIA-Bäume markiert, haben aber derzeit keine Fokusverwaltung und können daher nicht über die Tastatur bedient werden.

Bereich „Prüfungen“

Im Bereich Prüfungen 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 einer Reihe anderer Kategorien zu suchen.

Prüfung konfigurieren und ausführen

  1. Wenn das Feld 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 jede Kategorie mit mobiler Emulation über eine simulierte 3G-Verbindung ausgeführt werden.
  2. Drücken Sie Umschalttaste + Tabulatortaste oder navigieren Sie im Browse-Modus zurück, um die Einstellungen für die Überprüfung zu ändern.
  3. Wenn Sie bereit sind, die Überprüfung auszuführen, gehen Sie zurück zur Schaltfläche Überprüfung ausführen und drücken Sie die Eingabetaste.
  4. Der Fokus wird in ein modales Fenster mit der Schaltfläche Abbrechen verschoben, über die Sie die Prüfung beenden können. Während der Prüfung und der mehrmaligen Aktualisierung der Seite hören Sie möglicherweise eine Reihe von Ohrsymbolen.

Bekannte Probleme

  • Die verschiedenen Abschnitte des Konfigurationsformulars sind derzeit nicht mit einem fieldset-Element gekennzeichnet. Im Browsermodus ist es möglicherweise einfacher, herauszufinden, welche Steuerelemente mit den einzelnen Abschnitten verknüpft sind.
  • Wenn der Audit abgeschlossen ist, wird kein Earcon oder keine Ansage der Live-Region ausgegeben. Normalerweise dauert es etwa 30 Sekunden, bis Sie zu den Ergebnissen weitergeleitet werden. Am einfachsten ist es, die Ergebnisse im Browsermodus aufzurufen.

Prüfbericht verwenden

Der Prüfbericht ist in Abschnitte unterteilt, die den einzelnen Prüfkategorien entsprechen. Der Bericht beginnt mit einer Liste der Punktzahlen für jede Kategorie. Diese Werte sind auch Links, mit denen Sie zu den entsprechenden Abschnitten springen können. Jeder Abschnitt enthält maximierbare details-Elemente mit Informationen zu bestandenen oder nicht bestandenen Prüfungen. Standardmäßig werden nur fehlgeschlagene Prüfungen angezeigt. Jeder Abschnitt endet mit einem finalen details-Element, das alle bestandenen Prüfungen enthält.

Wenn Sie einen neuen Audit ausführen möchten, drücken Sie Umschalttaste + Tabulatortaste, um den Bericht zu schließen, und suchen Sie nach der Schaltfläche Audit durchführen.