Suivre l'objectif de l'élément

Supposons que vous testez l'accessibilité d'une page lors de la navigation au clavier. Lorsque vous parcourez la page avec la touche Tabulation, l'anneau de focus disparaît parfois car l'élément sélectionné est masqué. Pour suivre l'élément sélectionné dans les outils de développement:

  1. Ouvrez la console.
  2. Cliquez sur Create Live Expression (Créer une expression instantanée) Créer une expression vivante.

    Créer une expression en temps réel.

    Pour en savoir plus, consultez Regarder les valeurs JavaScript en temps réel avec des expressions en direct.

  3. Tapez document.activeElement.

  4. Cliquez en dehors de l'interface utilisateur Live Expression pour enregistrer.

La valeur que vous voyez en dessous de document.activeElement correspond au résultat de l'expression. Étant donné que cette expression représente toujours l'élément sélectionné, vous pouvez désormais identifier systématiquement l'élément sélectionné.

  • Pointez sur le résultat pour mettre en surbrillance l'élément sélectionné dans la fenêtre d'affichage.
  • Effectuez un clic droit sur le résultat, puis sélectionnez Afficher dans le panneau "Éléments" pour afficher l'élément dans l'arborescence DOM du panneau Éléments.
  • Effectuez un clic droit sur le résultat et sélectionnez Store as global variable (Stocker en tant que variable globale) pour créer une référence de variable au nœud que vous pouvez utiliser dans la console.