Seguimiento de qué elemento tiene el foco

Para indicar en todo momento qué elemento tiene el foco, use una expresión dinámica en la herramienta Consola . Esto resulta útil porque al probar la accesibilidad de navegación por teclado de una página, al navegar por la página web representada presionando Tab o Mayús+Tab, el indicador del anillo de enfoque de la página web a veces desaparece, porque el elemento que tiene el foco está oculto o fuera de la vista.

Uso de una expresión dinámica para determinar qué elemento tiene el foco

Para realizar un seguimiento del elemento centrado en tabulaciones en la consola de DevTools mediante una expresión dinámica:

1. Abra la página web de demostración de pruebas de accesibilidad en una nueva ventana o pestaña.

2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

3. Si la barra de herramientas vista rápida no está visible en DevTools, presione Esc para mostrar el panel Vista rápida .

4. En la barra de herramientas Vista rápida , seleccione la pestaña Consola :

   

5. Haga clic en el botón Crear expresión dinámica (). Aparece la sección Live Expression:

   

6. En el cuadro de texto Expresión , escriba lo siguiente: document.activeElement

7. Haga clic fuera del cuadro de texto Expresión para guardar la expresión activa. Se evalúa Live Expression y el resultado se muestra debajo del cuadro de texto Expresión :

   

8. Haga clic en la página web representada para centrarse en ella y, a continuación, presione Tab o Mayús+Tab para mover el foco en la página web representada.

   El valor que se muestra a continuación document.activeElement es el resultado de la expresión. Al presionar Tab para desplazarse entre los elementos de la página web, el document.activeElement valor cambia:

   

El código JavaScript de una expresión dinámica se evalúa en tiempo real y el resultado que se muestra debajo del código siempre representa el valor de expresión actual.

El valor de Live Expression solo se muestra en la consola como una vista previa de texto. Los nodos DOM se representan mediante sus nombres de etiqueta y atributos de clase o identificador opcionales. Por ejemplo:

• Se muestra a#alpacas un elemento <a href="#alpacas">Alpacas</a> delimitador en el resultado de Live Expression.
• Se muestra input un cuadro de <input> texto en el resultado de Live Expression.

Para indicar qué elemento tiene el foco en la página web representada, use la herramienta Elementos como se describe en la sección siguiente.

Abra el elemento con el foco en la herramienta Elementos.

El resultado de live document.activeElement expression es solo una vista previa del elemento DOM que tiene el foco. Para saber exactamente qué elemento tiene el foco en la página web representada, use la herramienta Elementos :

1. En la herramienta Consola , mantenga el puntero sobre el resultado de Live Expression (debajo de Live document.activeElement Expression).

   El elemento centrado se resalta en la página web representada:

   

2. Haga clic con el botón derecho en el resultado de Live Expression y, a continuación, seleccione Mostrar en el panel Elementos.

   En la herramienta Elementos , el árbol DOM se expande automáticamente y selecciona el nodo DOM que está centrado actualmente:

   

   El elemento activo es la representación de árbol DOM del elemento de página web al que navegaste presionando Tab o Mayús+Tab.

Crear una referencia al elemento centrado en la herramienta Consola

Para manipular el elemento centrado en la herramienta Consola , cree una referencia a él:

1. En la herramienta Consola , mantenga el puntero sobre el resultado de Live Expression (debajo de Live document.activeElement Expression).

2. Haga clic con el botón derecho en el resultado de Live Expression y, a continuación, seleccione Store outerHTML (Almacenar outerHTML) como variable global.

   Un nuevo nombre de variable como temp1 aparece en la herramienta Consola y su valor se representa a continuación:

   

3. Use el elemento de la herramienta Consola según sea necesario mediante la temp1 variable . Por ejemplo, ejecute temp1.value = "cat" para cambiar el valor del elemento centrado a "cat":

   

Vea también

• Analizar la falta de indicación del foco del teclado

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques.

Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.