Referencia de accesibilidad

Esta página es una referencia completa de las características de accesibilidad en Microsoft Edge DevTools. Está pensado para desarrolladores web que:

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

Si está buscando ayuda para navegar por DevTools con una tecnología de asistencia como un lector de pantalla, vaya a Navegación por Microsoft Edge DevTools contecnología de asistencia .

Información general sobre las características de accesibilidad en Microsoft Edge DevTools

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

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

  1. ¿Puede 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 debe ayudarle a corregir errores relacionados con la pregunta #2, ya que estos errores son fáciles de detectar de forma automatizada. La #1 preguntas es igual de importante, pero desafortunadamente DevTools no le ayuda allí. 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.

Auditar la accesibilidad de una página

Nota

La herramienta Auditorías proporciona vínculos al contenido hospedado en sitios web de terceros. Microsoft no es responsable y no tiene control sobre el contenido de estos sitios ni sobre los datos que se puedan recopilar.

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

Para auditar una página:

  1. Vaya a la dirección URL que desea auditar.

  2. En DevTools, elija la herramienta Auditorías. DevTools muestra varias opciones de configuración.

    Configurar auditorías

    Nota

    Las capturas de pantalla de esta sección se tomaron con la versión 79 de Microsoft Edge. Puede comprobar la versión que está ejecutando en edge://version . La interfaz de usuario de la herramienta Auditorías tiene un aspecto diferente en versiones anteriores de Microsoft Edge, pero el flujo de trabajo general es el mismo.

  3. Para Dispositivo, elija Móvil si desea simular un dispositivo móvil. Esta opción cambia la cadena del agente de usuario y cambia el tamaño de la ventanilla. Si la versión móvil de la página se muestra de forma diferente a la versión de escritorio, esta opción puede 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 del informe. Déjelos habilitados si desea descubrir otras formas de mejorar la calidad de la página.

  5. La sección Limitación permite limitar la red y la CPU, lo que resulta útil al analizar el rendimiento de la carga. Esta opción debe ser irrelevante para la puntuación de accesibilidad, por lo que puedes usar lo que prefieras.

  6. La casilla Borrar almacenamiento 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 la puntuación de accesibilidad, por lo que puede usar lo que prefiera.

  7. Elija Ejecutar auditorías. Después de 10 a 30 segundos, DevTools proporciona un informe. El informe le ofrece varias sugerencias sobre cómo mejorar la accesibilidad de la página.

    Un informe

  8. Elija una auditoría para obtener más información sobre ella.

    Más información sobre una auditoría

  9. Elija Obtener más información para ver la documentación de esa auditoría.

    Ver la documentación de una auditoría

Vea también: extensión aXe

Es posible que prefiera usar la extensión aXe en lugar de la herramienta Auditorías.
La extensión aXe generalmente proporciona la misma información, ya que es el motor subyacente el que impulsa el panel Auditorías. La extensión aXe tiene una interfaz de usuario diferente y describe las auditorías de forma ligeramente diferente.
Una ventaja que la extensión aXe tiene sobre la herramienta Auditorías es que le permite inspeccionar y resaltar nodos con errores.

La extensión aXe

Panel accesibilidad

El panel Accesibilidad es donde se ve el árbol de accesibilidad, los atributos ARIA y las propiedades de accesibilidad calculada de los nodos DOM.

Para abrir el panel Accesibilidad:

  1. Elija la herramienta Elementos.
  2. En el árbol DOM, seleccione el elemento que desea inspeccionar.
  3. Elija el panel Accesibilidad. Este panel puede estar oculto detrás del botón Más pestañas (  Más pestañas ).

Inspeccionar el elemento h1 de la página principal de DevTools en el panel Accesibilidad

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 una página en un lector de pantalla.

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

Sección Árbol de accesibilidad

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.

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

Sección Atributos de ARIA

Ver las propiedades de accesibilidad calculadas de un elemento

Nota

Si está buscando propiedades CSS calculadas, vaya al panel Calculado.

El explorador calcula dinámicamente algunas propiedades de accesibilidad. Estas propiedades se muestran en la sección Propiedades calculadas del panel Accesibilidad.

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

Sección Propiedades calculadas del panel Accesibilidad

Ver la relación de contraste de un elemento de texto en el Selector de colores

Algunas personas con visión baja no ven áreas como muy brillantes o 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 el texto tiene una relación de contraste baja, estos usuarios de visión baja pueden experimentar literalmente el sitio como una pantalla en blanco.

El Selector de colores te ayuda a comprobar que el texto cumple los niveles de relación de contraste recomendados:

  1. Elija la herramienta Elementos.

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

    Inspeccionar un párrafo en el árbol DOM

  3. En el panel Estilos, elija el cuadrado de color junto al color valor del elemento.

    La propiedad color del elemento

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

    La sección Relación de contraste del Selector de colores muestra 2 marcas de verificación y un valor de 13,97

  5. Para obtener más información, elija la sección Relación de contraste. Aparece una línea en el selector visual en la parte superior del Selector de colores. Si el color actual cumple las recomendaciones, cualquier cosa del mismo lado de la línea también cumple las recomendaciones. Si el color actual no cumple las recomendaciones, cualquier cosa del mismo lado tampoco cumple las recomendaciones.

    Línea de relación de contraste en el selector visual

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.