Árbol de accesibilidad
También: a11y tree, accessibility object model, AOM
Estructura de datos interna que los navegadores y sistemas operativos construyen a partir del DOM, asignando a cada elemento un rol, nombre, estado y relaciones — los datos que los lectores de pantalla y otras tecnologías de asistencia recorren realmente.
El árbol de accesibilidad es la estructura de datos a nivel del sistema operativo que los lectores de pantalla y otras tecnologías de asistencia consumen realmente. Cuando se abre una página en un navegador, este construye dos árboles: el árbol del DOM (la jerarquía HTML habitual) y el árbol de accesibilidad, una estructura paralela derivada del DOM que contiene metadatos de accesibilidad.
Comprender el árbol de accesibilidad explica aproximadamente el 80 % del comportamiento de ARIA, los lectores de pantalla y las sesiones de depuración del tipo «¿por qué no anuncia esto?» que de otro modo resultarían confusas.
Qué contiene
Cada nodo del árbol de accesibilidad tiene:
- Rol — lo que el elemento es: botón, enlace, encabezado, navegación, diálogo. Proviene del tipo de elemento HTML o de un
role="..."explícito de ARIA. - Nombre — cómo se llama el elemento. Proviene del texto de la etiqueta, el atributo
alt,aria-label,aria-labelledbyo el contenido de texto calculado. - Descripción — contexto adicional. Proviene de
aria-describedbyo del atributotitle. - Estado — estado actual: presionado, expandido, marcado, ocupado. Proviene de atributos HTML (
disabled,required) o de ARIA (aria-pressed,aria-expanded). - Propiedades — relaciones y metadatos:
aria-controls,aria-owns,aria-haspopup.
Los lectores de pantalla recorren este árbol y anuncian cada nodo en función de estos campos. La navegación con Tab y con las teclas de dirección se realiza a través del árbol, no del DOM.
Por qué el contenido puramente visual desaparece
Un <div onclick="..."> con estilo de botón no tiene rol en el árbol de accesibilidad — el navegador lo interpreta como un <div> genérico y lo registra como role="generic" (efectivamente invisible para las tecnologías de asistencia). El manejador onclick no se traslada al árbol de accesibilidad porque este solo refleja lo que el navegador deduce que es el elemento a partir de su rol HTML.
Por eso el HTML semántico importa en el nivel más fundamental: no por estilo o convención, sino porque los elementos HTML semánticos rellenan el árbol de accesibilidad con los roles correctos de forma automática. El marcado no semántico crea un árbol de div genéricos que los lectores de pantalla no pueden interpretar.
El papel de ARIA en el árbol
ARIA existe específicamente para rellenar el árbol de accesibilidad en los casos en que el HTML nativo no dispone de un elemento equivalente. role="combobox" indica al navegador que inserte un nodo combobox en el árbol para un elemento que de otro modo aparecería como genérico. aria-expanded="true" establece una propiedad de estado en ese nodo.
ARIA NO modifica el DOM. Modifica lo que el navegador escribe en el árbol de accesibilidad.
Cómo inspeccionarlo
Las herramientas de desarrollo de los navegadores exponen ahora el árbol de accesibilidad directamente:
- DevTools de Chrome / Edge — panel Elements → pestaña Accessibility (columna derecha) muestra las propiedades de accesibilidad calculadas para el nodo seleccionado. El selector «Árbol de accesibilidad de página completa» (marca de Chrome en algunas versiones) muestra el árbol en una barra lateral.
- DevTools de Firefox — panel Accessibility (icono en la barra de herramientas) muestra una vista dedicada del árbol de accesibilidad, similar a la vista Elements pero representada en términos de árbol de accesibilidad.
- Web Inspector de Safari — la pestaña Audit / Accessibility ofrece una inspección comparable.
Cuando se puede ver el árbol de accesibilidad, es posible responder empíricamente a la pregunta «¿por qué no anuncia esto?». Casi siempre la respuesta es: el nodo en el árbol de accesibilidad tiene un rol diferente al esperado, su nombre está vacío o su estado es incorrecto.
Por qué «árbol de accesibilidad» es un modelo mental mejor que «ARIA»
Los desarrolladores que aprenden ARIA sin entender el árbol de accesibilidad acaban añadiendo atributos ARIA con la esperanza de que los lectores de pantalla los detecten. Quienes comprenden el árbol de accesibilidad saben que el trabajo de ARIA consiste en escribir campos específicos en nodos específicos del árbol, y que inspeccionar el árbol directamente es más rápido que hacer suposiciones.