Comprobar el Árbol de accesibilidad con el soporte del teclado y el lector de pantalla

  • Artículo
  • Tiempo de lectura: 2 minutos

Varias características de DevTools comprueban la compatibilidad con el teclado y el lector de pantalla. El uso de la herramienta Inspeccionar para comprobar la accesibilidad de cada elemento de página individualmente puede llevar bastante tiempo. Una forma alternativa de comprobar una página web es usar el árbol de accesibilidad. El Árbol de accesibilidad indica qué información proporciona la página a la tecnología de asistencia, como los lectores de pantalla.

El árbol de accesibilidad es un subconjunto del árbol DOM, que contiene elementos del árbol DOM que son relevantes y útiles para mostrar el contenido de una página en un lector de pantalla. El árbol de accesibilidad está en la pestaña Accesibilidad de la herramienta Elementos (cerca de la pestaña Estilos).

Para explorar el uso del árbol de accesibilidad con la página de demostración:

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

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

  3. En la página web que se representa, en la sección Donación, mantenga el mouse sobre el botón 100. Aparece la superposición de la herramienta Inspeccionar.

  4. En la página web representada, seleccione el botón 100. En DevTools, se muestra la herramienta Elementos. El árbol DOM muestra el div elemento del botón 100. El panel Estilos muestra la configuración CSS del elemento.

  5. A la derecha de la pestaña Estilos, seleccione la pestaña Accesibilidad. Se muestra el árbol de accesibilidad del elemento y se expande.

Botón formulario de donación en la herramienta Árbol de accesibilidad

Cualquier elemento del árbol que no tenga un nombre o tenga un rol de (como el elemento) es un problema, ya que ese elemento no estará disponible para los usuarios de teclado ni para los usuarios que usan tecnología de generic div asistencia.

Vea también