Navegar por DevTools con tecnología de asistencia

  • Artículo

Este artículo le ayuda a usar DevTools a través del teclado y a través de la tecnología de asistencia, como los lectores de pantalla. Esta guía le guiará por las herramientas y pestañas que son las más accesibles y resalta los problemas que puede encontrar.

Para ver las características de DevTools relacionadas con la mejora de la accesibilidad de una página web, consulte Características de pruebas de accesibilidad.

Paneles de herramientas con pestañas que contienen pestañas y páginas

Para obtener la terminología de pestañas, herramientas y paneles, consulte Paneles de herramientas con pestañas que contienen pestañas y páginas en Información general de DevTools.

Técnicamente, las pestañas son una lista de pestañas de ARIA.

Accesos rápidos de teclado

Para ver los métodos abreviados de teclado predeterminados para DevTools, consulte Métodos abreviados de teclado. Asegúrese de marcarlo y refiérase a él mientras explora las distintas herramientas.

Abrir DevTools

En Microsoft Edge, puede abrir DevTools con el mouse o el teclado de cualquiera de las siguientes maneras. La herramienta que se abre depende de cómo abra DevTools.

Formas principales:

Acción Herramienta resultante
Haga clic con el botón derecho en cualquier elemento de una página web y, a continuación, seleccione Inspeccionar. La herramienta Elementos , con el árbol DOM expandido para mostrar el elemento de página con el botón derecho.
Presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). La herramienta usada anteriormente o la herramienta de bienvenida .
Presione F12. La herramienta usada anteriormente o la herramienta de bienvenida .

Formas adicionales:

Acción Herramienta resultante
En la barra de herramientas de Microsoft Edge, seleccione Configuración y mucho más (el icono ") >Más herramientas>Herramientas de desarrollo. La herramienta usada anteriormente o la herramienta de bienvenida .
Presione Ctrl+Mayús+J (Windows, Linux) o Comando+Opción+J (macOS). La herramienta Consola .
Presione Ctrl+Mayús+C (Windows, Linux) o Comando+Opción+C (macOS). La herramienta Elementos , con el árbol DOM expandido para mostrar el <body> elemento.
Presione Mayús+F10 para abrir el menú contextual. Para seleccionar el comando Inspeccionar , presione Flecha arriba y, a continuación, Entrar. La herramienta Elementos , con el árbol DOM expandido para mostrar el <html> elemento.
Presione Tab o Mayús+Tab para poner el foco en un elemento de página. A continuación, presione Mayús+F10 para abrir el menú contextual. Para seleccionar el comando Inspeccionar , presione Flecha arriba y, a continuación, Entrar. La herramienta Elementos , con el árbol DOM expandido para mostrar el elemento de página centrado.

Puede moverse entre las herramientas mediante las teclas de navegación del teclado o mediante el menú Comando.

  • Con DevTools abierto, presione Ctrl+] (Windows, Linux) o Comando+] (macOS) para mover el foco a la siguiente herramienta de la barra de actividad.

  • Presione Ctrl+[ (Windows, Linux) o Comando+[ (macOS) para mover el foco a la herramienta anterior en la barra de actividad.

  • Presione Tab o Mayús+Tab repetidamente hasta que el foco se mueva a las pestañas de la barra de actividad o la barra de herramientas de vista rápida y, a continuación, use las teclas de flecha para moverse entre las herramientas.

Problemas conocidos:

  • Algunas herramientas, como las herramientas de consola y rendimiento , pueden mover el foco al área de contenido de la herramienta en cuanto se selecciona la herramienta. Esto puede dificultar la navegación por las teclas de dirección.

  • Se anuncia el nombre de la herramienta seleccionada, pero solo después de anunciar el contenido centrado en la herramienta. Esta secuencia de anuncios puede facilitar la falta del nombre de la herramienta.

Para seleccionar una herramienta específica, use el menú Comando. En el menú Comando, una herramienta se indica como un elemento panel o vista rápida .

  1. Con DevTools abierto, presione Ctrl+Mayús+P (Windows, Linux) o Comando+Mayús+P (macOS) para abrir el menú Comando.

    El menú Comando es un cuadro combinado autocompletar de búsqueda aproximada.

  2. Escriba el nombre de una herramienta y, a continuación, use la flecha abajo del teclado para ir a la opción correcta.

  3. Presione Entrar para ejecutar un comando.

Para abrir la herramienta Elementos :

  1. Abra el menú Comando.

  2. Empiece a escribir elementos, seleccione el comando Mostrar elementos y, a continuación, presione Entrar.

Abrir una herramienta de esta manera coloca el foco en el área de contenido de la herramienta. En el caso de la herramienta Elementos , el foco se mueve al árbol DOM.

La herramienta Elementos

Inspección de un elemento en la página

  1. Vaya al elemento que desea inspeccionar con el cursor en el lector de pantalla.

  2. Haga clic con el botón derecho en el elemento y, a continuación, seleccione la opción Inspeccionar . Se abre la herramienta Elementos y se centra el elemento en el árbol DOM.

El árbol DOM se presenta como árbol ARIA. Para obtener un ejemplo, consulte Navegar por el árbol DOM con un teclado.

Copia del código de un elemento en el árbol DOM

  1. Haga clic con el botón derecho en un nodo en el árbol DOM.

  2. Expanda la opción Copiar .

  3. Seleccione Copiar outerHTML.

Problemas conocidos:

  • Copiar outerHTML a menudo no selecciona el nodo actual, sino que selecciona el nodo primario. Sin embargo, el contenido del elemento debe estar en el objeto copiado outerHTML.

Modificación de los atributos de un elemento en el árbol DOM

  • Cuando el foco esté en un nodo del árbol DOM, presione Entrar para editar el nodo.

  • Presione Tab para moverse entre los valores de atributo. Cuando escucha "space", está dentro de una entrada de texto vacía y puede escribir un nuevo valor de atributo.

  • Presione Ctrl+Entrar (Windows, Linux) o Comando+Entrar (macOS) para aceptar el cambio y escuchar todo el contenido del elemento.

Problemas conocidos:

  • Cuando escribe en la entrada de texto, no recibe comentarios. Si realiza un error tipográfico y usa las teclas de dirección para explorar la entrada, tampoco recibirá comentarios. La manera más fácil de comprobar el trabajo es aceptar el cambio y, a continuación, escuchar todo el elemento que se va a anunciar.

Edición del CÓDIGO HTML de un elemento en el árbol DOM

  • Cuando el foco esté en un nodo del árbol DOM, presione Entrar para editar el nodo.

  • Presione Tab para moverse entre los valores de atributo. Cuando escucha el nombre del elemento, por ejemplo, h2, está dentro de una entrada de texto y puede cambiar el tipo del elemento.

  • Presione Ctrl+Entrar (Windows, Linux) o Comando+Entrar (macOS) para aceptar el cambio.

Por ejemplo, cuando escribe h3 y, a continuación, presiona Ctrl+Entrar (Windows, Linux) o Comando+Entrar (macOS), cambian las etiquetas de inicio y finalización del h3 elemento.

Pestañas en la herramienta Elementos

La herramienta Elementos contiene pestañas adicionales para inspeccionar elementos como el CSS aplicado a un elemento o el lugar pertinente en el árbol de accesibilidad.

  • Cuando el foco esté en el árbol DOM, presione Tab hasta que escuche que el panel Estilos está seleccionado.

  • Presione Flecha derecha para explorar otras pestañas disponibles.

El árbol DOM convierte los elementos con href atributos en vínculos que se pueden centrar, por lo que es posible que tenga que presionar Tab más de una vez para llegar al panel Estilos .

Problemas conocidos:

Las pestañas Puntos de interrupción y Propiedades dom no son accesibles mediante teclado.

Panel Estilos

El panel Estilos tiene controles para filtrar estilos, alternar estados de elemento (como :active y :focus), alternar clases y agregar nuevas clases. También hay una eficaz herramienta de inspección de estilos para explorar y modificar los estilos aplicados actualmente al elemento que tiene el foco en el árbol DOM.

El concepto clave para comprender el panel Estilos es que solo muestra estilos para el nodo seleccionado actualmente en el árbol DOM. Por ejemplo, supongamos que ha terminado de inspeccionar los estilos de un <header> nodo y ahora quiere examinar los estilos de un <footer> nodo. Para ello, primero debe seleccionar el <footer> nodo en el árbol DOM.

Es posible que le resulte más rápido usar el flujo de trabajo Inspeccionar para inspeccionar un nodo que se encuentra en las proximidades generales del footer nodo (por ejemplo, un vínculo dentro del pie de página), que centra el árbol DOM y, a continuación, use el teclado para navegar hasta el nodo exacto en el que está interesado.

Dado que todas las herramientas de estilo se conectan de una manera u otra al panel Estilos , tiene sentido convertirse primero en un experto en esta herramienta.

  • Con el foco en el panel Estilos , presione Tab para mover el foco dentro y explorar el contenido.

  • Presione Tab hasta que el primer estilo se active. Si usa un lector de pantalla, este primer estilo se anuncia como element.style {}.

  • Presione flecha abajo para navegar por la lista de estilos en orden de especificidad. Un lector de pantalla anuncia cada estilo a partir del nombre del archivo CSS, el número de línea en el que aparece el estilo y el nombre del estilo. Por ejemplo, main.css:233 .card__img {}.

  • Presione Entrar para inspeccionar un estilo con más detalle. El foco comienza en una versión modificable del nombre del estilo.

  • Presione Tab para moverse entre las versiones modificables de cada propiedad CSS y los valores correspondientes. Al final de cada bloque de estilo hay un campo de texto editable en blanco que puede usar para agregar propiedades CSS adicionales.

  • Puede continuar presionando Tab para desplazarse por la lista de estilos, o bien presionar Escape para salir del modo y volver a navegar por las teclas de flecha.

Para obtener accesos directos adicionales, vea Referencia de teclado del panel Estilos.

Problemas conocidos:

  • Si usa el campo Filtrar texto modificable, no puede navegar por la lista de estilos.
Alternar estado de elemento

Para alternar el estado de un elemento, como :active o :focus:

  1. Vaya al panel Estilos y presione Tab hasta que el botón Alternar estado del elemento tenga el foco.

  2. Presione Entrar para mostrar la sección Force element state (Forzar estado del elemento ), que contiene casillas.

  3. Presione Tab hasta que el primer estado, :active, tenga el foco.

  4. Presione barra espaciadora para seleccionar (habilitar) la casilla. Si el elemento seleccionado actualmente en el árbol DOM tiene un :active estilo, ahora se aplica.

  5. Presione Tab para explorar todos los estados disponibles.

Adición de una clase existente

El botón Clases de elemento está junto al botón Alternar estado del elemento . Para mover el foco al botón Clases de elemento , presione Tab y, a continuación, presione Entrar. El foco se mueve a un campo de texto de edición con la etiqueta Agregar nueva clase.

El botón Clases de elemento se usa principalmente para agregar clases existentes a un elemento. Por ejemplo, si la hoja de estilos contenía una clase auxiliar denominada .clearfix, puede presionar . dentro del campo editar texto para mostrar una lista de sugerencias de clases y usar la flecha abajo para buscar la .clearfix sugerencia. O bien, escriba el nombre de la clase y presione Entrar para aplicarlo.

Adición de una nueva regla de estilo

Junto al botón Clases de elemento se encuentra el botón Nueva regla de estilo . Para mover el foco a él, presione Tab y, a continuación, presione Entrar. El foco se mueve a un campo de texto modificable dentro del inspector de estilos. El contenido de texto inicial del campo es el nombre de etiqueta del elemento seleccionado en el árbol DOM. Puede escribir cualquier nombre de clase que desee en este campo y, a continuación, presionar Tab para asignarle propiedades CSS.

Pestaña Calculada

Con el foco en la pestaña Calculado , presione Tab para mover el foco dentro y explorar el contenido. En la pestaña Calculado hay controles para explorar qué propiedades CSS se aplican realmente a un elemento en orden de especificidad.

Explorar todos los estilos calculados

Presione Tab hasta llegar a la colección de estilos calculados. Los estilos calculados se presentan como un árbol de ARIA. La expansión de un cuadro de lista revela qué selectores CSS aplican el estilo calculado. Estos selectores se organizan por especificidad. Un lector de pantalla anuncia el valor calculado, el selector CSS que coincide actualmente, el nombre de archivo de la hoja de estilos que contiene el selector y el número de línea del selector.

Problemas conocidos:

  • Si usa el campo Filtrar texto, ya no podrá inspeccionar los estilos.

Pestaña Agentes de escucha de eventos

Para inspeccionar los agentes de escucha de eventos que se aplican a un elemento, seleccione la herramienta Elementos y, a continuación, seleccione la pestaña Agentes de escucha de eventos (agrupada con la pestaña Estilos ).

Cuando el foco esté en la pestaña Estilos , presione Flecha derecha para ir a la pestaña Agentes de escucha de eventos.

Exploración de agentes de escucha de eventos

Los agentes de escucha de eventos se presentan como un árbol de ARIA. Puede usar las teclas de dirección para navegar por ellas. Un lector de pantalla anuncia el nombre del objeto DOM al que está conectado el agente de escucha de eventos, así como el nombre de archivo donde se define el agente de escucha de eventos y el número de línea.

Pestaña Accesibilidad

Seleccione la tecla Tab para moverse dentro de la pestaña Accesibilidad de la herramienta Elementos .

La pestaña Accesibilidad está cerca de la pestaña Estilos . En la pestaña Accesibilidad, hay controles para explorar el árbol de accesibilidad, los atributos de ARIA aplicados a un elemento y las propiedades de accesibilidad calculadas. Consulte Probar accesibilidad mediante la pestaña Accesibilidad.

Árbol de accesibilidad

El árbol de accesibilidad se presenta como un árbol de ARIA donde cada treeitem uno corresponde a un elemento del DOM. El árbol anuncia el rol calculado para el nodo seleccionado. Los elementos genéricos como div y span se anuncian como "GenericContainer" en el árbol. Use las teclas de flecha para recorrer el árbol y explorar las relaciones entre elementos primarios y secundarios.

Problemas conocidos:

  • Es posible que el tipo de árbol de ARIA que usa la pestaña Accesibilidad no se exponga correctamente en Microsoft Edge para los lectores de pantalla de macOS, como VoiceOver. Suscríbase a Chromium problema n.º 868480 para recibir información sobre el progreso de este problema.
  • Cada una de las secciones Atributos de ARIA y Propiedades calculadas se marcan como un árbol de ARIA, pero cada sección no tiene actualmente administración de foco y no es operable mediante teclado.

Conservar la información sobre herramientas de la herramienta Inspeccionar y la superposición de color de cuadrícula

Al hacer clic en el botón Inspeccionar herramienta y moverse por la página web representada, la información sobre herramientas Inspeccionar cambia. Para mantener la información sobre herramientas actual y la superposición de color de cuadrícula mostrada, mantenga presionada la tecla Ctrl+Alt (Windows, Linux) o Ctrl+Opción (macOS) mientras se mueve por la página web representada.

Esta técnica puede ser útil cuando se usa una lupa de pantalla u otras tecnologías de asistencia. Si no hace que la información sobre herramientas de la herramienta Inspeccionar persista, la superposición del puntero cambia constantemente cuando se usa la herramienta Inspeccionar (botón Inspeccionar herramienta).

Consulte Analizar páginas mediante la herramienta Inspeccionar.

Herramienta Lighthouse

Lighthouse ejecuta una serie de pruebas en un sitio para comprobar si hay problemas comunes relacionados con el rendimiento, la accesibilidad, el SEO y otras categorías.

Configuración y generación de un informe

  1. Cuando la herramienta Lighthouse se abre por primera vez en DevTools, el foco se coloca en el botón Generar informe . De forma predeterminada, el formulario está configurado para ejecutar informes para cada categoría mediante la emulación móvil en una conexión 3G simulada.

  2. Para cambiar la configuración del informe, use Mayús+Tab para centrarse en la configuración de Lighthouse o vuelva al modo Examinar.

  3. Cuando esté listo para ejecutar el informe, vuelva al botón Generar informe y presione Entrar.

  4. El foco se mueve a una ventana modal con un botón Cancelar que le permite salir de la auditoría. Es posible que escuche una serie de earcons a medida que la auditoría se ejecuta y actualiza la página varias veces.

Problemas conocidos:

  • Las distintas secciones del formulario de configuración no están marcadas actualmente con un fieldset elemento . Puede ser más fácil navegar por ellos en el modo Examinar para averiguar qué controles están asociados a cada sección.
  • No hay ningún anuncio de earcon o región activa cuando la auditoría haya terminado de ejecutarse. Por lo general, la auditoría tarda unos 30 segundos, después de lo cual debería poder navegar hasta los resultados. El uso del modo Examinar puede ser la manera más fácil de alcanzar los resultados.

El informe de Lighthouse se organiza en secciones que se corresponden con cada una de las categorías de auditoría. El informe se abre con una lista de puntuaciones para cada categoría. Estas puntuaciones también son vínculos que puede usar para ir a las secciones pertinentes. Dentro de cada sección hay elementos que se pueden details expandir, que contienen información relacionada con auditorías pasadas o con errores. De forma predeterminada, solo se muestran las auditorías con errores. Cada sección termina con un elemento final details que contiene todas las auditorías pasadas.

Para ejecutar una nueva auditoría, use Mayús+Tab para salir del informe y seleccione el botón Generar informe .

Vea también

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 Rob Dodson.

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