Freigeben über

Nachverfolgen, welches Element den Fokus hat

  • Artikel

Um jederzeit anzugeben, welches Element den Fokus hat, verwenden Sie einen Live-Ausdruck im Konsolentool . Dies ist hilfreich, da beim Testen der Barrierefreiheit einer Seite in der Tastaturnavigation beim Navigieren auf der gerenderten Webseite, indem Sie TAB oder UMSCHALT+TAB drücken, der Fokusringindikator auf der Webseite manchmal verschwindet, da das Element, das den Fokus besitzt, ausgeblendet oder nicht sichtbar ist.

Verwenden eines Liveausdrucks, um zu bestimmen, welches Element den Fokus hat

So verfolgen Sie das Tab-fokussierte Element in der Konsole in DevTools mithilfe eines Live-Ausdrucks:

  1. Öffnen Sie die Demowebseite für Barrierefreiheitstests in einem neuen Fenster oder einer neuen Registerkarte.

  2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Überprüfen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  3. Wenn die Symbolleiste Schnellansicht in DevTools nicht angezeigt wird, drücken Sie ESC , um den Bereich Schnellansicht anzuzeigen.

  4. Wählen Sie auf der Symbolleiste Schnellansicht die Registerkarte Konsole aus:

    Das Konsolentool im Bereich

  5. Klicken Sie auf die Schaltfläche Liveausdruck erstellen (Liveausdruck erstellen). Der Abschnitt Live Expression wird angezeigt:

    Erstellen eines Liveausdrucks

  6. Geben Sie im Textfeld Ausdruck Folgendes ein: document.activeElement

  7. Klicken Sie außerhalb des Textfelds Ausdruck , um den Live-Ausdruck zu speichern. Der Live-Ausdruck wird ausgewertet, und das Ergebnis wird unterhalb des Textfelds Ausdruck angezeigt:

    Das Ergebnis des Liveausdrucks

  8. Klicken Sie auf die gerenderte Webseite, um den Fokus darauf zu setzen, und drücken Sie dann TAB oder UMSCHALT+TAB , um den Fokus auf der gerenderten Webseite zu verschieben.

    Der unten document.activeElement angezeigte Wert ist das Ergebnis des Ausdrucks. Wenn Sie die TAB-TASTE drücken, um zwischen Elementen der Webseite zu wechseln, ändert sich der document.activeElement Wert:

    Das Live-Ausdrucksergebnis, wenn sich ein Textfeld auf die Webseite konzentriert

Der JavaScript-Code in einem Live-Ausdruck wird in Echtzeit ausgewertet, und das unterhalb des Codes angezeigte Ergebnis stellt immer den aktuellen Ausdruckswert dar.

Der Wert für Liveausdruck wird in der Konsole nur als Textvorschau angezeigt. DOM-Knoten werden mithilfe ihrer Tagnamen und optionalen Klassen- oder ID-Attribute gerendert. Zum Beispiel:

  • Im Ergebnis des Liveausdrucks wird ein Ankerelement <a href="#alpacas">Alpacas</a> angezeigt a#alpacas .
  • Im Ergebnis des Liveausdrucks wird ein Textfeld <input> angezeigt input .

Um anzugeben, welches Element den Fokus auf der gerenderten Webseite hat, verwenden Sie das Tool Elemente , wie im nächsten Abschnitt beschrieben.

Öffnen des Elements mit Fokus im Tool "Elemente"

Das Ergebnis des document.activeElement Liveausdrucks ist nur eine Vorschau des DOM-Elements, das den Fokus hat. Verwenden Sie das Tool Elemente , um genau zu wissen, welches Element den Fokus auf der gerenderten Webseite hat:

  1. Zeigen Sie im Konsolentool auf das Ergebnis des Liveausdrucks (unterhalb des document.activeElement Liveausdrucks).

    Das fokussierte Element wird auf der gerenderten Webseite hervorgehoben:

    Das fokussierte Element, hervorgehoben auf der gerenderten Webseite

  2. Klicken Sie mit der rechten Maustaste auf das Ergebnis des Live-Ausdrucks, und wählen Sie dann Im Bereich Elemente anzeigen aus.

    Im Tool Elemente wird die DOM-Struktur automatisch erweitert und wählt den DOM-Knoten aus, der sich derzeit im Fokus befindet:

    Das fokussierte Element, das im Tool Elemente ausgewählt ist

    Das aktive Element ist die DOM-Strukturdarstellung des Webseitenelements, zu dem Sie durch Drücken von TAB oder UMSCHALT+TAB navigiert haben.

Erstellen eines Verweises auf das fokussierte Element im Konsolentool

Um das fokussierte Element im Konsolentool zu bearbeiten, erstellen Sie einen Verweis darauf:

  1. Zeigen Sie im Konsolentool auf das Ergebnis des Liveausdrucks (unterhalb des document.activeElement Liveausdrucks).

  2. Klicken Sie mit der rechten Maustaste auf das Ergebnis des Live-Ausdrucks, und wählen Sie outerHTML als globale Variable speichern aus.

    Ein neuer Variablenname wie temp1 wird im Konsolentool angezeigt, und sein Wert wird unten gerendert:

    Das fokussierte Element als neue Variable im Konsolentool

  3. Verwenden Sie das -Element im Konsolentool nach Bedarf, indem Sie die temp1 Variable verwenden. Führen Sie beispielsweise aus temp1.value = "cat" , um den Wert des fokussierten Elements in "cat" zu ändern:

    Der Wert des fokussierten Elements wird in

Siehe auch

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Creative Commons License Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.