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 las herramientas para desarrolladores de Chrome y a usarlas. Las Herramientas para desarrolladores de Chrome son un conjunto de herramientas para desarrolladores web integradas en el navegador Google Chrome. Consulta la Referencia de accesibilidad si buscas funciones de Herramientas para desarrolladores relacionadas con la mejora de la accesibilidad de una página web.
La accesibilidad de Herramientas para desarrolladores es un trabajo en curso. Algunos paneles y pestañas funcionan mejor con tecnología de asistencia que otros. En esta guía, se explican los paneles más accesibles y se destacan los problemas específicos que puedes encontrar en el proceso.
Descripción general
Antes de comenzar, es útil tener un modelo mental de cómo se estructura la IU de Herramientas para desarrolladores. Herramientas para desarrolladores se divide en una serie de paneles que se organizan en un tablist de ARIA. Por ejemplo:
- El panel Elements te permite ver y cambiar los nodos del DOM o CSS.
- El panel Console te permite leer registros de JavaScript y objetos de edición en vivo.
Dentro del área de contenido de cada panel, hay una serie de herramientas diferentes, que suelen llamarse pestañas o paneles en la documentación. Por ejemplo, el panel Elements 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 poco arbitraria. La única razón por la que verás un término u otro es para mantener la coherencia con el resto de la documentación oficial de Herramientas para desarrolladores.
Combinaciones de teclas
La referencia Combinaciones de teclas de Herramientas para desarrolladores es una hoja de referencia útil. Asegúrate de agregarlo a favoritos y volver a consultarlo mientras exploras los diferentes paneles.
Abrir Herramientas para desarrolladores
Para comenzar, lea el artículo Cómo abrir las Herramientas para desarrolladores de Chrome. Hay varias maneras de abrir las Herramientas para desarrolladores, ya sea mediante combinaciones de teclas o elementos de menú.
Cómo navegar entre paneles
Navegar por teclado
- Con las Herramientas para desarrolladores abiertas, presiona Control+] o Comando+] (Mac) para enfocar el siguiente panel.
- Presiona Ctrl + [ o Command + [ (Mac) para enfocar el panel anterior.
- También es posible usar Mayúsculas + Tab para mover el enfoque al
tablistde un panel y usar las teclas de flecha para cambiar de paneles, aunque puede ser más rápido usar las combinaciones de teclas antes mencionadas.
Errores conocidos
- Algunos paneles, como Console y Rendimiento, pueden mover el enfoque a su área de contenido en cuanto se activan. 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 pasar por alto.
Navegar por el menú de comandos
Para enfocar un panel específico, usa el menú de comandos:
- Con las Herramientas para desarrolladores abiertas, 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 búsqueda parcial de autocompletado.
- Escribe el nombre del panel que deseas abrir y usa el teclado de flecha hacia abajo para navegar hasta 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. Está seleccionada la opción Panel > Mostrar elementos.
- Presiona Intro para ejecutar el comando que abre el panel.
Cuando se abre un panel, el foco se dirige al contenido del panel. En el caso del panel Elementos, el foco se mueve al Árbol del DOM.
Panel de elementos
Cómo inspeccionar un elemento de la página
- Navega al elemento que quieras 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 Elements y se enfocará el elemento en el Árbol del DOM.
El árbol del DOM está diseñado como un tree de ARIA. Consulta Cómo navegar por el árbol del DOM con un teclado para ver un ejemplo.
Copia el código de un elemento en el árbol del DOM
- Con el foco en un nodo en el Árbol del DOM, aparecerá el menú contextual que aparece cuando se hace clic con el botón derecho.
- Expande la opción Copiar.
- Selecciona Copiar HTML externo.
Errores conocidos
- Por lo general, Copy outerHTML no selecciona el nodo actual, sino el nodo superior. Sin embargo, el contenido del elemento debe seguir estando en el outerHTML copiado.
Modificar los atributos de un elemento en el árbol del DOM
- Con el foco en un nodo del Árbol del DOM, presiona Intro para que se pueda editar.
- Presione Tab para desplazarse entre los valores de los atributos. Cuando escuchas "space", 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.
Errores conocidos
- Cuando escribes en la entrada de texto, no recibes comentarios. Si cometes un error tipográfico y usas las teclas de flecha para explorar tu entrada, tampoco recibirás comentarios. La manera más fácil de verificar tu trabajo es aceptar el cambio y, luego, escuchar a que se anuncie todo el elemento.
Editar el HTML de un elemento en el árbol del DOM
- Con el foco en un nodo del Árbol del DOM, presiona Intro para que se pueda editar.
- Presione Tab para desplazarse entre los valores de los atributos. Cuando escuchas el nombre del elemento, por ejemplo, "h2", te encuentras dentro de una entrada de texto y puedes cambiar el tipo de elemento.
- Presiona Control + Intro o Comando + Intro (Mac) para aceptar el cambio.
Por ejemplo, si escribes h3 y presionas Control + Intro o Comando + Intro (Mac), las etiquetas de inicio y fin del elemento se cambian a h3.
Pestañas del panel de elementos
El panel Elements contiene pestañas adicionales para inspeccionar aspectos como el CSS aplicado a un elemento o su lugar en el árbol de accesibilidad.
- Con el foco en un nodo del Árbol del DOM, presiona Tab hasta escuchar que esté seleccionado 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 enfocables, por lo que es posible que debas presionar Tab más de una vez para llegar al panel Estilos.
Errores conocidos
No se puede acceder con el teclado a las pestañas DOM Breakpoints y Properties.
Panel Styles
En el panel Styles, encontrarás controles para filtrar estilos, activar o desactivar los estados de los elementos (como
:active y :focus), alternar clases y agregar clases nuevas. También hay una potente herramienta de inspección de estilo que permite explorar y modificar los diseños que se aplican actualmente al elemento enfocado en el Árbol del DOM.
El concepto clave que se debe comprender sobre el panel Estilos es que solo se muestran los diseños para el nodo seleccionado actualmente en el Árbol del DOM. Por ejemplo, supongamos que terminaste de inspeccionar los estilos de un nodo <header> y ahora deseas ver los diseños de un nodo <footer>. Para ello, primero debes seleccionar el nodo <footer> en el árbol del DOM. Es posible que te resulte más rápido usar el flujo de trabajo Inspect para inspeccionar un nodo que se encuentre cerca del nodo footer (como un vínculo dentro del pie de página), que enfoca el árbol del DOM y, luego, usar el teclado para navegar al nodo exacto que te interesa.
Cómo navegar por el panel Estilos
Debido a que todas las herramientas de estilo se conectan de una manera u otra al panel Styles, tiene sentido convertirse primero en un experto en esta herramienta.
- Con el foco en el panel Styles, presiona Tab para mover el foco dentro y explorar su contenido.
- Presiona Tab hasta que se active el primer estilo. 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 a partir del nombre del archivo CSS, el número de línea en el que aparece el diseño y su propio nombre. Por ejemplo: “main.css:233 .card__img {}”
- Presiona Intro para inspeccionar un estilo con más detalle. El foco comienza en una versión editable del nombre del estilo.
- Presiona el Tabulador para desplazarte entre las versiones editables de cada propiedad de 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 de CSS adicionales.
- Puedes seguir presionando Tab para desplazarte por la lista de estilos o presionar Escape a fin de salir de este modo y volver a la navegación con las teclas de flecha.
Asegúrate de leer la referencia de teclado del panel Estilos para conocer más combinaciones de teclas.
Problemas conocidos
- Si usas el campo de texto editable de Filtro, ya no podrás navegar por la lista de diseños.
Activar o desactivar 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 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 la barra espaciadora para habilitarlo. Si el elemento seleccionado actualmente en el árbol del DOM tiene un estilo
:active, ahora se aplica. - Sigue presionando la tecla Tab para explorar todos los estados disponibles.
Agregar una clase saliente
Junto al botón Toggle Element State, se encuentra el botón Element Classes. Para enfocarlo, presiona Tab y, luego, Intro. El enfoque se mueve a un campo de edición de texto etiquetado como Add New Class.
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 auxiliar llamada .clearfix, puedes presionar . dentro del campo de edición de texto 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.
Agregar 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 foco se traslada a un campo de texto editable dentro del inspector de estilo. El contenido de texto inicial del campo es el nombre de etiqueta del elemento que se selecciona en el Árbol del DOM. Puedes escribir cualquier nombre de clase que desees en este campo y, luego, presionar Tab para asignarle las propiedades de CSS.
Pestaña Calculadas
Con el foco en la pestaña Computed, presiona Tab para mover el foco y explorar su contenido. En la pestaña Computed, hay controles para explorar qué propiedades de CSS se aplican realmente a un elemento en orden de especificidad.
Explorar todos los diseños computados
Presiona Tab hasta llegar a la colección de diseños computados. Estos se presentan como un tree de ARIA. Cuando se expande un cuadro de lista, se muestran los selectores CSS que aplican el estilo calculado. Estos selectores están organizados por especificidad. Un lector de pantalla anuncia el valor calculado, el selector de CSS que coincide en este momento, el nombre de archivo de la hoja de estilo que contiene el selector y el número de línea del selector.
Errores conocidos
- Si usas el campo de texto Filtro, ya no podrás inspeccionar estilos.
Pestaña de objetos de escucha de eventos
En el panel Elements, puedes inspeccionar los objetos de escucha de eventos que se aplicaron a un elemento con la pestaña Event Listeners. Con el foco en el panel Styles, presiona la flecha hacia la derecha para navegar a la pestaña Objetos de escucha de eventos.
Explora 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 ellas. Un lector de pantalla anuncia el nombre del objeto DOM al que está vinculado el objeto de escucha de eventos, así como el nombre del archivo donde se define el objeto de escucha de eventos y su número de línea.
Panel de accesibilidad
Con el foco en el panel Accesibilidad, presiona Tab para mover el foco dentro y explorar su contenido. Dentro del panel Accessibility, hay controles para explorar el árbol de accesibilidad, los atributos de ARIA aplicados a un elemento y sus propiedades de accesibilidad calculadas.
Árbol de accesibilidad
El árbol de accesibilidad se presenta como una tree de ARIA, en la 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 recorrer el árbol y explorar las relaciones entre elementos superiores y secundarios.
Errores conocidos
- Es posible que el tipo de árbol ARIA que usa el panel Accessibility no se exponga correctamente en Chrome para los lectores de pantalla de macOS, como VoiceOver. Suscríbete al problema #868480 de Chromium para recibir información sobre el progreso de este problema.
- Las secciones Atributos ARIA y Propiedades computadas están marcadas como árboles ARIA, pero actualmente no tienen administración de foco, por lo que no se puede operar con el teclado.
Panel de auditorías
El panel Auditorías te permite ejecutar una serie de pruebas en un sitio para verificar problemas comunes relacionados con el rendimiento, la accesibilidad, la SEO y otras categorías.
Configura y ejecuta una auditoría
- Cuando el panel Audits (Audits) se abre por primera vez, el foco se centra en el botón Run Audit, que está al final del formulario. De forma predeterminada, el formulario está configurado para ejecutar auditorías en cada categoría mediante la emulación móvil en una conexión 3G simulada.
- Usa Mayúsculas + Tab o navega hacia atrás en el modo de navegación para cambiar la configuración de la auditoría.
- Cuando tengas todo listo para ejecutar la auditoría, regresa al botón Ejecutar auditoría y presiona Intro.
- El enfoque pasa a una ventana modal con un botón Cancel que te permite salir de la auditoría. Es posible que escuches una serie de íconos sonoros a medida que se ejecuta la auditoría y se actualiza la página varias veces.
Errores conocidos
- Por el momento, las diferentes secciones del formulario de configuración no están marcadas con un elemento
fieldset. Es posible que sea más fácil navegar por ellas en el modo de navegación para determinar qué controles están asociados a cada sección. - Cuando termina de ejecutarse la auditoría, no se muestra ningún sonido ni un anuncio de región activa. En general, el proceso tarda alrededor de 30 segundos. Después de ese período, deberías poder navegar a los resultados. Usar el modo de navegación puede ser la forma más fácil de obtener 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 puntuaciones para cada categoría. Estas puntuaciones también son enlaces que se pueden utilizar
para pasar a las secciones relevantes. Cada sección contiene elementos details expandibles que contienen información relacionada con auditorías aprobadas o fallidas. De forma predeterminada, solo se muestran las auditorías con errores.
Cada sección finaliza con un elemento details final que contiene todas las auditorías aprobadas.
Si quieres ejecutar una auditoría nueva, usa Mayúsculas + Tab para salir del informe y busca el botón Realizar una auditoría.