Cómo navegar por las Herramientas para desarrolladores de Chrome con tecnología de accesibilidad

El objetivo de esta guía es ayudar a los usuarios que dependen principalmente de la tecnología de asistencia, como los lectores de pantalla, a acceder a las Herramientas para desarrolladores de Chrome y 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 la 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 camino.

Descripción general

Antes de comenzar, es útil tener un modelo mental de cómo se estructura la IU de Herramientas para desarrolladores. Las Herramientas para desarrolladores se dividen en una serie de paneles que se organizan en un ARIA tablist. Por ejemplo:

• El panel Elements te permite ver y cambiar nodos del DOM o CSS.
• El panel Console te permite leer registros de JavaScript y editar objetos en tiempo real.

Dentro del área de contenido de cada panel, hay varias herramientas diferentes, a menudo denominadas 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 algo arbitraria. El único motivo por el que verás un término u otro 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 las Herramientas para desarrolladores es una hoja de referencia útil. Asegúrate de agregarla a tus favoritos y consultarla a medida que explores los diferentes paneles.

Cómo abrir las Herramientas para desarrolladores

Para comenzar, lee Cómo abrir las Herramientas para desarrolladores de Chrome. Existen varias formas de abrir DevTools, ya sea a través de combinaciones de teclas o elementos de menú.

Cómo navegar entre paneles

Navega 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 es posible usar Mayúsculas + Tab para enfocar el tablist de un panel y usar las teclas de flecha para cambiar de panel, aunque puede ser más rápido usar los atajos mencionados anteriormente.

Problemas conocidos

• Algunos paneles, como los de Console y Performance, pueden enfocar 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 que se haya leído el contenido enfocado en el panel. Esto puede hacer que sea muy fácil pasarlo por alto.

Navega por el menú de comandos

Para enfocar un panel específico, usa el menú de comandos:

1. Con DevTools abierto, presiona Ctrl + Mayúsculas + P o Cmd + Mayúsculas + P (Mac) para abrir el Menú de comandos. El menú de comandos es un cuadro combinado de autocompletar con búsqueda parcial.
2. Escribe el nombre del panel que deseas abrir y, luego, usa la flecha hacia abajo del teclado para navegar hasta la opción correcta.
3. Presiona Intro para ejecutar un comando.

Por ejemplo, para abrir el panel Elements, haz lo siguiente:

1. Abre el menú de comandos.
2. Escribe E y, luego, L. La opción Panel > Show Elements está seleccionada.
3. Presiona Intro para ejecutar el comando que abre el panel.

Abrir un panel de esta manera dirige el enfoque al contenido del panel en sí. En el caso del panel Elements, el enfoque se mueve al árbol del DOM.

Panel Elementos

Cómo inspeccionar un elemento en la página

1. Navega hasta el elemento que deseas inspeccionar con el cursor del lector de pantalla.
2. Simula un clic con el botón derecho del mouse en el elemento para abrir el menú contextual.
3. Elige la opción Inspeccionar. Se abrirá el panel de Elementos y se enfocará el elemento en el árbol del DOM.

El árbol del DOM se presenta 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

1. Con el enfoque en un nodo del árbol del DOM, abre el menú contextual con el botón derecho.
2. Expande la opción Copiar.
3. Selecciona Copiar outerHTML.

Problemas conocidos

• Copy outerHTML a menudo no selecciona el nodo actual, sino su nodo principal. Sin embargo, el contenido del elemento debe seguir estando en el outerHTML copiado.

Modifica los atributos de un elemento en el árbol del DOM

• Con el enfoque en un nodo del árbol del DOM, presiona Intro para que se pueda editar.
• Presiona Tab para desplazarte entre los valores de los atributos. Cuando escuches "espacio", estarás dentro de una entrada de texto vacía y podrás 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 comentarios. Si cometes un error de escritura y usas las teclas de flecha para explorar tu entrada, tampoco recibirás comentarios. La forma más fácil de verificar tu trabajo es aceptar el cambio y, luego, escuchar el anuncio completo del elemento.

Cómo editar el código HTML de un elemento en el árbol del DOM

• Con el enfoque en un nodo del árbol del DOM, presiona Intro para que se pueda editar.
• Presiona Tab para desplazarte entre los valores de los atributos. Cuando escuches el nombre del elemento, por ejemplo, "h2", estarás dentro de una entrada de texto y podrás cambiar el tipo del 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 cierre del elemento cambian a h3.

Pestañas del panel de elementos

El panel Elements 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 del DOM, presiona Tab hasta que escuches que se seleccionó 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 Styles.

Problemas conocidos

No se puede acceder a las pestañas DOM Breakpoints y Properties con el teclado.

Panel Styles

En el panel Estilos, 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 que se aplican actualmente al elemento que está enfocado 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 del 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 del DOM. Es posible que te resulte más rápido usar el flujo de trabajo Inspeccionar para inspeccionar un nodo que se encuentre cerca del nodo footer (como un vínculo en el pie de página), lo que enfoca el árbol del 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 u otra forma con el panel Estilos, tiene sentido convertirse en un experto en esta herramienta primero.

• Con el enfoque en el panel Estilos, presiona Tab para mover el enfoque dentro del panel 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 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 diseño con más detalle. El enfoque comienza en una versión editable del nombre del diseño.
• Presiona Tab para moverte 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 de 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 de teclado del panel Estilos para conocer más combinaciones de teclas.

Problemas conocidos

• Si usas el campo de texto editable Filtro, ya no podrás navegar por la lista de estilos.

Activar o desactivar el estado del elemento

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

1. Navega al panel Estilos y presiona Tab hasta que el botón Alternar estado del elemento tenga el enfoque.
2. 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.
3. Presiona Tab hasta que el primer estado, :active, esté enfocado.
4. Presiona Espacio para habilitarla. Si el elemento seleccionado actualmente en el árbol del DOM tiene un estilo :active, ahora se aplica.
5. Sigue presionando Tab para explorar todos los estados disponibles.

Cómo 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 Agregar clase nueva.

El botón Element Classes se usa principalmente para agregar clases existentes a un elemento. Por ejemplo, si tu hoja de diseño 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.

Cómo agregar una regla de estilo nueva

Junto al botón Clases de elementos, se encuentra el botón Nueva regla de estilo. Para enfocarlo, presiona Tab y, luego, Intro. El enfoque se mueve a un campo de texto editable dentro del inspector de estilos. El contenido de texto inicial del campo es el nombre de la etiqueta del elemento seleccionado en el árbol del DOM. Puedes escribir el nombre de la clase que desees en este campo y, luego, presionar Tab para asignarle propiedades CSS.

Pestaña Calculado

Con el enfoque en la pestaña Calculado, presiona Tab para mover el enfoque hacia el interior y explorar su contenido. En la pestaña Calculado, 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 expandes un cuadro de lista, se revelan los selectores de CSS que aplican el estilo calculado. Estos selectores se organizan por especificidad. Un lector de pantalla anuncia el valor calculado, qué selector de CSS coincide actualmente, el nombre de archivo de la hoja de diseño que contiene el selector y el número de línea del selector.

Problemas conocidos

• Si usas el campo de texto Filtro, ya no podrás inspeccionar los diseños.

Pestaña Event listeners

En el panel Elements, puedes inspeccionar los objetos de escucha de eventos aplicados a un elemento con la pestaña Event Listeners. 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 ellas. Un lector de pantalla anuncia el nombre del objeto DOM al que se adjunta 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 Accesibilidad, presiona Tab para mover el enfoque hacia el interior 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 recorrer el árbol y explorar las relaciones entre elementos principales y secundarios.

Problemas conocidos

• Es posible que el tipo de árbol ARIA que usa el panel Accesibilidad no se exponga correctamente en Chrome para los lectores de pantalla de macOS, como VoiceOver. Suscríbete al problema 868480 de Chromium para mantenerte al tanto del progreso en relación con este problema.
• Las secciones Atributos de ARIA y Propiedades calculadas están marcadas como árboles de ARIA, pero actualmente no tienen administración del enfoque, por lo que no se pueden operar con el teclado.

Panel de Auditorías

El panel Audits te permite ejecutar una serie de pruebas en un sitio para verificar si hay problemas comunes relacionados con el rendimiento, la accesibilidad, el SEO y otras categorías.

Configura y ejecuta una auditoría

1. Cuando se abre el panel Audits 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 en cada categoría con la emulación de dispositivos móviles en una conexión 3G simulada.
2. Usa Mayúsculas + Tab o vuelve a navegar en el modo de navegación para cambiar la configuración de auditoría.
3. Cuando esté todo listo para ejecutar la auditoría, vuelve al botón Ejecutar auditoría y presiona Intro.
4. 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 íconos de audio 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 exploración para averiguar qué controles están asociados con cada sección.
• No hay ningún earcon ni anuncio de región activa cuando finaliza la auditoría. Por lo general, tarda unos 30 segundos, después de lo cual deberías poder navegar a los resultados. Usar el modo de navegación puede ser la forma más sencilla de llegar a los resultados.

Cómo navegar por el informe de auditoría

El informe de auditoría se organiza 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 saltar a las secciones pertinentes. Dentro de cada sección, hay elementos details expandibles que contienen información relacionada con las auditorías aprobadas o rechazadas. De forma predeterminada, solo se muestran las auditorías con errores. 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.