Esta página es una referencia completa de las funciones de accesibilidad de las Herramientas para desarrolladores de Chrome. Está destinada a desarrolladores web que hagan lo siguiente:
- Tener conocimientos básicos de Herramientas para desarrolladores (por ejemplo, cómo abrirlo)
- Estar familiarizado con los principios y prácticas recomendadas de accesibilidad
El propósito de esta referencia es ayudarte a descubrir todas las herramientas disponibles en Herramientas para desarrolladores que pueden ayudarte a examinar la accesibilidad de una página.
Consulta Cómo navegar en las Herramientas para desarrolladores de Chrome con tecnología de accesibilidad si buscas ayuda para navegar por las Herramientas para desarrolladores con una tecnología de accesibilidad, como un lector de pantalla.
Si quieres aprender a desarrollar sitios web accesibles, consulta el artículo sobre accesibilidad.
Descripción general de las funciones de accesibilidad de las Herramientas para desarrolladores de Chrome
En esta sección, se explica cómo Herramientas para desarrolladores se adapta a tu kit de herramientas de accesibilidad general.
Para determinar si una página es accesible, debes tener en cuenta 2 preguntas generales:
- ¿Puedo navegar por la página con un teclado o un lector de pantalla?
- ¿Los elementos de la página están marcados correctamente para los lectores de pantalla?
En general, las Herramientas para desarrolladores pueden ayudarte a corregir errores relacionados con la pregunta 2, ya que estos errores son fáciles de detectar de manera automatizada. La pregunta n.o 1 es igual de importante, pero, lamentablemente, las Herramientas para desarrolladores no pueden ayudarte. La única forma de encontrar errores relacionados con la pregunta 1 es intentar usar una página con un teclado o un lector de pantalla por tu cuenta. Consulta Cómo realizar una revisión de accesibilidad para obtener más información.
Audita la accesibilidad de una página
En general, usa las verificaciones de accesibilidad del panel Lighthouse para determinar lo siguiente:
- Una página está marcada correctamente para los lectores de pantalla.
- Los elementos de texto de una página tienen suficientes relaciones de contraste. Consulta también Cómo hacer que tu sitio web sea más legible.
Para auditar una página, haz lo siguiente:
- Ve a la URL que deseas auditar.
En las Herramientas para desarrolladores, haz clic en la pestaña Lighthouse. Herramientas para desarrolladores te muestra varias opciones de configuración.
En Dispositivo, selecciona Dispositivo móvil si deseas simular un dispositivo móvil. Esta opción cambia de manera diferente la string del usuario-agente y cambia el tamaño del viewport. Si la versión para dispositivos móviles de la página se muestra de manera diferente a la versión para computadoras de escritorio, esta opción podría tener un efecto significativo en los resultados de la auditoría.
En la sección Lighthouse, asegúrate de que la accesibilidad esté habilitada. Inhabilita las otras categorías si deseas excluirlas de tu informe. Déjalas habilitadas si quieres descubrir otras formas de mejorar la calidad de tu página.
La sección Regulación te permite limitar la red y la CPU, lo que es útil cuando se analiza el rendimiento de la carga. Esta opción debería ser irrelevante para tu puntuación de accesibilidad, por lo que puedes usar la que prefieras.
La casilla de verificación Liberar almacenamiento te permite liberar todo el almacenamiento antes de cargar la página o conservar el almacenamiento entre las cargas de páginas. Es probable que esta opción también sea irrelevante para tu puntuación de accesibilidad, por lo que puedes usar la que prefieras.
Haz clic en Generar informe. Después de 10 a 30 segundos, Herramientas para desarrolladores proporciona un informe. En tu informe, encontrarás varias sugerencias para mejorar la accesibilidad de la página.
Haz clic en una auditoría para obtener más información al respecto.
Haz clic en Más información para ver la documentación de esa auditoría.
Consulta también: extensión aXe
Es posible que prefieras usar la extensión aXe o la extensión de Lighthouse en lugar del panel de Lighthouse, que está disponible de forma predeterminada en Chrome. En general, proporcionan la misma información, ya que aXe es el motor subyacente que alimenta el panel de Lighthouse. La extensión aXe tiene una IU diferente y describe las auditorías de forma un poco diferente.
Una de las ventajas de la extensión de aXe sobre el panel Audits es que te permite inspeccionar y destacar los nodos con errores.
El panel de accesibilidad
En el panel de accesibilidad, puedes ver el árbol de accesibilidad, los atributos de ARIA y las propiedades de accesibilidad calculadas de los nodos del DOM.
Para abrir el panel de Accesibilidad, haz lo siguiente:
- Haz clic en la pestaña Elementos.
- En el Árbol del DOM, selecciona el elemento que deseas inspeccionar.
- Haz clic en la pestaña Accesibilidad. Esta pestaña puede estar oculta detrás del botón Más pestañas
.
Cómo ver la posición de un elemento en el árbol de accesibilidad
El árbol de accesibilidad es un subconjunto del árbol del DOM. Solo contiene elementos del árbol del DOM que son relevantes y útiles para mostrar el contenido de la página en un lector de pantalla.
Examina la posición de un elemento en el árbol de accesibilidad desde el panel Accesibilidad.
Esta vista te permite explorar un solo nodo y sus principales. Para explorar todo el árbol de accesibilidad, sigue los pasos que se indican a continuación.
(Vista previa) Explora el árbol de accesibilidad de página completa
La vista de página completa del árbol de accesibilidad te permite explorar todo el árbol y te ayuda a comprender mejor cómo se expone tu contenido web a la tecnología de asistencia.
Para explorar el árbol de accesibilidad, haz lo siguiente:
- Marca
Habilitar árbol de accesibilidad de página completa. En la barra de acciones de la parte superior, haz clic en Volver a cargar Herramientas para desarrolladores.
En la esquina superior derecha del panel Elementos, activa o desactiva el botón
Cambiar a la vista de árbol de accesibilidad.
Explorar el árbol de accesibilidad Puedes expandir los nodos o hacer clic para ver los detalles en Propiedades procesadas.
Selecciona un nodo y haz clic en el botón
Switch to DOM tree view para volver a cambiar a la vista de árbol del DOM.Ahora está seleccionado el nodo DOM correspondiente. Esta es una excelente manera de comprender la asignación entre el nodo del DOM y su nodo del árbol de accesibilidad.
Cómo ver los atributos ARIA de un elemento
Los atributos ARIA garantizan que los lectores de pantalla tengan toda la información que necesitan para representar correctamente el contenido de una página.
Consulta los atributos ARIA de un elemento en el panel de accesibilidad.
Visualiza el orden fuente de los elementos en la pantalla
Los elementos de la página no siempre aparecen en el orden en que están en la fuente. Esto podría confundir a los usuarios que dependen de la tecnología de asistencia para navegar por la web.
Para ver y depurar el orden fuente en tu sitio web, sigue estos pasos:
- Inspecciona un elemento en la página.
- En Elements > Accessibility > Source Order Viewer, marca
Show source order.
En la vista del puerto, Herramientas para desarrolladores describe los elementos anidados con bordes y los marca con números que corresponden a su orden de origen.
Visualiza las propiedades de accesibilidad calculadas de un elemento
El navegador calcula de forma dinámica algunas propiedades de accesibilidad. Estas propiedades se pueden ver en la sección Propiedades computadas del panel Accesibilidad.
Consulta las propiedades de accesibilidad calculadas de un elemento en el panel de accesibilidad.
Cómo descubrir y corregir texto con contraste bajo
Las Herramientas para desarrolladores pueden encontrar automáticamente problemas de contraste bajo y sugerir mejores colores para ayudarte a corregirlos. Para obtener más información, consulta Cómo mejorar la legibilidad de tu sitio web.