El objetivo de esta guía es ayudar a los usuarios que dependen principalmente de la tecnología de accesibilidad, como los lectores de pantalla, a acceder a Herramientas para desarrolladores de Chrome y usarlo. Las Herramientas para desarrolladores de Chrome son un paquete de herramientas para desarrolladores web integradas en el navegador Google Chrome. Consulta la Referencia de accesibilidad si buscas funciones de DevTools relacionadas con la mejora de la accesibilidad de una página web.
La accesibilidad de DevTools está en desarrollo. Algunos paneles y pestañas funcionan mejor con la tecnología de accesibilidad que otros. En esta guía, se explican los paneles más accesibles y se destacan los problemas específicos que podrías encontrar en el camino.
Descripción general
Antes de comenzar, es útil tener un modelo mental de cómo está estructurada la IU de DevTools. DevTools se divide en una serie de paneles que se organizan en un tablist de ARIA. Por ejemplo:
- El panel Elementos te permite ver y cambiar los nodos DOM o el CSS.
- El panel de Console te permite leer registros de JavaScript y editar objetos en vivo.
Dentro del área de contenido de cada panel, hay varias herramientas diferentes, a las que a menudo se hace referencia como pestañas o paneles en la documentación. Por ejemplo, el panel Elementos contiene pestañas adicionales para inspeccionar los objetos de escucha de eventos, el árbol de accesibilidad y mucho más. La distinción entre pestañas y paneles es un tanto arbitraria. El único motivo por el que verás uno de los términos es para mantener la coherencia con el resto de la documentación oficial de DevTools.
Combinaciones de teclas
La referencia de combinaciones de teclas de DevTools es una hoja de referencia útil. Asegúrate de agregarlo a favoritos y consultarlo mientras exploras los diferentes paneles.
Cómo abrir Herramientas para desarrolladores
Para comenzar, lee Cómo abrir las Herramientas para desarrolladores de Chrome. Existen varias maneras de abrir DevTools, ya sea a través de combinaciones de teclas o elementos de menú.
Cómo navegar entre paneles
Cómo navegar con el teclado
- Con DevTools abierto, presiona Control + ] o Comando + ] (Mac) para enfocar el siguiente panel.
- Presiona Control+[ o Comando+[ (Mac) para enfocar el panel anterior.
- También puedes usar Mayúsculas + Tab para mover el enfoque al
tablistde un panel y usar las teclas de flecha para cambiar de panel, aunque puede ser más rápido usar las combinaciones de teclas mencionadas anteriormente.
Problemas conocidos
- Es posible que algunos paneles, como los de Console y Rendimiento, trasladen el enfoque a su área de contenido tan pronto como se activen. Esto puede dificultar la navegación con las teclas de flecha.
- Se anuncia el nombre del panel seleccionado, pero solo después de leer el contenido enfocado en el panel. Esto puede hacer que sea muy fácil pasarlo por alto.
Cómo navegar por el menú de comandos
Para enfocar un panel específico, usa el menú de comandos:
- Con DevTools abierto, presiona Control + Mayúsculas + P o Comando + Mayúsculas + P (Mac) para abrir el menú de comandos. El menú de comandos es un cuadro combinado de autocompletar de búsqueda parcial.
- Escribe el nombre del panel que deseas abrir y, luego, usa la flecha hacia abajo del teclado para navegar a la opción correcta.
- Presiona Intro para ejecutar un comando.
Por ejemplo, para abrir el panel Elementos, haz lo siguiente:
- Abre el menú de comandos.
- Escribe E y, luego, L. Selecciona la opción Panel > Mostrar elementos.
- Presiona Intro para ejecutar el comando que abre el panel.
Si abres un panel de esta manera, el enfoque se dirige al contenido del panel. En el caso del panel Elementos, el enfoque se mueve al Árbol del DOM.
Panel de elementos
Inspecciona un elemento de la página
- Navega al elemento que quieres inspeccionar con el cursor del lector de pantalla.
- Simula un clic con el botón derecho del mouse en el elemento para abrir el menú contextual.
- Elige la opción Inspeccionar. Se abrirá el panel Elementos y se enfocará el elemento en el Árbol de DOM.
El árbol del DOM se organiza como un tree de ARIA. Consulta Cómo navegar por el árbol del DOM con un teclado para ver un ejemplo.
Cómo copiar el código de un elemento en el árbol del DOM
- Con el enfoque en un nodo del árbol del DOM, abre el menú contextual de clic derecho.
- Expande la opción Copiar.
- Selecciona Copiar outerHTML.
Problemas conocidos
- A menudo, Copy outerHTML no selecciona el nodo actual, sino su nodo superior. Sin embargo, el contenido del elemento debería estar en el outerHTML copiado.
Modifica los atributos de un elemento en el árbol DOM
- Con el enfoque en un nodo del árbol DOM, presiona Intro para que sea editable.
- Presiona Tab para desplazarte entre los valores de los atributos. Cuando escuches "espacio", significa que estás dentro de una entrada de texto vacía y puedes escribir un nuevo valor de atributo.
- Presiona Control + Intro o Comando + Intro (Mac) para aceptar el cambio y escuchar todo el contenido del elemento.
Problemas conocidos
- Cuando escribes en la entrada de texto, no recibes ningún comentario. Si cometes un error tipográfico y usas las teclas de flecha para explorar la entrada, tampoco recibirás comentarios. La forma más fácil de verificar tu trabajo es aceptar el cambio y, luego, esperar a que se anuncie todo el elemento.
Cómo editar el código HTML de un elemento en el árbol del DOM
- Con el enfoque en un nodo del árbol DOM, presiona Intro para que sea editable.
- Presiona Tab para desplazarte entre los valores de los atributos. Cuando escuches el nombre del elemento, por ejemplo, "h2", significa que estás dentro de una entrada de texto y puedes cambiar el tipo del elemento.
- Presiona Control+Intro o Comando+Intro (Mac) para aceptar el cambio.
Por ejemplo, escribir h3 y presionar Control + Intro o Comando + Intro (Mac) cambia las etiquetas de inicio y fin del elemento a h3.
Pestañas del panel de elementos
El panel Elementos contiene pestañas adicionales para inspeccionar elementos, como el CSS aplicado a un elemento o su lugar en el árbol de accesibilidad.
- Con el enfoque en un nodo del árbol DOM, presiona Tab hasta que escuches que se selecciona el panel Styles.
- Usa la flecha hacia la derecha para explorar otras pestañas disponibles.
El árbol del DOM convierte los elementos con atributos href en vínculos en los que se puede enfocar, por lo que es posible que debas presionar Tab más de una vez para llegar al panel de estilos.
Problemas conocidos
No se puede acceder a las pestañas Puntos de interrupción de DOM y Propiedades con el teclado.
Panel de estilos
En el panel Styles, encontrarás controles para filtrar estilos, activar o desactivar estados de elementos (como :active y :focus), activar o desactivar clases y agregar clases nuevas. También hay una
potente herramienta de inspección de estilos para explorar y modificar los estilos aplicados actualmente al elemento que está
en foco en el Árbol del DOM.
El concepto clave que debes comprender sobre el panel Styles es que solo muestra los estilos del nodo seleccionado actualmente en el árbol DOM. Por ejemplo, supongamos que terminaste de inspeccionar los estilos de un nodo <header> y ahora quieres ver los estilos de un nodo <footer>. Para ello, primero debes seleccionar el nodo <footer> en el árbol DOM. Es posible que te resulte más rápido usar el flujo de trabajo Inspect para inspeccionar un nodo que esté cerca del nodo footer (como un vínculo dentro del pie de página), que enfoca el árbol DOM y, luego, usar el teclado para navegar al nodo exacto que te interesa.
Navega por el panel Estilos
Dado que todas las herramientas de diseño se conectan de una forma u otra al panel Styles, tiene sentido primero convertirse en un experto en esta herramienta.
- Con el enfoque en el panel Estilos, presiona Tab para mover el enfoque hacia adentro y explorar su contenido.
- Presiona Tab hasta que el primer estilo se active. Si usas un lector de pantalla, este primer estilo se anunciará como "element.style {}".
- Presiona la flecha hacia abajo para navegar por la lista de estilos en orden de especificidad. Un lector de pantalla anuncia cada estilo comenzando con el nombre del archivo CSS, el número de línea en el que aparece el estilo y el nombre del estilo en sí. Por ejemplo: "main.css:233 .card__img {}"
- Presiona Intro para inspeccionar un estilo con más detalle. El enfoque comienza en una versión editable del nombre del estilo.
- Presiona Tab para desplazarte entre las versiones editables de cada propiedad CSS y sus valores correspondientes. Al final de cada bloque de estilo, hay un campo de texto editable en blanco que puedes usar para agregar propiedades CSS adicionales.
- Puedes seguir presionando Tab para desplazarte por la lista de estilos o presionar Escape para salir de este modo y volver a navegar con las teclas de flecha.
Asegúrate de leer la referencia del teclado del panel Estilos para conocer combinaciones de teclas adicionales.
Problemas conocidos
- Si usas el campo de texto editable Filtro, ya no podrás navegar por la lista de estilos.
Activa o desactiva el estado del elemento
Para activar o desactivar el estado de un elemento, como :active o :focus, haz lo siguiente:
- Navega al panel Styles y presiona Tab hasta que el botón Toggle Element State esté enfocado.
- Presiona Intro para expandir la colección de estados de los elementos. Los estados de los elementos se presentan como un grupo de casillas de verificación.
- Presiona Tab hasta que el primer estado,
:active, esté enfocado. - Presiona Espacio para habilitarla. Si el elemento seleccionado actualmente en el árbol DOM tiene un estilo
:active, ahora se aplica. - Sigue presionando Tab para explorar todos los estados disponibles.
Agrega una clase de salida
Junto al botón Activar o desactivar el estado del elemento, se encuentra el botón Clases de elementos. Para enfocarlo, presiona Tab y, luego, Intro. El enfoque se mueve a un campo de texto de edición etiquetado como Agregar clase nueva.
El botón Element Classes se usa principalmente para agregar clases existentes a un elemento. Por ejemplo, si tu hoja de estilo contenía una clase de ayuda llamada .clearfix, podrías presionar . dentro del campo de texto de edición para ver una lista de sugerencias de clases y usar la flecha hacia abajo para encontrar la sugerencia .clearfix. También puedes escribir el nombre de la clase y presionar Intro para aplicarlo.
Agrega una nueva regla de estilo
Junto al botón Element Classes, se encuentra el botón New Style Rule. Para enfocarlo, presiona Tab y, luego, Intro. El enfoque se mueve a un campo de texto editable dentro del inspector de estilo. El contenido de texto inicial del campo es el nombre de la etiqueta del elemento que se selecciona en el Árbol de DOM. Puedes escribir cualquier nombre de clase que desees en este campo y, luego, presionar Tab para asignarle propiedades CSS.
Pestaña Calculados
Con el enfoque en la pestaña Cálculo, presiona Tab para mover el enfoque hacia adentro y explorar su contenido. En la pestaña Cálculo, hay controles para explorar qué propiedades CSS se aplican realmente a un elemento en orden de especificidad.
Explora todos los estilos calculados
Presiona Tab hasta llegar a la colección de estilos calculados. Se presentan como un tree de ARIA. Si se expande un cuadro de lista, se muestran los selectores de CSS que aplican el estilo calculado. Estos selectores se organizan por especificidad. Un lector de pantalla anuncia el valor calculado, el selector de CSS que coincide actualmente, el nombre del archivo de la hoja de estilo que contiene el selector y el número de línea del selector.
Problemas conocidos
- Si usas el campo de texto Filtrar, ya no podrás inspeccionar los estilos.
Pestaña Objetos de escucha de eventos
Desde el panel Elementos, puedes inspeccionar los objetos de escucha de eventos aplicados a un elemento con la pestaña Objetos de escucha de eventos. Con el enfoque en el panel Styles, presiona la flecha hacia la derecha para navegar a la pestaña Event Listeners.
Explora los objetos de escucha de eventos
Los objetos de escucha de eventos se presentan como un tree de ARIA. Puedes usar las teclas de flecha para navegar por ellos. Un lector de pantalla anuncia el nombre del objeto DOM al que está conectado el objeto de escucha de eventos, así como el nombre del archivo en el que se define el objeto de escucha de eventos y su número de línea.
Panel de accesibilidad
Con el enfoque en el panel de accesibilidad, presiona Tab para mover el enfoque hacia adentro y explorar su contenido. En el panel Accesibilidad, hay controles para explorar el árbol de accesibilidad, los atributos ARIA aplicados a un elemento y sus propiedades de accesibilidad calculadas.
Árbol de accesibilidad
El árbol de accesibilidad se presenta como un tree de ARIA, en el que cada treeitem 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. Usa las teclas de flecha para explorar el árbol y examinar las relaciones de jerarquía.
Problemas conocidos
- Es posible que el tipo de árbol ARIA que usa el panel Accesibilidad no se exponga correctamente en Chrome para lectores de pantalla de macOS, como VoiceOver. Suscríbete al problema 868480 de Chromium para obtener información sobre el progreso de este problema.
- Las secciones Atributos de ARIA y Propiedades calculadas están marcadas como árboles de ARIA, pero actualmente no tienen administración de enfoque, por lo que no se pueden operar con el teclado.
Panel de auditorías
El panel Auditorías te permite ejecutar una serie de pruebas en un sitio para verificar si hay problemas habituales relacionados con el rendimiento, la accesibilidad, el SEO y varias otras categorías.
Configura y ejecuta una auditoría
- Cuando se abre el panel Auditorías por primera vez, el enfoque se coloca en el botón Run Audit al final del formulario. De forma predeterminada, el formulario está configurado para ejecutar auditorías de cada categoría con emulación de dispositivos móviles en una conexión 3G simulada.
- Usa Mayúsculas + Tab o vuelve a navegar en el modo de navegación para cambiar la configuración de auditoría.
- Cuando tengas todo listo para ejecutar la auditoría, vuelve al botón Run Audit y presiona Intro.
- El enfoque se mueve a una ventana modal con un botón Cancelar que te permite salir de la auditoría. Es posible que escuches una serie de indicadores auditivos mientras se ejecuta la auditoría y se actualiza la página varias veces.
Problemas conocidos
- Actualmente, las diferentes secciones del formulario de configuración no están marcadas con un elemento
fieldset. Puede ser más fácil navegar por ellos en el modo de navegación para descubrir qué controles están asociados con cada sección. - No hay un anuncio de región en vivo ni un tono de alerta cuando finaliza la ejecución de la auditoría. Por lo general, tarda unos 30 segundos. Después, deberías poder navegar a los resultados. Usar el modo Explorar puede ser la forma más fácil de llegar a los resultados.
Cómo navegar por el informe de auditoría
El informe de auditoría está organizado en secciones que corresponden a cada una de las categorías de auditoría. El informe se abre con una lista de las puntuaciones de cada categoría. Estas puntuaciones también son vínculos que se pueden usar para ir a las secciones relevantes. Dentro de cada sección, hay elementos details expandibles que contienen información relacionada con las auditorías aprobadas o fallidas. De forma predeterminada, solo se muestran las auditorías que no se completaron correctamente.
Cada sección termina con un elemento details final que contiene todas las auditorías aprobadas.
Para ejecutar una auditoría nueva, usa Mayúsculas + Tab para salir del informe y busca el botón Realizar una auditoría.