Focus van element volgen

Stel dat u de toegankelijkheid van een pagina via toetsenbordnavigatie test. Wanneer u met de Tab -toets door de pagina navigeert, verdwijnt de focusring soms omdat het element dat focus heeft verborgen is. Het gefocuste element in DevTools volgen:

  1. Open de console .
  2. Klik op Live-expressie maken Creëer live-expressie .

    Een live-expressie maken.

    Zie JavaScript-waarden in realtime bekijken met Live-expressies voor meer informatie.

  3. Typ document.activeElement .

  4. Klik buiten de gebruikersinterface van Live Expression om op te slaan.

De waarde die u onder document.activeElement ziet, is het resultaat van de expressie. Omdat die uitdrukking altijd het gefocuste element vertegenwoordigt, heb je nu een manier om altijd bij te houden welk element focus heeft.

  • Beweeg over het resultaat om het gefocuste element in de viewport te markeren.
  • Klik met de rechtermuisknop op het resultaat en selecteer Onthullen in het paneel Elementen om het element in de DOM-structuur in het paneel Elementen weer te geven.
  • Klik met de rechtermuisknop op het resultaat en selecteer Opslaan als globale variabele om een ​​variabeleverwijzing naar het knooppunt te maken die u in de Console kunt gebruiken.
,

Stel dat u de toegankelijkheid van een pagina via toetsenbordnavigatie test. Wanneer u met de Tab -toets door de pagina navigeert, verdwijnt de focusring soms omdat het element dat focus heeft verborgen is. Het gefocuste element in DevTools volgen:

  1. Open de console .
  2. Klik op Live-expressie maken Creëer live-expressie .

    Een live-expressie maken.

    Zie JavaScript-waarden in realtime bekijken met Live-expressies voor meer informatie.

  3. Typ document.activeElement .

  4. Klik buiten de gebruikersinterface van Live Expression om op te slaan.

De waarde die u onder document.activeElement ziet, is het resultaat van de expressie. Omdat die uitdrukking altijd het gefocuste element vertegenwoordigt, heb je nu een manier om altijd bij te houden welk element focus heeft.

  • Beweeg over het resultaat om het gefocuste element in de viewport te markeren.
  • Klik met de rechtermuisknop op het resultaat en selecteer Onthullen in het paneel Elementen om het element in de DOM-structuur in het paneel Elementen weer te geven.
  • Klik met de rechtermuisknop op het resultaat en selecteer Opslaan als globale variabele om een ​​variabeleverwijzing naar het knooppunt te maken die u in de console kunt gebruiken.