El árbol de accesibilidad

Todo navegador construye una segunda representación de la página que muestra: un árbol de roles y nombres, pensado para las tecnologías de apoyo. Un lector de pantalla lo usa para decir «botón, Iniciar sesión» en lugar de describir píxeles.

No es algo que invente Diwall. Ya está ahí, en cada página que usted haya abierto, y resulta ser exactamente lo que necesita un modelo de lenguaje.

Cómo es

diwall-shot --url http://localhost:8765/demo_som_en.html --a11y --mode fast \
  --guide-version 1.3

- banner:
  - strong: Admin panel
  - navigation:
    - link "Dashboard":
      - /url: "#a"
    - link "Sites":
      - /url: "#b"
- main:
  - heading "Sign in" [level=2]
  - textbox "User name":
    - /placeholder: operator
  - textbox "Password":
    - /placeholder: ••••••••
  - combobox "Environment":
    - option "production" [selected]
    - option "staging"
  - button "Sign in"
  - button "Cancel"

Ejecutado sobre la página de prueba incluida con Diwall: 1099 ms, sin ninguna captura. --mode fast devuelve el árbol y nada más — ni PNG ni análisis de imagen.

Lo que lleva y una imagen no

Fíjese en lo que ese extracto dice abiertamente, y que ninguna captura podría decir:

Roles. button, textbox, combobox, heading [level=2]. No «un rectángulo con esquinas redondeadas» — lo que el elemento es.

Destinos. link "Dashboard" seguido de /url: "#a". Adónde lleva, antes de hacer clic.

Estados. option "production" [selected]. Qué opción está activa ahora mismo.

Estructura. Qué pertenece a la cabecera, qué al contenido principal, qué se anida dentro de qué. Una imagen lo aplana todo en un solo plano.

Una captura le muestra cómo se ve una página. El árbol le dice lo que es.

A menudo basta por sí solo

Cuatro páginas, tres peticiones, la palabra clave encontrada con su contexto — y ningún modelo de visión llamado en ningún momento.

Fue un ejercicio real: encontrar una palabra clave en un sitio público sin saber en qué página está. Solo --a11y. La palabra apareció dentro de un <strong>, y el árbol dio el contexto que la rodeaba.

El árbol se basta a sí mismo para toda una clase de trabajo:

• buscar un texto o una etiqueta
• navegar por los enlaces, ya que cada href está ahí
• comprobar que un elemento está presente
• descubrir cómo está organizada una página

Un modelo de visión solo pasa a ser necesario cuando el objetivo no tiene representación semántica accesible — una imagen clicable, una zona gráfica, un canvas. Es una categoría real, y es más pequeña de lo que se suele pensar.

Por qué esto va más allá de Diwall

Una página con un árbol de accesibilidad bien construido es legible para un lector de pantalla, para un buscador y para un agente — el mismo árbol sirve a los tres. Una página que pinta sus botones con <div> y les da aspecto de clicables es opaca para los tres a la vez.

El árbol no es una función de accesibilidad que por casualidad ayude a las máquinas. Es la estructura de la página, hecha explícita. Quien escribe la página decide si esa estructura existe.

Ver la misma página de tres formas →

En resumen

• El navegador construye este árbol para cada página, para las tecnologías de apoyo.
• Lleva roles, destinos, estados y estructura — una imagen no lleva nada de eso.
• --a11y --mode fast lo devuelve sin captura, en un segundo aproximadamente.
• Recurra a un modelo de visión solo cuando no haya nada semántico que leer.