Chrome-Entwicklertools mit Hilfstechnologien verwenden

Rob Dodson

Dieser Leitfaden soll Nutzern helfen, die hauptsächlich auf Hilfstechnologien wie Screenreader angewiesen sind, auf die Chrome-Entwicklertools zuzugreifen und sie zu verwenden. Die Chrome-Entwicklertools sind eine Suite von Webentwicklertools, die in den Google Chrome-Browser integriert sind. In der Referenz zur Barrierefreiheit finden Sie Informationen zu DevTools-Funktionen zur Verbesserung der Barrierefreiheit einer Webseite.

Die Barrierefreiheit der Entwicklertools ist noch in der Entwicklung. Einige Bereiche und Tabs funktionieren mit Hilfstechnologien besser als andere. In diesem Leitfaden werden die Bereiche beschrieben, die am besten barrierefrei sind. Außerdem werden bestimmte Probleme hervorgehoben, auf die Sie möglicherweise stoßen.

Übersicht

Bevor Sie beginnen, ist es hilfreich, sich ein Bild davon zu machen, wie die Benutzeroberfläche der DevTools strukturiert ist. Die DevTools sind in eine Reihe von Bereichen unterteilt, die in einer ARIA-tablist organisiert sind. Beispiel:

  • Im Bereich Elemente können Sie DOM-Knoten oder CSS ansehen und ändern.
  • Im Bereich Konsole können Sie JavaScript-Protokolle lesen und Objekte in Echtzeit bearbeiten.

Im Inhaltsbereich jedes Bereichs befinden sich verschiedene Tools, die in der Dokumentation oft als Tabs oder Bereiche bezeichnet werden. Der Bereich Elemente enthält beispielsweise zusätzliche Tabs, auf denen Sie unter anderem Ereignis-Listener und den Baum für Barrierefreiheit prüfen können. Die Unterscheidung zwischen Tabs und Bereichen ist etwas willkürlich. Der einzige Grund, warum der eine oder andere Begriff verwendet wird, ist die Einheitlichkeit mit der restlichen offiziellen DevTools-Dokumentation.

Tastenkombinationen

Die Referenz zu Tastenkombinationen in den DevTools ist eine hilfreiche Cheatsheet. Setzen Sie ein Lesezeichen dafür und rufen Sie es bei Bedarf auf, während Sie die verschiedenen Bereiche erkunden.

Entwicklertools öffnen

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

Zwischen Steuerfeldern wechseln

Mit der Tastatur navigieren

  • Drücken Sie bei geöffneten Entwicklertools Strg + ] oder Befehlstaste + ] (Mac), um den Fokus auf das nächste Steuerfeld zu legen.
  • Drücken Sie Strg + [ oder Befehlstaste + [ (Mac), um den Fokus auf den vorherigen Bereich zu legen.
  • Sie können auch die Tastenkombination Umschalttaste + Tabulatortaste verwenden, um den Fokus auf die tablist eines Bereichs zu setzen, und die Pfeiltasten, um zwischen den Bereichen zu wechseln. Die oben genannten Tastenkürzel sind jedoch möglicherweise schneller.

Bekannte Probleme

  • Bei einigen Bereichen wie Konsole und Leistung wird der Fokus möglicherweise auf den Inhaltsbereich verschoben, sobald sie aktiviert werden. Das kann die Navigation mit den Pfeiltasten erschweren.
  • Der Name des ausgewählten Steuerfelds wird erst dann angesagt, wenn der Fokusinhalt im Steuerfeld vorgelesen wurde. Das kann leicht übersehen werden.

Über das Befehlsmenü navigieren

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

  1. Drücken Sie in den geöffneten Entwicklertools Strg + Umschalttaste + P oder Befehlstaste + Umschalttaste + P (Mac), um das Befehlsmenü zu öffnen. Das Befehlsmenü ist eine Drop-down-Liste mit automatischer Vervollständigung für die Fuzzy-Suche.
  2. Geben Sie den Namen des Bereichs ein, den Sie öffnen möchten, und verwenden Sie dann den Abwärtspfeil, um zur gewünschten Option zu gelangen.
  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 Steuerfeld > Elemente anzeigen ist ausgewählt.
  3. Drücken Sie die Eingabetaste, um den Befehl auszuführen, der das Steuerfeld öffnet.

Wenn Sie einen Bereich auf diese Weise öffnen, wird der Fokus auf den Inhalt des Bereichs gelenkt. Im Bereich Elemente wird der Fokus auf den DOM-Baum verschoben.

Bereich „Elemente“

Element auf der Seite prüfen

  1. Gehen 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 Untersuchen aus. Dadurch wird der Bereich Elemente geöffnet und das Element im DOM-Baum wird fokussiert.

Der DOM-Baum ist als ARIA-tree dargestellt. Ein Beispiel finden Sie unter Im DOM-Baum mit der Tastatur navigieren.

Code für ein Element im DOM-Baum kopieren

  1. Wenn der Fokus auf einem Knoten im DOM-Baum liegt, öffnen Sie das Kontextmenü, indem Sie mit der rechten Maustaste klicken.
  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, sondern sein übergeordneter Knoten ausgewählt. Der Inhalt des Elements sollte jedoch weiterhin in der kopierten outerHTML-Datei 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 den Attributwerten zu wechseln. Wenn Sie „Raum“ hören, befinden Sie sich in einer leeren Textzeile und können einen neuen Attributwert eingeben.
  • Drücken Sie Strg + Eingabetaste oder Befehlstaste + Eingabetaste (Mac), um die Änderung zu akzeptieren und den gesamten Inhalt des Elements anzuhören.

Bekannte Probleme

  • Wenn Sie etwas in die Textzeile eingeben, erhalten Sie kein Feedback. Wenn Sie einen Tippfehler machen und mit den Pfeiltasten durch Ihre Eingabe gehen, erhalten Sie ebenfalls kein Feedback. Am einfachsten können Sie Ihre Arbeit prüfen, indem Sie die Änderung akzeptieren und dann darauf achten, dass das gesamte Element angesagt 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 den 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 akzeptieren.

Wenn Sie beispielsweise h3 eingeben und dann 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, auf denen Sie beispielsweise das auf ein Element angewendete CSS oder seinen Platz im Baum für Barrierefreiheit prüfen können.

  • Wenn der Fokus auf einem Knoten im DOM-Baum liegt, drücken Sie die Tabulatortaste, bis Sie hören, dass der Bereich Styles ausgewählt ist.
  • Mit dem Rechtspfeil kannst du die anderen verfügbaren Tabs aufrufen.

Im DOM-Baum werden Elemente mit href-Attributen in fokusierbare Links umgewandelt. Möglicherweise müssen Sie die Taste Tab mehrmals drücken, um den Bereich „Stile“ aufzurufen.

Bekannte Probleme

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

Bereich „Stile“

Im Bereich Styles finden Sie Steuerelemente zum Filtern von Styles, zum Umschalten von Elementstatus (z. B. :active und :focus), zum Umschalten von Klassen und zum Hinzufügen neuer Klassen. Es gibt auch ein leistungsstarkes Tool zur Stilprüfung, mit dem Sie die Stile untersuchen und ändern können, die derzeit auf das Element im DOM-Baum angewendet werden.

Wichtig ist, dass im Bereich Styles nur Stile für den aktuell ausgewählten Knoten im DOM-Baum angezeigt werden. Angenommen, Sie haben die Stile eines <header>-Knotens geprüft und möchten sich jetzt die Stile eines <footer>-Knotens ansehen. Dazu müssen Sie zuerst den Knoten <footer> im DOM-Baum auswählen. Möglicherweise ist es schneller, den Workflow Prüfen zu verwenden, um einen Knoten in der Nähe des footer-Knotens zu prüfen (z. B. einen Link in der Fußzeile). Dadurch wird der DOM-Baum eingeblendet. Sie können dann mit der Tastatur zum gewünschten Knoten wechseln.

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 darauf zu legen und sich die Inhalte anzusehen.
  • Drücken Sie die Tabulatortaste, bis der erste Stil aktiv wird. Wenn Sie einen Screenreader verwenden, wird dieser erste Stil als „element.style {}“ angesagt.
  • Drücken Sie den Abwärtspfeil, um die Liste der Stile in absteigender Reihenfolge aufzurufen. Ein Screenreader liest jeden Stil vor, beginnend mit dem Namen der CSS-Datei, der Zeilennummer, in der der Stil erscheint, und dem Stilnamen selbst. Beispiel: „main.css:233 .card__img {}“
  • Drücken Sie die Eingabetaste, um einen Stil genauer zu untersuchen. Der Fokus liegt auf einer bearbeitbaren Version des Stilnamens.
  • Drücken Sie die Tabulatortaste, um zwischen bearbeitbaren Versionen der einzelnen CSS-Eigenschaften und ihren 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 scrollen, oder die Esc-Taste drücken, um diesen Modus zu beenden und wieder mit den Pfeiltasten zu navigieren.

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 scrollen.

Elementstatus ein-/ausblenden

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 umschalten den Fokus erhält.
  2. Drücken Sie die Eingabetaste, um die Sammlung der Elementstatus zu maximieren. Die Elementzustände werden als Gruppe von Kästchen dargestellt.
  3. Drücken Sie die Tabulatortaste, bis der erste Status, :active, den Fokus hat.
  4. Drücke 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 weiter die Tabulatortaste, um alle verfügbaren Status zu sehen.

Einen Kurs hinzufügen, der beendet wird

Neben der Schaltfläche Elementstatus ein-/ausblenden befindet sich die Schaltfläche Elementklassen. Drücken Sie die Tabulatortaste und dann die Eingabetaste, um den Fokus darauf zu setzen. Der Fokus wird in ein Bearbeitungsfeld mit der Bezeichnung 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 namens .clearfix enthält, können Sie im Bearbeitungsfeld für den Text die Taste . drücken, um eine Vorschlagsliste mit Klassen aufzurufen, und mit dem Abwärtspfeil den Vorschlag .clearfix suchen. 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 Styleregel. Bewegen Sie den Fokus darauf, indem Sie die Tabulatortaste drücken, und drücken Sie die Eingabetaste. Der Fokus wird in ein bearbeitbares Textfeld im Stilprüffeld verschoben. Der ursprüngliche Textinhalt des Felds ist der Tag-Name des Elements, das im DOM-Baum ausgewählt ist. Sie können einen beliebigen Klassennamen in dieses Feld eingeben und dann die Tabulatortaste drücken, um ihm CSS-Properties zuzuweisen.

Tab „Berechnet“

Wenn der Fokus auf dem Tab Berechnet liegt, drücken Sie die Tabulatortaste, um den Fokus darauf zu legen und sich den Inhalt anzusehen. Auf dem Tab Computed (Berechnet) finden Sie Steuerelemente, mit denen Sie sehen können, welche CSS-Eigenschaften in der Reihenfolge ihrer Spezifität 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 Liste maximieren, sehen Sie, auf welche CSS-Selektoren der berechnete Stil angewendet wird. Diese Auswahlmöglichkeiten sind nach Spezifität geordnet. Ein Screenreader liest den berechneten Wert, den derzeit übereinstimmenden CSS-Selektor, den Dateinamen des Stylesheets, das den Selektor enthält, und die Zeilennummer des Selektors vor.

Bekannte Probleme

  • Wenn Sie das Textfeld Filter verwenden, können Sie Stile nicht 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 sich der Fokus im Bereich Styles befindet, drücken Sie den Rechtspfeil, um zum Tab Ereignis-Listener zu wechseln.

Ereignis-Listener ansehen

Ereignis-Listener werden als ARIA-tree dargestellt. Mit den Pfeiltasten können Sie sich durch die Seiten bewegen. Ein Screenreader liest den Namen des DOM-Objekts vor, an das der Ereignis-Listener angehängt ist, sowie den Dateinamen, in dem der Ereignis-Listener definiert ist, und die Zeilennummer.

Bereich „Bedienungshilfen“

Wenn der Fokus auf dem Bereich Bedienungshilfen liegt, drücken Sie die Tabulatortaste, um den Fokus darauf zu legen und sich den Inhalt anzusehen. Im Bereich Barrierefreiheit finden Sie Steuerelemente zum Erkunden des Baums für die Barrierefreiheit, der ARIA-Attribute, die auf ein Element angewendet werden, und der berechneten Barrierefreiheitseigenschaften.

Baumansicht für Barrierefreiheit

Der Bedienungshilfen-Baum wird als ARIA-tree dargestellt, wobei jeder treeitem einem Element im DOM entspricht. Im Baum wird die berechnete Rolle für den ausgewählten Knoten angezeigt. Allgemeine Elemente wie div und span werden im Baum als „GenericContainer“ angekündigt. Mit den Pfeiltasten können Sie sich durch den Baum bewegen und übergeordnete und untergeordnete Beziehungen untersuchen.

Bekannte Probleme

  • Der ARIA-Baumtyp, der im Bereich Bedienungshilfen verwendet wird, wird in Chrome möglicherweise nicht richtig für macOS-Screenreader wie VoiceOver angezeigt. Abonnieren Sie Chromium-Problem 868480, um über den Fortschritt bei der Behebung dieses Problems informiert zu werden.
  • Die Abschnitte ARIA-Attribute und Berechnete Properties sind als ARIA-Bäume markiert, haben aber derzeit keine Fokusverwaltung und sind daher nicht per Tastatur bedienbar.

Bereich „Audits“

Im Bereich Prüfungen können Sie eine Reihe von Tests auf einer Website ausführen, um nach häufigen Problemen im Zusammenhang mit Leistung, Barrierefreiheit, Suchmaschinenoptimierung und anderen Kategorien zu suchen.

Prüfung konfigurieren und ausführen

  1. Wenn Sie den Bereich Analysen zum ersten Mal öffnen, liegt der Fokus auf der Schaltfläche Analyse ausführen am Ende des Formulars. Standardmäßig ist das Formular so konfiguriert, dass Prüfungen für jede Kategorie mithilfe der mobilen Emulation über eine simulierte 3G-Verbindung ausgeführt werden.
  2. Drücken Sie die Umschalttaste + Tabulatortaste oder wechseln Sie zurück zum Suchmodus, um die Einstellungen für die Analyse zu ändern.
  3. Wenn Sie die Analyse ausführen möchten, kehren Sie zur Schaltfläche Analyse ausführen zurück und drücken Sie die Eingabetaste.
  4. Der Fokus wird auf ein modales Fenster mit der Schaltfläche Abbrechen gelegt, über die Sie die Prüfung beenden können. Während der Analyse und der mehrmaligen Aktualisierung der Seite hören Sie möglicherweise eine Reihe von Earcons.

Bekannte Probleme

  • Die verschiedenen Abschnitte des Konfigurationsformulars sind derzeit nicht mit einem fieldset-Element markiert. Im Suchmodus ist es möglicherweise einfacher, herauszufinden, welche Steuerelemente mit den einzelnen Abschnitten verknüpft sind.
  • Nach Abschluss der Prüfung wird keine Ansage abgespielt. Normalerweise dauert es etwa 30 Sekunden, bis Sie die Ergebnisse aufrufen können. Am einfachsten ist es, den Suchmodus zu verwenden.

Prüfbericht aufrufen

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

Wenn Sie eine neue Analyse ausführen möchten, drücken Sie die Umschalttaste + Tabulatortaste, um den Bericht zu schließen, und suchen Sie nach der Schaltfläche Analyse ausführen.