Le balisage ARIA que vous mettez en place pour satisfaire aux contrôles d’accessibilité constitue aussi l’une des sources les plus propres fournies aux moteurs d’IA. Lecteurs d’écran et agents IA interprètent les pages web de manière très proche : ils ne voient pas vos images soigneusement mises en forme, mais décomposent le HTML en un arbre fait de balises, de niveaux hiérarchiques et de noms. Une même configuration peut donc servir les personnes malvoyantes tout en permettant à ChatGPT, Perplexity ou Claude d’extraire et de citer correctement vos contenus. C’est l’un des aspects les plus souvent signalés, mais aussi les plus négligés du GEO.
Lecteurs d’écran et agents IA parcourent le même arbre
Un navigateur visuel assemble CSS, images et animations pour produire la page perçue par l’œil humain. Un lecteur d’écran, lui, parcourt l’arbre d’accessibilité généré par le navigateur et en restitue chaque couche : voici la zone de navigation, voici le contenu principal, voici un bouton nommé « Ajouter au panier ». Les robots d’exploration des moteurs d’IA suivent un processus plus direct. La plupart n’exécutent pas JavaScript : ils récupèrent le HTML source, puis convertissent les balises, la hiérarchie des titres, les libellés des liens et les attributs aria en texte brut avant de les transmettre au modèle. Leur point commun est donc évident : ni les uns ni les autres ne peuvent interpréter les seuls indices visuels d’une image. Ils dépendent de la structure et du texte.
Conséquence : un faux bouton construit avec un <div> et un événement de clic, une image produit sans attribut alt ou un paragraphe en gras qui imite un titre grâce à sa taille de police peuvent sembler parfaitement normaux à l’œil humain, tout en restant opaques pour ces deux catégories de lecteurs. Quelle que soit la qualité du contenu, si la couche extraite perd sa structure, l’IA ne peut plus que deviner — ou ignorer purement et simplement la page.
Commencez par les fondations : le HTML sémantique natif
À l’évocation d’ARIA, beaucoup d’équipes pensent immédiatement à multiplier les attributs role et aria-. Il faut procéder dans l’ordre inverse. La première règle des recommandations d’accessibilité du W3C est claire : lorsqu’un élément HTML natif permet d’exprimer la sémantique voulue, inutile de la recréer avec ARIA. <button> est conçu comme un bouton, <nav> comme une zone de navigation et <h2> comme un intertitre. Ces balises natives intègrent à la fois une sémantique et un comportement clavier par défaut ; elles sont reconnues par les robots d’exploration comme par les lecteurs d’écran. Vous évitez ainsi de maintenir une couche de correspondance supplémentaire. ARIA sert à combler les lacunes, pas à poser les fondations.
Quatre réglages à effectuer une fois, au bénéfice de tous
Concentrez vos ressources d’ingénierie sur les quatre points suivants : c’est là que le retour sur investissement sera le plus élevé. Ces éléments sont systématiquement examinés lors des audits d’accessibilité et comptent aussi parmi les principaux signaux utilisés par l’IA pour extraire les contenus.
- Structure des zones principales : utilisez <header>, <nav>, <main>, <aside> et <footer> pour définir l’ossature de la page. Les robots d’exploration IA s’appuient sur ces repères pour distinguer le contenu principal des modèles de navigation et de pied de page. Ils peuvent ainsi citer le contenu utile sans intégrer les libellés du menu à leur réponse.
- Hiérarchie des titres : prévoyez un seul <h1> par page et n’omettez aucun niveau dans la suite <h2>, <h3>. Cet arbre de titres sert de sommaire à l’IA pour comprendre le plan de l’article. Il permet aussi aux utilisateurs de lecteurs d’écran de parcourir rapidement le contenu.
- Texte alternatif des images : pour toute image porteuse de sens, utilisez l’attribut alt afin d’en décrire le contenu. Pour une image purement décorative, laissez sa valeur vide afin qu’elle soit ignorée. Les informations essentielles d’une infographie doivent notamment figurer dans l’attribut alt ou dans un texte adjacent ; sinon, les chiffres présents dans l’image n’existent tout simplement pas pour la machine.
- Nom des éléments interactifs : chaque bouton et chaque lien doit disposer d’un nom lisible. Ajoutez un aria-label aux boutons composés uniquement d’une icône, afin que l’agent IA comprenne l’action associée.
Boutons à icône et liens : les zones muettes les plus fréquentes
Lors de nos audits techniques pour des clients, les composants purement graphiques figurent parmi les problèmes les plus fréquents. Menu hamburger, panier, loupe de recherche, partage sur les réseaux sociaux : ces éléments prennent souvent la forme d’un <div> contenant un SVG, sans aucun texte. Le lecteur d’écran se contente alors d’annoncer « bouton », quand il ne dit rien du tout ; l’agent IA détecte un objet cliquable, mais sans nom. Chez un client e-commerce, le bouton de validation de commande était construit de cette façon. L’outil de test des agents ne trouvait même pas le point d’entrée. Après l’ajout d’un aria-label nommé « valider la commande », le même bouton est devenu identifiable aussi bien pour les personnes malvoyantes que pour les agents automatisés. Le principe vaut également pour les liens : une série de libellés comme « En savoir plus » ou « Cliquez ici » ne permet plus de comprendre la destination lorsque le contexte visuel disparaît. Donnez à chaque lien un texte précis et autonome : un seul réglage servira là encore les deux usages.
Éléments dynamiques : indiquez à l’agent IA ce qu’il peut faire à chaque instant
Au-delà des contenus statiques, les agents IA sont de plus en plus amenés à effectuer de véritables actions sur les pages : ouvrir un menu, changer de page ou envoyer un formulaire. Un nom ne suffit alors plus ; il faut également exposer l’état du composant. Les attributs d’état ARIA indiquent de façon lisible par la machine si un élément est ouvert ou fermé et quelle option est sélectionnée. L’agent peut ainsi déterminer l’action suivante et vérifier que l’étape précédente a bien produit l’effet attendu.
- aria-expanded : indique si un menu repliable, un accordéon ou une liste déroulante est ouvert ou fermé. Les agents s’appuient sur cet attribut pour savoir s’ils doivent d’abord cliquer sur le composant.
- aria-current : signale la position actuelle dans une pagination ou un fil d’Ariane, afin d’éviter que l’agent ne tourne en rond au même niveau.
- aria-selected et aria-checked : exposent l’état sélectionné des pages, options et cases à cocher, ce qui permet à l’agent de confirmer que son action a bien été prise en compte.
- aria-live : identifie comme zones dynamiques les régions mises à jour en temps réel, par exemple les erreurs de formulaire ou les résultats en cours de chargement. Agents et lecteurs d’écran sont ainsi avertis d’un changement à l’écran.
Vérification : ne vous contentez pas de « visuellement, tout va bien »
- Utilisez curl ou la fonction « Afficher le code source » du navigateur pour examiner le HTML réellement renvoyé par le serveur. Si le contenu n’apparaît qu’après l’exécution de JavaScript, la plupart des robots d’exploration IA ne pourront pas le lire.
- Lancez le contrôle d’accessibilité d’axe DevTools ou de Lighthouse pour repérer les noms manquants, les contrastes insuffisants et les niveaux de titre omis.
- Testez réellement votre page avec un lecteur d’écran : VoiceOver sur Mac ou NVDA sous Windows. Parcourez-la au clavier et écoutez ce qui est annoncé.
- Utilisez des outils de vérification de la préparation aux agents, comme isitagentready, pour simuler la capacité d’un agent IA à reconnaître et à manipuler vos composants essentiels.
L’accessibilité n’est pas un simple coût de conformité supplémentaire. Chaque balise sémantique mise en place pour les personnes malvoyantes sera également interprétée par les agents IA. Rares sont les investissements d’ingénierie capables de produire simultanément ces deux formes de valeur.— Tenten GEO Technical Audit
ARIA et le balisage sémantique ne vous feront pas directement progresser dans les résultats de recherche. Ils déterminent toutefois si un moteur d’IA peut comprendre, extraire et citer proprement vos contenus. C’est l’un des fondements du GEO. Si vous ignorez comment un agent IA perçoit votre site ou quels composants essentiels lui paraissent totalement vides, vous pouvez prendre rendez-vous pour un diagnostic GEO de 30 minutes. Nous examinerons concrètement votre site afin de vous montrer où se situent les lacunes.
