Lectura del árbol de accesibilidad para depurar ARIA

El navegador crea un árbol de accesibilidad a partir del DOM. Es la versión simplificada que realmente leen los lectores de pantalla.

Observar el árbol muestra la verdad: el nombre, el rol y el estado reales de un elemento, no lo que esperaba que produjera su marcado.

En Chrome, abra DevTools y seleccione el panel Accessibility en el panel Elements. Seleccione cualquier nodo para inspeccionar sus datos de accesibilidad calculados.

El panel muestra el rol y el nombre calculados del elemento, además de sus estados. Es exactamente lo que anunciará la tecnología de asistencia.

Firefox incluye un inspector de accesibilidad en una pestaña propia de DevTools, con una comprobación útil de problemas habituales de contraste y nombres.

El error más habitual que revela el árbol es un control con un nombre vacío. Un botón con icono no muestra ningún nombre, por lo que los usuarios solo oyen «botón».

Si esperaba un botón, pero el árbol indica generic, el rol nunca se aplicó. Corrija el marcado antes de añadir más ARIA.

Active y desactive su widget mientras observa el árbol. Si aria-expanded no cambia en el panel, su JavaScript no está sincronizando el estado.

Un elemento configurado con aria-hidden desaparece por completo del árbol. Úselo para confirmar que el contenido decorativo se omite correctamente.

El árbol muestra la intención, pero un lector de pantalla muestra la experiencia. Use el árbol para depurar y después confirme el resultado con NVDA o VoiceOver.

Adquiera este hábito: cambie el marcado, vuelva a seleccionar el nodo y lea su nombre, rol y estado. Los ciclos breves detectan rápidamente los errores de ARIA.

Ha aprendido que el árbol de accesibilidad es lo que realmente lee la tecnología de asistencia. Inspecciónelo en DevTools para verificar nombres, roles y estados, y después confirme el resultado con un lector de pantalla real. 🔍