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

Rob Dodson

El objetivo de esta guía es ayudar a los usuarios que dependen principalmente de la tecnología de accesibilidad (AT), 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 las Herramientas para desarrolladores relacionadas con la mejora de la accesibilidad de una página web.

La accesibilidad de las Herramientas para desarrolladores es un trabajo en curso. Algunos paneles y pestañas funcionan mejor con la AT 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

Las Herramientas para desarrolladores se dividen en una serie de paneles que se organizan en una ARIA tablist. Por ejemplo:

Dentro del área de contenido de cada panel, hay varias herramientas diferentes, que a menudo se denominan pestañas o paneles en la documentación. Por ejemplo, el panel Elementos contiene pestañas adicionales para inspeccionar 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 o el otro es para mantener la coherencia con el resto de la documentación oficial de las Herramientas para desarrolladores.

Combinaciones de teclas

La referencia de combinaciones de teclas de las Herramientas para desarrolladores es una hoja de referencia útil. Asegúrate de marcarla como favorita y volver a consultarla mientras exploras los diferentes paneles.

Cómo abrir las Herramientas para desarrolladores

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

Cómo navegar entre paneles

Puedes navegar entre los paneles con el teclado, el menú de comandos o con un mouse o trackpad.

Navegar con el teclado

  • Con las Herramientas para desarrolladores abiertas, 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 mover el enfoque a la de un panel y usar las teclas de flecha para cambiar de panel, aunque puede ser más rápido usar los accesos directos mencionados anteriormente.tablist

Problemas conocidos

  • Algunos paneles, como los paneles Consola 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 que un lector de pantalla haya leído el contenido enfocado en el panel. Esto puede hacer que sea muy fácil perderse.

Navegar por el menú de comandos

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

  1. 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 autocompletar de búsqueda difusa.
  2. Escribe el nombre del panel que deseas abrir y, luego, usa el teclado Flecha hacia abajo para navegar a la opción correcta.
  3. Presiona Intro para ejecutar un comando.

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

  1. Abre el menú de comandos.
  2. Escribe E y, luego, L. Se selecciona la opción Panel > Mostrar elementos.
  3. Presiona Intro para ejecutar el comando que abre el panel.

Si abres un panel de esta manera, se dirige el enfoque al contenido del panel. En el caso del panel Elementos, el enfoque se mueve al árbol del DOM.

Panel de 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 panelElementos y se enfocará el elemento en el árbol del DOM.

El árbol del DOM se presenta como un ARIA tree. Consulta un ejemplo en Cómo navegar por el árbol del DOM con un teclado.

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

  • Copiar outerHTML suele seleccionar el nodo superior, en lugar del nodo deseado. Sin embargo, el contenido del elemento aún debe estar en el elemento copiado dentro de outerHTML.

Cómo modificar 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 moverte 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 escribas en la entrada de texto, no recibirás comentarios. Si cometes un error tipográfico y usas las teclas de flecha para explorar tu entrada, no recibirás comentarios. La forma más fácil de verificar tu trabajo es aceptar el cambio y, luego, escuchar el anuncio de todo el elemento.

Cómo editar el 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 moverte 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), se cambian las etiquetas de inicio y finalización 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 del DOM, presiona Tab hasta que escuches que se seleccionó el panel Estilos.
  • 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.

Problemas conocidos

No se puede acceder a las pestañas Puntos de interrupción del DOM y Propiedades desde el teclado.

Panel de estilos

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 aplicados al elemento que está en primer plano en el árbol del DOM.

El concepto clave que debes comprender sobre el panel Estilos 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, debes seleccionar el <footer> nodo en el árbol del DOM.

Es posible que te resulte más rápido usar el flujo de trabajo de inspección para inspeccionar un nodo que se encuentre en la vecindad general 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 hasta el nodo exacto que te interesa.

Navegar por el panel de estilos

Debido a que todas las herramientas de estilo se conectan de una forma u otra al 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 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 anuncia como "element.style {}".
  • Presiona 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. 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 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 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.

Lee la referencia del teclado del panel Estilos para obtener accesos directos adicionales.

Problemas conocidos
  • Si usas el campo de texto editable Filtrar, no podrás navegar por la lista de estilos.

Activar o desactivar el estado del elemento

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

  1. Navega hasta el panel Estilos y presiona Tab hasta que el botón Activar o desactivar el 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, tenga el enfoque.
  4. Presiona Espacio para habilitarlo. 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.

Agregar 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 Clases de elementos se usa principalmente para agregar clases existentes a un elemento. Por ejemplo, si tu hoja de estilo contiene una clase de asistencia llamada .clearfix, puedes 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. O bien, escribe el nombre de la clase y presiona Intro para aplicarla.

Agregar una nueva regla de estilo

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 cualquier nombre de clase que desees en este campo y, luego, presionar Tab para asignarle propiedades CSS.

Pestaña Calculado

Con el enfoque en la Calculado tab, presiona Tab para mover el enfoque hacia adentro y explorar su contenido. Dentro de 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

Presiona Tab hasta llegar a la colección de estilos calculados. Estos se presentan como un tree de ARIA. Si expandes un cuadro de lista, se revela qué selectores CSS aplican el estilo calculado. Estos selectores se organizan por especificidad.

Un lector de pantalla anuncia el valor calculado, qué selector CSS coincide, el nombre de 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 Estilos panel, presiona la Flecha hacia la derecha para navegar a la pestaña Objetos de escucha de eventos.

Explorar 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á adjunto el objeto de escucha de eventos, así como el nombre de 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 Accesibilidad panel, presiona Tab para mover el enfoque hacia adentro y explorar su contenido. Dentro del 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 ARIA tree 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 superiores y secundarios.

Problemas conocidos

  • Es posible que el tipo de árbol ARIA que usa el panel Accesibilidad no esté disponible en Chrome para lectores de pantalla de macOS, como VoiceOver. Suscríbete al problema de Chromium #868480 para recibir información sobre el progreso de este problema.
  • Las secciones Atributos ARIA y Propiedades calculadas se marcan como árboles ARIA, pero no incluyen la administración del enfoque. Esto significa que estas secciones 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 problemas comunes relacionados con el rendimiento, la accesibilidad, el SEO y varias otras categorías.

Cómo configurar y ejecutar una auditoría

  1. Cuando se abre el panel Auditorías por primera vez, el enfoque se coloca en el botón Ejecutar auditoría al final del formulario. De forma predeterminada, el formulario está configurado para ejecutar auditorías para 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 exploración para cambiar la configuración de la auditoría.
  3. Cuando estés 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 sonido mientras se ejecuta la auditoría y se actualiza la página varias veces.

Problemas conocidos

  • Las diferentes secciones del formulario de configuración no están marcadas con un elemento fieldset. Puede ser más fácil navegar por ellas en el modo de exploración para averiguar qué controles están asociados con cada sección.
  • No hay ningún ícono de sonido 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. Usa el modo de exploración para llegar rápidamente a los resultados.

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 puntuaciones para 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 reprobadas. De forma predeterminada, solo se muestran las auditorías reprobadas. 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 buscar el botón Realizar una auditoría.