Usar la herramienta Inspeccionar para detectar problemas de accesibilidad al pasar sobre la página web

  • Artículo
  • Tiempo de lectura: 5 minutos

La herramienta Inspeccionar muestra información sobre los elementos individuales al pasar el puntero sobre la página web que se representa, incluida la información de accesibilidad. En cambio, la herramienta Problemas notifica automáticamente los problemas de toda la página web.

El botón de la herramienta Inspeccionar ( Inspeccionar ) está en la esquina superior izquierda de DevTools. Al seleccionar el botón Inspeccionar herramienta, el botón se vuelve azul, lo que indica que la herramienta Inspeccionar está activa.

Cuando la herramienta Inspeccionar está activa, al mantener el mouse sobre cualquier elemento de la página web representada, se muestra la superposición Inspeccionar. Esta superposición muestra información general e información de accesibilidad sobre ese elemento. La sección Accesibilidad de la superposición Inspeccionar muestra información sobre el contraste de color de texto, el texto del lector de pantalla y la compatibilidad con el teclado.

La herramienta Inspeccionar, que muestra el área del elemento como una superposición multicolor y muestra los detalles del elemento como una superposición de información grande

Comprobar los elementos individuales para el contraste de texto, el texto del lector de pantalla y la compatibilidad con el teclado

  1. Abra la página web de demostración de pruebas de accesibilidad en una nueva pestaña del explorador y, a continuación, seleccione F12 para abrir DevTools.

  2. Seleccione el botón Inspeccionar ( Inspeccionar ) en la esquina superior izquierda de DevTools para que el icono esté resaltado (azul).

    Para activar la herramienta Inspeccionar, seleccione el botón Inspeccionar

  3. Mantenga el mouse sobre cualquier elemento de la página web de demostración que se represente. La herramienta Inspeccionar muestra una superposición de información debajo del elemento dentro de la página web representada.

    La herramienta Inspeccionar, que muestra el diseño del elemento como una superposición multicolor y muestra los detalles del elemento como una superposición de información grande

La parte inferior de la superposición Inspeccionar tiene una sección Accesibilidad que contiene la siguiente información:

  • El contraste define si un elemento puede ser comprendido por personas con visión baja. La relación de contraste definida por las Directrices de WCAG indica si hay suficiente contraste (un icono de marca de verificación verde) o no suficiente (icono de signo de exclamación naranja).

  • Name y Role son los elementos que la tecnología de asistencia, como los lectores de pantalla, informarán sobre el elemento.

    • Name es el contenido de texto de un a elemento. Para el elemento <a href="/">About Us</a> , el nombre que se muestra en la herramienta Inspeccionar es "Acerca de nosotros".
    • Role **** del elemento. Este suele ser el nombre del elemento, como article , img , o link heading . Los div elementos y se span generic denominan .

  • El enfoque de teclado indica si los usuarios pueden llegar al elemento independientemente del dispositivo de entrada.

    • Un icono de marca de verificación verde indica que el elemento se puede centrar en el teclado.
    • Un círculo gris con línea diagonal indica que el elemento no se puede centrar en el teclado.

Información adicional en la superposición Inspeccionar

La parte superior de la superposición Inspeccionar, que está encima de la sección Accesibilidad, enumera los siguientes detalles del elemento.

  • Tipo de diseño. Si el elemento se coloca mediante un flexbox o una cuadrícula, un icono (Icono de diseño de cuadrícula) se muestra.
  • Nombre del elemento, como h1 , h2 o div .
  • Dimensiones del elemento en píxeles.
  • El color como una muestra de color (o un cuadrado pequeño y coloreado) y como una cadena (como #336699 ).
  • Información de fuentes, como el tamaño y las familias de fuentes.
  • Margen y relleno en píxeles.

Identificar regiones anidadas mediante resaltado de color

Además de la superposición de información, la herramienta Inspeccionar también proporciona un color de región similar al mantener el mouse en el árbol DOM de la herramienta Elementos.

  1. Abra la página web de demostración de pruebas de accesibilidad en una nueva pestaña del explorador y, a continuación, seleccione F12 para abrir DevTools.

  2. Seleccione el botón Inspeccionar ( Icono de la herramienta Inspeccionar ) en la esquina superior izquierda de DevTools, de modo que el botón esté resaltado (azul).

  3. Mantenga el mouse sobre diferentes partes de la página web de demostración representado. Cada elemento de la página web ahora se muestra con una superposición multicolor. Esta superposición multicolor puede mostrar regiones anidadas dentro de un elemento. Por ejemplo, mantenga el mouse sobre el margen izquierdo de Gatos. La herramienta Inspeccionar resalta varias partes **** rectangulares de la sección Gatos con diferentes colores, que muestran el diseño que resulta de las definiciones de flexbox CSS en la página web.

Superposición de flexbox multicolor y superposición de información al usar la herramienta Inspeccionar

Para configurar la superposición de cuadrícula o la superposición de flexbox, en la herramienta Elementos, seleccione la pestaña Diseño. Para obtener más información, vaya a Inspeccionar cuadrícula CSS.

Usar la herramienta Inspeccionar para pasar el puntero sobre la página web para resaltar el DOM y CSS

  1. Abra la página web de demostración de pruebas de accesibilidad en una nueva pestaña del explorador y, a continuación, seleccione F12 para abrir DevTools.

  2. Seleccione el botón Inspeccionar ( la herramienta Inspeccionar ) en la esquina superior izquierda de DevTools, de modo que el botón esté resaltado (azul).

  3. Seleccione la herramienta Elementos.

  4. Con la herramienta Inspeccionar activa, mantenga el puntero sobre distintas partes de la página web que se representa. En la herramienta Elementos, el árbol DOM HTML se expande automáticamente para mostrar información sobre el elemento sobre el que se mueve el mouse. Si se mantiene el mouse, el panel Estilos no se actualiza.

  5. Ahora seleccione cualquier elemento dentro de la página web que se represente. La herramienta Elementos se abre automáticamente y muestra el CÓDIGO HTML del elemento en el árbol DOM. La herramienta también muestra el CSS aplicado en el elemento del panel Estilos. Al seleccionar un elemento en la página web que se representa, se desactiva la herramienta Inspeccionar.

Los detalles sobre el elemento seleccionado se muestran en la herramienta Elementos

Después de seleccionar un elemento en la página representada, puede **** usar la pestaña **** Accesibilidad (cerca de la pestaña Estilos) para ver el árbol de accesibilidad y usar el Visor de pedidos de origen. ****

Vea también