# AX-SYS-32: Haz que cada control sea legible en el árbol de accesibilidad

> Context and comprehension · foundational · AX-SYS-32

Los agentes de navegador leen tu página a través de su árbol de accesibilidad, así que da a cada elemento interactivo un nombre y un rol reales, no ocultes nunca un control que funciona de ese árbol y mantén estable el diseño mientras se usa la página.

## Por qué

Un agente que maneja un sitio web en nombre de un usuario no ve la página como la ve una persona. Las herramientas de navegador para agentes trabajan sobre una vista estructurada de la página, el árbol de accesibilidad: los mismos roles, nombres y estados que usan los lectores de pantalla. Lighthouse de Chrome tiene ahora una auditoría de navegación agéntica que lo dice directamente: los agentes dependen del árbol de accesibilidad como su modelo de datos principal. Las comprobaciones que ejecuta son las que deciden si un agente puede actuar. Cada elemento interactivo necesita un nombre programático, los roles y las relaciones padre-hijo deben ser válidos, y el contenido no debe ocultarse del árbol mientras sigue siendo interactivo. Un `<div>` con un manejador de clic y sin rol, o un botón de icono sin etiqueta, es invisible o anónimo para el agente. El servidor Playwright MCP de Microsoft, una herramienta de navegador para agentes, funciona igual: actúa a través del árbol de accesibilidad en lugar de con entrada por píxeles, y describe su captura de accesibilidad como mejor que una captura de pantalla. El diseño también importa. Lighthouse incluye el Cumulative Layout Shift porque los agentes dependen de la posición de los elementos, así que un botón que se mueve entre la lectura de la página y el clic se convierte en un clic fallido. El trabajo es accesibilidad de siempre, y sirve a la vez a las personas que usan tecnologías de apoyo y a los agentes.

## Haz

Usa controles nativos o roles ARIA correctos, da a cada control una etiqueta visible o programática y reserva espacio para que el diseño no se desplace.

## No hagas

Construir `div` clicables sin rol, botones de icono sin etiqueta ni controles ocultos con `aria-hidden` que siguen respondiendo a clics.

## Artefacto

```html
<!-- Anónimo para un agente: sin rol ni nombre -->
<div class="btn" onclick="checkout()"><svg>...</svg></div>

<!-- Legible: control nativo, nombre accesible, campo con etiqueta -->
<label for="email">Email</label>
<input id="email" name="email" type="email">
<button type="submit">Place order</button>
<button type="button" aria-label="Remove item from cart"><svg aria-hidden="true">...</svg></button>
```

Compruébalo con la auditoría de navegación agéntica de Lighthouse o leyendo el árbol de accesibilidad de la página en Chrome DevTools.

## Fuentes

1. [Chrome for Developers: Lighthouse agentic browsing](https://developer.chrome.com/docs/lighthouse/agentic-browsing): Agents rely on the accessibility tree as their primary data model. Lighthouse checks that every interactive element has a programmatic name, that roles and parent-child relationships are valid, and that content is not hidden from the accessibility tree while being interactive; Cumulative Layout Shift measures visual stability, which is critical for agents relying on element positioning
2. [Microsoft: Playwright MCP](https://github.com/microsoft/playwright-mcp): Uses Playwright's accessibility tree, not pixel-based input; its browser_snapshot tool captures an accessibility snapshot of the current page, described as better than a screenshot

---
Source: Agent Experience Principles (axprinciples.com)