Esta página es una referencia integral de las funciones de accesibilidad en las Herramientas para desarrolladores de Chrome. Está destinada a desarrolladores web que:
- Tengan un conocimiento básico de las Herramientas para desarrolladores, como cómo abrirlas
- Estén familiarizados con los principios y las prácticas recomendadas de accesibilidad.
El objetivo de esta referencia es ayudarte a descubrir todas las herramientas disponibles en las Herramientas para desarrolladores que pueden ayudarte a examinar la accesibilidad de una página.
Consulta Cómo navegar por 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.
Consulta Aprende sobre accesibilidad si quieres aprender a desarrollar sitios web accesibles.
Descripción general de las funciones de accesibilidad en las Herramientas para desarrolladores de Chrome
En esta sección, se explica cómo las Herramientas para desarrolladores se ajustan a tu kit de herramientas de accesibilidad general.
Cuando determinas 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 n.° 2, ya que estos errores son fáciles de detectar de forma automática. La pregunta n.° 1 es igual de importante, pero, lamentablemente, las Herramientas para desarrolladores no pueden ayudarte en ese caso. La única forma de encontrar errores relacionados con la pregunta n.° 1 es intentar usar una página con un teclado o un lector de pantalla. 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 en el panel Lighthouse para determinar lo siguiente:
- Si una página está marcada correctamente para los lectores de pantalla
- Si los elementos de texto de una página tienen proporciones de contraste suficientes (consulta también Haz que tu sitio web sea más legible)
Para auditar una página, haz lo siguiente:
- Ve a la URL que quieres auditar.
En las Herramientas para desarrolladores, haz clic en el panel Lighthouse. Las Herramientas para desarrolladores te muestran varias opciones de configuración.
En Dispositivo, selecciona Dispositivo móvil si quieres simular un dispositivo móvil. Esta opción cambia la cadena 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 Accesibilidad esté habilitado. Inhabilita las otras categorías si quieres excluirlas de tu informe. Déjalas habilitadas si quieres descubrir otras formas de mejorar la calidad de tu página.
La sección Limitación te permite limitar la red y la CPU, lo que es útil cuando se analiza el rendimiento de carga. Esta opción no debería ser relevante para tu puntuación de accesibilidad, por lo que puedes usar lo que prefieras.
La casilla de verificación Borrar almacenamiento te permite borrar todo el almacenamiento antes de cargar la página o conservar el almacenamiento entre las cargas de la página. Esta opción probablemente tampoco sea relevante para tu puntuación de accesibilidad, por lo que puedes usar lo que prefieras.
Haz clic en Generar informe. Después de 10 a 30 segundos, las Herramientas para desarrolladores proporcionan un informe. En el informe, se incluyen varias sugerencias para mejorar la accesibilidad de la página.
Haz clic en una auditoría para obtener más información sobre ella.
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 Lighthouse en lugar del panel Lighthouse que está disponible de forma predeterminada en Chrome. Por lo general, proporcionan la misma información, ya que aXe es el motor subyacente que impulsa el panel Lighthouse. La extensión aXe tiene una IU diferente y describe las auditorías de manera ligeramente diferente.
Una ventaja que tiene la extensión aXe sobre el panel Auditorías es que te permite inspeccionar y destacar los nodos con errores.
Prueba el reflujo de contenido con la barra de herramientas del dispositivo
El criterio de reflujo de las Pautas de accesibilidad al contenido web (WCAG) recomienda que el contenido web siga siendo visible sin pérdida de información, incluso cuando se cambia el tamaño del viewport o se cambia la orientación. Cuando se alinea el contenido a una sola columna, se admiten los usuarios que usan texto ampliado. Para probar cómo se refluye el contenido, cambia el tamaño del viewport de forma dinámica con la barra de herramientas del dispositivo en el panel Lighthouse.
Para cambiar el tamaño del viewport, arrastra los controladores a las dimensiones que necesites. Para conocer las dimensiones específicas que se deben probar, consulta el criterio de éxito de reflujo de WCAG.
La pestaña Accesibilidad
En la pestaña Accesibilidad, puedes ver el árbol de accesibilidad, los atributos ARIA y las propiedades de accesibilidad computadas de los nodos DOM.
Para abrir la pestaña Accesibilidad , haz lo siguiente:
- Haz clic en el panel Elementos.
- En el árbol del DOM, selecciona el elemento que quieres inspeccionar.
- Haz clic en la pestaña Accesibilidad. Es posible que esta pestaña esté oculta detrás del botón keyboard_double_arrow_right Más pestañas.
Puedes arrastrar la pestaña Accesibilidad al frente para acceder más rápido en el futuro.
Visualiza 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.
Para inspeccionar la posición de un elemento en el árbol de accesibilidad desde la pestaña Accesibilidad, activa o desactiva Mostrar árbol de accesibilidad.
Este botón de activación reemplaza el árbol del DOM en el panel Elementos por un árbol de accesibilidad de página completa. Este árbol te ayuda a comprender mejor cómo se expone tu contenido web a la tecnología de accesibilidad.
Para explorar el árbol de accesibilidad, puedes expandir y seleccionar nodos para ver sus detalles en Propiedades computadas.
En cualquier momento, puedes volver al árbol del DOM. El nodo DOM correspondiente permanece seleccionado. Esta es una excelente manera de comprender la asignación entre el nodo DOM y su nodo de árbol de accesibilidad.
Visualiza 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.
Visualiza los atributos ARIA de un elemento en la pestaña Accesibilidad.
Visualiza el orden de origen de los elementos en 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 accesibilidad para navegar por la Web.
Para ver y depurar el orden de origen en tu sitio web, haz lo siguiente:
- Inspecciona un elemento en la página.
- En Elementos > Accesibilidad > Visualizador de orden de origen, marca check_box Mostrar orden de origen.
En el viewport, las Herramientas para desarrolladores delinean los elementos anidados con bordes y los marcan con números que corresponden a su orden de origen.
Visualiza las propiedades de accesibilidad computadas de un elemento
El navegador calcula algunas propiedades de accesibilidad de forma dinámica. Estas propiedades se pueden ver en la sección Propiedades computadas de la pestaña Accesibilidad.
Visualiza las propiedades de accesibilidad computadas de un elemento en la pestaña Accesibilidad.
La pestaña Rendering
Usa la pestaña Rendering para emular ciertas funciones de medios de CSS sin especificarlas de forma manual en tu código o entorno de prueba. Estas funciones de medios cambian la apariencia de tu página web según las preferencias del dispositivo del usuario. Para probar la accesibilidad visual de tu página, abre la pestaña Rendering y explora las siguientes opciones:
- Emula deficiencias visuales para ver tu página a través de varias deficiencias visuales simuladas diferentes.
- Emula la función de medios de CSS
prefers-color-schemepara ver cómo se ve tu página con el modo oscuro o claro habilitado. Muchos consideran el modo oscuro como una opción estética, pero el modo oscuro como una herramienta de accesibilidad demuestra su utilidad de otra manera. - Emula el tipo de medios de CSS para ver tu página en un estilo de medios de impresión o de pantalla.
- Emula la función de medios de CSS
forced-colorspara ver cómo se ve tu página si el usuario-agente habilitó un modo de colores forzados. - Emula la función de medios de CSS
prefers-contrastpara ver tu contenido web con un valor de contraste más alto, más bajo o específico. - Emula la función de medios de CSS
prefers-reduced-motionpara ver tu contenido web con movimiento reducido. Algunos usuarios experimentan distracción o náuseas por el contenido animado. Usa esta opción para ver cómo se ve tu página sin animaciones ni elementos como el desplazamiento suave. - Emula la función de medios de CSS
prefers-reduced-transparencypara ver cómo aparece tu contenido web si el usuario solicita reducir los efectos de capa transparente o translúcida que se usan en el dispositivo.
Descubre y corrige texto con contraste bajo
Las Herramientas para desarrolladores pueden encontrar automáticamente problemas de contraste bajo y sugerir mejores colores para ayudarte a corregirlos. Consulta Haz que tu sitio web sea más legible para obtener más información.