Referencia de accesibilidad

Esta página es una referencia completa de las características de accesibilidad en Chrome DevTools.It está destinado a desarrolladores web que:

• Tener un conocimiento básico de DevTools, como cómo abrirlo.
• Están familiarizados con los principios de accesibilidad y las mejores prácticas.

El propósito de esta referencia es ayudarlo a descubrir todas las herramientas disponibles en DevTools que pueden ayudarlo a examinar la accesibilidad de una página.

Consulte Navegación por Herramientas de desarrollo de Chrome con Tecnología de asistencia Si está buscando ayuda para navegar por herramientas de desarrollo con una tecnología de asistencia como un lector de pantalla.

Descripción general de las funciones de accesibilidad de Chrome DevTools

En esta sección se explica cómo se adapta DevTools a tu kit de herramientas de accesibilidad general.

Al determinar si una página es accesible, debe tener en mente 2 preguntas generales:

1. ¿Puedo navegar por la página con un teclado o un lector de pantalla?
2. ¿Los elementos de la página están correctamente marcados para los lectores de pantalla?

En general, DevTools puede ayudarlo a corregir errores relacionados con la pregunta #2, porque estos errores son fáciles de detectar de forma automatizada. La pregunta # 1 es igual de importante, pero desafortunadamente los servicios de desarrollo no pueden ayudarlo en eso. La única manera de encontrar errores relacionados con la pregunta #1 es intentar usar una página con un teclado o lector de pantalla usted mismo. Consulta Cómo Hacer Una Revisión De Accesibilidad Para obtener más información.

Auditar la accesibilidad de una página

En general, utilice el panel Auditorías para determinar si:

• Una página está correctamente marcada para los lectores de pantalla.
• Los elementos de texto de una página tienen ratios de contraste suficientes. Consulte también La relación de contraste de un elemento de texto en el Selector de color.

Para auditar una página:

1. Vaya a la URL que desea auditar.

2. En DevTools, haga clic en la pestaña Auditorías. DevTools le muestra varias opciones de configuración.

   

3. En Dispositivo, seleccione Móvil si desea simular un dispositivo móvil. Esta opción cambia de forma diferente la cadena de agente de usuario y cambia el tamaño de la ventana. Si la versión móvil de la página se muestra de forma diferente a la versión de escritorio, esta opción podría tener un efecto significativo en los resultados de la auditoría.

4. En la sección Auditorías, asegúrese de que la accesibilidad esté habilitada. Deshabilite las otras categorías si desea excluirlas de su informe. Déjalos activados si quieres descubrir otras formas de mejorar la calidad de tu página.

5. La sección de aceleración le permite acelerar 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 lo que prefieras.

6. La casilla Borrar almacenamiento le permite borrar todo el almacenamiento antes de cargar la página o conservar el almacenamiento entre cargas de página. Esta opción también es probablemente irrelevante para tu puntuación de accesibilidad, por lo que puedes usar lo que prefieras.

7. Haga clic en Ejecutar auditorías. Después de 10 a 30 segundos, DevTools proporciona un informe.Tu informe te da varios consejos sobre cómo mejorar la accesibilidad de la página.

   

8. Haz clic en una auditoría para obtener más información al respecto.

   

9. Haga clic en Más información para ver la documentación de la auditoría.

   

Véase también: Extensión aXe

Es posible que prefiera utilizar la extensión aXe en lugar del panel de auditorías.Por lo general, proporcionan la misma información, ya que aXe es el motor subyacente que alimenta el panel de auditorías. La extensión aXe tiene una interfaz de usuario diferente y describe las auditorías de forma ligeramente diferente.Una de las ventajas que tiene la extensión aXe sobre el panel de auditorías es que le permite inspeccionar y iluminar nodos que fallan.

El panel de accesibilidad

El panel de accesibilidad es donde puede ver el árbol de accesibilidad, los atributos ARIA y las propiedades de accesibilidad calculadas de los nodos DOM.

Para abrir el panel de accesibilidad:

1. Haga clic en la pestaña Elementos.
2. En el Árbol DOM, seleccione el elemento que desea inspeccionar.
3. Haga clic en la pestaña Accesibilidad. Esta pestaña puede estar oculta detrás del botón Más pestañas.

Ver la posición de un elemento en el árbol de accesibilidad

El árbol de accesibilidad es un subconjunto del árbol DOM. Solo contiene elementos del árbol DOM que son relevantes y útiles para mostrar el contenido de la página en un lector de pantalla.

Inspeccionar la posición de un elemento en el árbol de accesibilidad desde el panel Accesibilidad.

Ver los atributos ARIA de un elemento

Los atributos ARIA aseguran que los lectores de pantalla tengan toda la información que necesitan para representar correctamente el contenido de una página.

Ver los atributos ARIA de un elemento en el panel Accesibilidad.

Ver las propiedades de accesibilidad calculadas de un elemento

El navegador calcula dinámicamente Algunas propiedades de accesibilidad. Estas propiedades se pueden ver en la sección Propiedades calculadas del panel Accesibilidad.

Ver las propiedades de accesibilidad calculadas de un elemento en el panel Accesibilidad.

Ver la relación de contraste de un elemento de texto en el selector de color

Algunas personas con visión reducida no ven las áreas como muy brillantes u muy oscuras. Todo tiende a aparecer con aproximadamente el mismo brillo, lo que hace que sea difícil distinguir contornos y bordes.La relación de contraste mide la diferencia de brillo entre el primer plano y el fondo del texto. Si su texto tiene una relación de contraste baja, entonces estos usuarios con baja visión pueden experimentar literalmente su sitio como una pantalla en blanco.

El selector de color puede ayudarte a asegurarte de que el texto cumple con los niveles de contraste recomendados:

1. Haga clic en la pestaña Elementos.

2. En el Árbol DOM, seleccione el elemento de texto que desea inspeccionar.

   

3. En el panel Estilos, haga clic en el cuadrado de color junto al valor color del elemento.

   

4. Compruebe la sección Relación de contraste del Selector de color. Una marca de verificación significa que el elemento cumple con la recomendación mínima.Dos marcas de verificación significan que cumple con la recomendación mejorada.

   

5. Haga clic en la sección Relación de contraste para ver más información. Aparece una línea en el visualpicker en la parte superior del Selector de color. Si el color actual cumple con las recomendaciones, entonces cualquier cosa del mismo lado de la línea también cumple con las recomendaciones. Si el color actual no cumple con las recomendaciones, entonces cualquier cosa en el mismo lado tampoco cumple con las recomendaciones.

   

Comentarios