Créer des sites Web adaptés aux agents

Kasper Kulikowski

Omkar More

Votre site Web a un nouveau type de visiteur. Certains utilisateurs humains passent de la navigation manuelle à la délégation de parcours axés sur des objectifs à des agents d'IA. Ces systèmes autonomes peuvent interpréter des entrées, planifier et exécuter des actions au nom d'un utilisateur.

Toutefois, de nombreux sites Web sont conçus pour être esthétiques pour les humains, avec des états de survol complexes, des mises en page changeantes et des mouvements fluides. Cela ne fonctionne pas pour les agents.

Comment les agents voient votre site

Les agents ne consultent pas votre site Web sur un moniteur. Ils fonctionnent sur une représentation de votre site lisible par machine. La qualité de cette représentation détermine leurs performances.

Les agents peuvent consulter votre site Web de trois manières principales : captures d'écran, code HTML brut et l'arborescence d'accessibilité.

Captures d'écran

L'agent prend un instantané de la page affichée et utilise un modèle de vision pour identifier les éléments. En fonction de la capture d'écran, l'agent peut reconnaître qu'une barre de recherche en haut à droite est une recherche globale, tandis qu'une zone au milieu est probablement un champ de formulaire. Les repères visuels peuvent être utiles, car les agents peuvent utiliser la couleur, la taille et la proximité pour déterminer l'importance. Un grand bouton Supprimer sera probablement interprété avec plus de prudence qu'un petit lien "Aide". Toutefois, l'analyse des captures d'écran peut être lente et coûteuse (en termes de jetons utilisés), ce qui en fait une meilleure solution de secours lorsque la structure est confuse.

HTML

L'agent analyse le DOM et lit le code HTML. Il comprend comment les éléments sont imbriqués, la hiérarchie logique de l'arborescence DOM, les attributs tels que les ID et les classes qui définissent la structure, ainsi que les chaînes de données brutes qui forment la structure informationnelle du site. Cela aide l'agent à comprendre la relation entre les éléments. Si un bouton "Acheter maintenant" se trouve dans un conteneur de produit, l'agent suppose que ce bouton appartient à ce produit spécifique.

Arborescence d'accessibilité

L'arborescence d'accessibilité est une API native du navigateur qui extrait du DOM ce qui est le plus important : les rôles, les noms et les états des éléments interactifs. Il s'agit du résumé sémantique de la page, utilisé par les technologies d'assistance. Pour un agent d'IA, il fonctionne comme une carte haute fidélité qui ignore le "bruit" visuel du CSS pour se concentrer sur l'utilité pure. En interprétant cette arborescence, un agent peut apprendre l'intention fonctionnelle de chaque bouton, curseur et champ de saisie.

Modalités combinées

S'appuyer sur une seule entrée crée un écart sémantique. Par exemple, dans le DOM, un agent peut voir un <div> sans savoir que vous l'avez configuré comme un bouton fonctionnel avec CSS et JavaScript. Avec les captures d'écran, il est possible qu'un agent identifie l'emplacement de ce bouton à l'écran, mais il ne connaît toujours pas la destination prévue du bouton ni l'action qu'il est conçu pour déclencher.

Les agents modernes combinent donc plusieurs modalités. Ils utilisent le DOM et l'arborescence d'accessibilité pour obtenir une liste propre et structurée d'éléments interactifs, puis la croisent avec un rendu visuel pour comprendre la mise en page, le regroupement et les repères visuels.

Notre travail consiste à fournir des signaux clairs sur tous ces canaux.

Créer des sites Web adaptés aux agents

Pour aider les agents à naviguer sur votre site Web, tenez compte des points suivants :

• Toutes les actions nécessaires, effectuées par un humain ou un agent, doivent être clairement reflétées dans l'interface.
• Assurez-vous que la mise en page est stable. Les agents qui prennent des captures d'écran seront probablement confus si la mise en page de votre site Web change constamment, par exemple lorsqu'un bouton Ajouter au panier sur la page produit se trouve à un emplacement différent pour chaque catégorie de produits.
• Évitez les éléments "fantômes" ou les superpositions transparentes qui pourraient masquer des éléments interactifs. L'analyse visuelle effectuée par l'agent peut ignorer les nœuds couverts, même s'ils apparaissent transparents.
• Concevez des éléments exploitables avec du code HTML sémantique. Préférez les balises <button> et <a> aux éléments <div> et <span> modifiés. Les agents les reconnaissent comme interactifs.
  • Si vous ne pouvez pas utiliser de code HTML sémantique, fournissez toujours à l'élément le role et le tabindex appropriés. Par exemple, <div role="button">.
• Définissez cursor: pointer en CSS, ce qui est un signal fort d'exploitabilité.
• Ajoutez l'for attribut aux <label> balises pour les lier aux entrées. Cela aide l'agent d'IA à comprendre l'objectif d'un champ en indiquant le texte du libellé directement associé à la chaîne d'action.
• Assurez-vous que tous les éléments interactifs nécessaires pour poursuivre le parcours utilisateur ont une zone visible de plus de 8 pixels carrés, afin d'éviter qu'ils ne soient filtrés par l'analyse visuelle.

Étapes suivantes

Tout ce que nous suggérons pour rendre un site "adapté aux agents" le rend également plus adapté aux humains.

Rendre les sites Web compatibles avec les agents d'IA est une incitation à réaffirmer les principes fondamentaux de la création de sites Web bien structurés, accessibles et sémantiques.

• Découvrez WebMCP, une norme Web proposée pour aider les sites Web à interagir avec les agents, et inscrivez-vous au programme d'aperçu anticipé pour commencer à expérimenter.
• Auditez votre arborescence A11y : utilisez les outils existants pour vous assurer que la hiérarchie de votre site est lisible par machine et stable.