Cómo un modelo ve una página

Un modelo de lenguaje no ve una página web. Recibe una descripción de ella, y la forma de esa descripción decide lo que puede hacer y lo que no.

La página de abajo es la portada de este sitio. Nada se preparó para la demostración: las tres vistas provienen de un solo comando, ejecutado sobre una página que usted mismo puede abrir ahora mismo.

Uno — tal como usted la ve

Dos — tal como se numera

Los números vuelven en el JSON, junto a la imagen:

{"elements_som": [
  {"id": 1, "tag": "A", "texte": "Diwall"},
  {"id": 2, "tag": "SUMMARY", "texte": "Español"},
  {"id": 7, "tag": "A", "texte": "Percepción"}
]}

Pulsar Percepción es entonces {"type": "cliquer_som", "id": 7}. Ningún selector, ninguna descripción, ninguna ambigüedad sobre qué elemento se pretendía. Ahí está todo el mecanismo.

Tres — tal como se lee

La misma página otra vez, en texto — el árbol de accesibilidad que el propio navegador construye, el que usa un lector de pantalla:

- link "Ir al contenido":
  - /url: "#contenu"
- banner:
  - heading "Diwall" [level=1]:
    - link "Diwall":
      - /url: /es/
  - group: Español
  - button "Cambiar entre tema claro y tema oscuro"
  - group: Descargar 1.24.4 ▾
- navigation "Diwall":
  - link "Guías":
    - /url: /es/guias/
  - link "Recetas":
    - /url: /es/recetas/
  - link "Percepción":
    - /url: /es/percepcion/
  - link "Casos de uso":
    - /url: /es/casos-de-uso/
  - link "Arquitectura":
    - /url: /es/arquitectura/
  - link "Diario":
    - /url: /es/diario/
  - link "Agentes":
    - /url: /es/agents/
  - link "El proyecto":
    - /url: /es/proyecto/
- main:
  - paragraph: Usted le describe la pantalla a su modelo. Él…

Esta vista cuesta casi nada en tokens y lleva la estructura que una imagen no puede llevar: qué es un título, qué es una navegación, adónde va cada enlace. Es también la vista que revela lo que una imagen oculta.

Aquello en lo que las tres vistas no coinciden

Mire el menú de idiomas. En la captura es un botón. En la vista numerada es el elemento 2. En la vista de texto es group: Español — y los cuatro idiomas que contiene están ausentes de las tres.

Sin embargo están en el HTML. Simplemente están cerrados: el menú es un elemento <details> nativo, y un navegador no representa lo que no está abierto. Una persona pulsa y los ve. Un agente también debe pulsar primero, y mirar de nuevo después.

No es un defecto que ocultar, es la respuesta honesta a la pregunta que plantea esta página. Lo que un modelo percibe es lo representado, no lo que existe en el archivo. Quien escribe la página decide cuál de los dos recibe un agente.

La primera versión de esta página lo demostró por las malas. El menú estaba cerrado pero seguía siendo medible: Diwall numeró por tanto cuatro elementos sin texto alguno — {"id": 10, "texte": ""}, cuatro veces. Inservibles para un agente, invisibles para un humano, y detectados solo porque apuntamos la herramienta a nuestra propia página. Una línea de CSS lo corrigió, y la captura de arriba es la de después.

Repítalo

diwall-shot --url https://diwall.davalan.fr/es/ --som --a11y --guide-version 1.3

Un solo comando devuelve las tres: la captura, la capa numerada y el árbol de accesibilidad. Las imágenes de esta página son su salida, sin retoques — la captura corriente está recortada al mismo encuadre que la numerada, que toma la ventana visible y no la página entera.