Votre IA s’en sort moins bien que vos utilisateurs aveugles

Les 48 slides

Sous chaque slide, son texte, puis, en plus petit, la description de ses dessins, de ses photos et de ses captures. Ces descriptions servent aux personnes qui lisent la page avec un lecteur d’écran.

© 2026 Cateline Puccetti. Ces slides, leur texte et leurs dessins sont sous licence Creative Commons BY-NC-ND 4.0 : vous pouvez les partager en citant l’autrice et le lien de cette page, sans les modifier ni en faire un usage commercial. Les photos et captures d’autres auteurs gardent leurs propres droits, indiqués sous la slide.

1. 

   1 Agile Tour Bordeaux, 22 octobre 2026, 13 h 30, salle HUB, rez-de-chaussée (conférences). Votre IA s’en sort moins bien que vos utilisateurs aveugles. Cateline Puccetti, sparring partner pour les décisions produit en SaaS B2B. cateline.fr. Il y a quelques semaines, j’ai délégué une tâche à mon IA : brancher mon outil d’envoi d’emails sur mon nom de domaine, en ajoutant quelques lignes de réglage chez mon hébergeur. Elle a réussi. Portrait de Cateline sur un disque jaune, logo de l’Agile Tour Bordeaux et logo de cateline.fr.

2. 

   2 290 actions de mon IA, pour seulement 4 lignes à intégrer dans mon outil d’hébergement. Source : comptage sur ma propre session, octobre 2026, trace complète sur github.com/pcate22/demo-arbre-accessibilite.

3. 

   3 Le journal de l’agent sur la page non accessible, étapes 30 à 40 sur 58 : 30, capture d’écran. 31, saisie du texte v=DKIM1… au point x=549, y=283. 32, capture d’écran. 33, clic au point x=66, y=278. 34, touche Home. 35, touche Backspace. 36, capture d’écran. 37, touche Backspace. 38, capture d’écran. 39, saisie du texte v=DKIM1… au point x=549, y=684. 40, capture d’écran. Elle a visé à côté : même colonne, 400 pixels plus bas. Puis elle efface deux fois. Elle capture, elle calcule un point, elle vise à côté, elle efface, elle recommence. Dessin : la boucle de l’agent, photo, analyse, clic, et on recommence ; à côté, l’agent, un petit robot bleu.

4. 

   4 Pour entrer dans un logiciel, une IA a deux portes : une API ou un MCP, quand l’éditeur en a prévu un. Mais ils n’existent pas pour tout. Alors l’IA fait comme nous : elle passe par l’écran. Dessin : un agent IA, petit robot bleu, s’avance vers un bâtiment à deux portes. La première, « API, MCP », est murée. La seconde, « l’IHM, l’écran », est ouverte : la flèche de l’agent y mène.

5. 

   5 Il y a une autre façon de comprendre une page sans la regarder. Des gens s’en servent tous les jours. Slide entièrement noire.

6. 

   6 Trente secondes de VoiceOver, le lecteur d’écran du Mac, sur la page de démonstration corrigée : ses titres, ses boutons par leur nom, un champ obligatoire. Un haut-parleur sur fond noir.

   Écoutez les trente secondes de VoiceOver.

   Transcription : Vous êtes actuellement sur lien. Pour cliquer ce lien, appuyez sur Contrôle, Option, Espace. Zone DNS, page actuelle, visité, lien. Ajouter une entrée, bouton, principal. Vous êtes actuellement sur bouton. Pour cliquer ce bouton, appuyez sur Contrôle, Option, Espace. Sélectionnez un type de champ DNS, Type, menu local, condensé, bouton. Ajouter une entrée DNS, région.

7. 

   7 Un lecteur d’écran. C’est comme ça que naviguent les personnes aveugles. Il ne lit pas l’image de la page, il lit sa structure : ceci est un titre, ceci est un bouton qui s’appelle Enregistrer, ce champ est obligatoire. Dessin : un petit cube bleu montre du doigt un écran couvert de braille, une ligne surlignée en jaune. Légende : il ne lit pas l’image, il lit la structure.

8. 

   8 1,3 milliard de personnes vivant avec un handicap important, 1 sur 6. Source : Organisation mondiale de la santé, fiches Handicap et santé et Cécité et déficience visuelle, consultées le 8 octobre 2026.

9. 

   9 1,3 milliard de personnes vivant avec un handicap important, 1 sur 6. 2,2 milliards de personnes avec une déficience visuelle, de près ou de loin : là-dedans, il y a tous ceux qui portent des lunettes. Source : Organisation mondiale de la santé, fiches Handicap et santé et Cécité et déficience visuelle, consultées le 8 octobre 2026. Dessin : une foule de petits cubes, beaucoup avec des lunettes.

10. 

    10 Moi, c’est Cateline. Head of product and design, SaaS B2B depuis 18 ans. Je suis myope. Photo de Cateline enfant, avec des lunettes.

11. 

    11 Handicap temporaire. À 30 ans, je me fais opérer de la myopie : pendant un an, je vois flou d’un œil. Au travail, je me place à vingt centimètres de l’écran. Dessin : Cateline, en personnage à lunettes, le nez à vingt centimètres de son écran. Légendes : un œil flou, pendant un an ; vingt centimètres ; handicap temporaire.

12. 

    12 À 40 ans, une forte fatigue oculaire : en voiture, je ne vois plus que des halos lumineux. Photo : des phares de voiture, la nuit, entourés de halos et de rayons de lumière.

13. 

    13 Handicap permanent. Diplopie : perception simultanée de 2 images à la vue d’1 seul objet. Celle-là ne partira pas. Sans correction, ou corrigée quand je suis fatiguée, je vois comme ça. Crédit : photo de Jonathan Trobe, University of Michigan Kellogg Eye Center, licence CC BY 3.0, creativecommons.org/licenses/by/3.0. Photo : une montre vue en double, deux images qui se chevauchent.

14. 

    14 Je finis mes journées en fermant un œil, pour rétablir une seule image. Dessin : Cateline, un œil fermé derrière ses lunettes, devant son écran. Légendes : une seule image ; un œil fermé, en fin de journée.

15. 

    15 200 %. Je fais partie de celles qui zooment à 200 %, et c’est exactement ce que la norme demande. RGAA 4.1.2, critère 10.4 : Dans chaque page web, le texte reste-t-il lisible lorsque la taille des caractères est augmentée jusqu’à 200 %, au moins ? WCAG, critère 1.4.4 Redimensionnement du texte, niveau AA : le texte peut être redimensionné jusqu’à 200 % sans perte de contenu ou de fonctionnalité. WCAG : la norme internationale du W3C. RGAA : le référentiel français qui la reprend et dit comment la tester. Source : accessibilite.numerique.gouv.fr, RGAA version 4.1.2, relevé le 8 octobre 2026, et W3C, WCAG critère 1.4.4, niveau AA, inchangé depuis WCAG 2.0.

16. 

    16 Situation de handicap : le soleil sur votre écran, à la plage ou dans le train. Là, ce n’est pas vous le problème, c’est la situation. Crédit : image extraite d’une vidéo de star_way, Shutterstock. Photo : deux mains tiennent un téléphone en plein jour ; l’écran, pâle, est presque illisible.

17. 

    17 Le même code sert les trois situations : handicap temporaire, handicap permanent, situation de handicap. Les trois images précédentes, côte à côte : Cateline le nez sur son écran, la montre vue en double, le téléphone en plein jour.

18. 

    18 Le protocole de l’étude. 16 personnes : 8 voyants, 8 aveugles ou malvoyants ; 4 totalement aveugles, 4 avec une vision partielle, presque toutes au lecteur d’écran. 2 agents IA : agent IA, agent IA sans souris. Plusieurs conditions, dont une sans souris : clavier et souris, clavier seul, écran grossi à 150 %. Source : A11y-CUA Dataset, CHI 2026, Barcelone, 13 au 17 avril 2026, Berkeley et université du Michigan, arxiv.org/abs/2602.09310. Dessins : un cube gris, un cube bleu avec une canne blanche, et deux petits robots.

19. 

    19 60 tâches du quotidien, les mêmes pour tout le monde. Cinq catégories : navigation web, opérations système, édition de documents, entre applications, média. Par exemple : les favoris de Chrome, activer le Bluetooth, barrer un titre dans Word, copier des notes d’un Word vers un PowerPoint, avancer une vidéo de 30 secondes. Source : A11y-CUA Dataset, CHI 2026, 5 catégories de 12 tâches, annexe B, arxiv.org/abs/2602.09310.

20. 

    20 Tâches réussies : 99 % pour les voyants ; 85 % pour les aveugles ; 78 % pour l’agent IA ; 42 % pour l’agent IA sans souris. Source : A11y-CUA Dataset, CHI 2026, Barcelone, 13 au 17 avril 2026, Berkeley et université du Michigan, arxiv.org/abs/2602.09310. Devant chaque chiffre, son personnage : un cube gris, un cube bleu avec une canne blanche, un robot, un robot sans souris.

21. 

    21 Votre IA s’en sort moins bien que vos utilisateurs aveugles.

22. 

    22 L’effondrement a un prix. 78 % avec la souris, 42 % sans la souris. Source : A11y-CUA Dataset, CHI 2026, arxiv.org/abs/2602.09310. Une grande flèche vers le bas, entre les deux chiffres.

23. 

    23 1. Le coût financier. Chaque capture d’écran se paie en tokens, l’unité dans laquelle on facture les IA. Par l’API : 10 700 tokens, 0,11 $. Par l’interface corrigée : 758 000 tokens, 0,73 $. Par l’interface non accessible : 1 187 000 tokens, 1,11 $, soit 0,38 $ de plus que l’interface accessible. Source : Moyenne sur trois exécutions par scénario, Claude Opus 5, octobre 2026. Mesures, traces et harnais sur github.com/pcate22/demo-arbre-accessibilite. Trois barres : presque vide pour l’API, aux deux tiers pour l’interface corrigée, pleine pour l’interface non accessible.

24. 

    24 + 52 % : ce que coûte ma page non accessible face à l’accessible. 0,38 $ × 1 million d’utilisations = 380 000 $. Source : Moyenne sur trois exécutions par scénario, Claude Opus 5, octobre 2026. Mesures, traces et harnais sur github.com/pcate22/demo-arbre-accessibilite.

25. 

    25 2. Le coût légal. 2005 : loi du 11 février, article 47 ; le secteur public, sans sanction. 2019 : décret du 24 juillet, qui transpose la directive européenne de 2016 ; s’y ajoutent les entreprises de plus de 250 M€ de chiffre d’affaires en France. 2025 : directive européenne 2019/882, le 28 juin ; s’y ajoutent le commerce en ligne, la banque, le transport, les médias. 2026 : décision Arcom du 24 juin, impots.gouv.fr mis en demeure, neuf mois pour corriger. Ce qui est sanctionné : rendre accessible, jusqu’à 50 000 € ; le déclarer, jusqu’à 25 000 € ; mise en demeure publique d’abord. Le RGAA 4.1.2 n’est pas une date : c’est le référentiel qui dit comment s’y conformer, et sur quoi porte l’audit. Note : ces sanctions ne sont pas déductibles du bénéfice imposable, CGI article 39, 2, bofip.impots.gouv.fr.

26. 

    26 3. Le coût commercial : devenir invisible. Dessin : un agent IA cherche votre site à la loupe et ne trouve qu’une page en pointillés. Il dit : rien ici. Légendes : votre site ; l’agent cherche.

27. 

    27 Depuis vingt ans : est-ce que mon site sort sur Google ? Depuis 2015 : est-ce qu’il marche sur mobile ? Depuis 2025 : est-ce qu’un agent trouve votre site ? Maintenant : est-ce qu’un agent sait s’en servir ? Source : mise à jour « mobile-friendly » de Google, avril 2015.

28. 

    28 Est-ce qu’un agent va au bout de sa tâche ? 13 tâches réelles sur des sites de commerce et de voyage. 31 % des tâches menées à bout, sur le site le moins bon des six. Source : AudioEye, 24 septembre 2026, 1 560 tests : 6 modèles, 13 tâches, 6 sites, dix répétitions, deux versions de chaque site. AudioEye vend des correctifs d’accessibilité : la variable testée est leur produit.

29. 

    29 4. Le coût humain, payé par vos utilisateurs. 179 actions au clavier par tâche, pour les participants aveugles de l’étude. Source : A11y-CUA Dataset, CHI 2026, arxiv.org/abs/2602.09310.

30. 

    30 La solution, vous l’avez déjà entendue. Des confettis.

31. 

    31 Agents rely on the accessibility tree, derived from DOM for assistive technology (AT), as their primary data model. Les agents s’appuient sur l’arbre d’accessibilité comme principal modèle de données. Source : Chrome for Developers, Google, 22 juin 2026, Kasper Kulikowski et Michael Hablich, developer.chrome.com/blog/agent-ready-toolkit.

32. 

    32 Est-ce qu’un agent le trouve ? Le HTML sémantique : des balises qui disent ce que sont les choses, un titre dans un h1, un bouton dans un button. C’est ce que lit Google pour référencer une page. Est-ce qu’il sait s’en servir ? L’arbre d’accessibilité. Le HTML sémantique sert aux deux. Deux dessins. Le premier : l’agent devant quatre boutons qui s’appellent tous « bouton », et il en compte trois : Enregistrer, c’est lequel ? Légende : quatre fois « bouton ». Le second : un menu qui a un nom, « Type », et affiche « Sélectionnez… ». L’agent lit le nom : d’accord. Je clique ? J’écris ? Et c’est ouvert ? Légende : ni rôle, ni état.

33. 

    33 L’arbre d’accessibilité : la version de la page que le navigateur prépare pour les technologies d’assistance. Pour chaque élément, son rôle, son nom, son état. Ce que vous voyez : le formulaire d’ajout d’une entrée DNS, avec ses champs Type, Sous-domaine, Cible, TTL, Aperçu de l’enregistrement, et ses boutons Ajouter et Annuler. Page non accessible : quatre éléments absents de l’arbre ; un combobox sans aucun nom ; textbox « Sous-domaine - Champ obligatoire » ; textbox « Cible - Champ obligatoire » ; combobox « TTL », valeur « Par défaut » ; button « Ajouter » ; button « Annuler ». Page accessible : region « Ajouter une entrée DNS » ; heading « Ajouter une entrée DNS » ; combobox « Type », valeur « Sélectionnez un type de champ DNS » ; option « A, AAAA, CNAME, MX, TXT » ; textbox « Sous-domaine - Champ obligatoire » ; textbox « Cible - Champ obligatoire » ; combobox « TTL », valeur « Par défaut » ; status « Aperçu de l’enregistrement » ; button « Ajouter » ; button « Annuler ». Dans Chrome : DevTools › Elements › panneau Accessibility › cocher « Enable full-page accessibility tree ». Source : relevé sur mes deux pages de démonstration, panneau ouvert, github.com/pcate22/demo-arbre-accessibilite. Capture du formulaire, puis les deux arbres en colonnes : les pointillés, c’est ce qui n’existe pas du tout dans la page non accessible.

34. 

    34 Exemple 1 sur 3 : le bouton qui n’a pas de nom. Ce que ça change : l’agent sait sur quoi il clique. La personne aveugle entend Rafraîchir la liste, bouton. La correction : un aria-label sur le bouton icône. Source : accessible.html ligne 43 : aria-label. casse.html ligne 54 : aria-name, un attribut qui n’existe pas. Dessin : un bouton « Ajouter une entrée » et un bouton icône, légendé « aucun nom ». L’agent et la personne aveugle entendent : bouton. Bouton quoi ?

35. 

    35 Exemple 2 sur 3 : la zone, c’est un chapitre. Ce que ça change : on saute directement au formulaire, comme on saute à un chapitre dans un livre. La correction : une section avec un aria-labelledby vers son titre. Source : accessible.html ligne 55 : la section porte un aria-labelledby. casse.html ligne 65 : la même section n’a rien. Dessin : un sommaire vide, légendé « rien ». L’agent et la personne aveugle : pas de chapitres ? Je relis tout.

36. 

    36 Exemple 3 sur 3 : la confirmation que personne n’entend. Ce que ça change : le message est lu à voix haute, sans que personne ait rien demandé. La correction : un role=status sur le bandeau de confirmation. Source : accessible.html ligne 38. casse.html ligne 48 : même bandeau, même style, même moment, sans role status. Dessin : un bandeau « Enregistrement ajouté à la zone », légendé « personne ne l’annonce ». L’agent et la personne aveugle : ça n’a pas marché, je recommence.

37. 

    37 Le même site, corrigé : 96 % des tâches menées à bout, sur le site du 31 %, une fois l’accessibilité corrigée. Source : AudioEye, 24 septembre 2026, 1 560 agents, 6 modèles, 13 tâches sur 6 sites. AudioEye vend des correctifs d’accessibilité : la variable testée est leur produit.

38. 

    38 Où en êtes-vous ? Trois tests.

39. 

    39 Lighthouse : clic droit, Inspecter, onglet Lighthouse. Google y a ajouté une catégorie, la navigation agentique. Source : Lighthouse, catégorie Navigation agentique, mode Instantané, 7 octobre 2026. Capture : la page de démonstration non accessible dans Chrome, son bandeau de cookies ouvert, et le panneau Lighthouse. Navigation agentique : 1 sur 2. Une flèche jaune désigne l’audit en échec, « L’arborescence d’accessibilité n’est pas bien formée ». Premier audit échoué : « ARIA dialog and alertdialog nodes should have an accessible name », sur le bandeau de cookies.

40. 

    40 La même page, corrigée : deux sur deux. Source : Lighthouse, catégorie Navigation agentique, mode Instantané, 7 octobre 2026. Capture : la page de démonstration accessible, le même bandeau de cookies, et le panneau Lighthouse. Navigation agentique : 2 sur 2. Audits réussis : « L’arborescence d’accessibilité est bien formée » et « Cumulative Layout Shift », à 0.

41. 

    41 Clavier seul : votre parcours le plus important, sans la souris, et sans le trackpad. Ce que vous n’atteignez pas au clavier, personne ne l’atteint. Deux dessins. Le premier : le Head of Product dit Tab… Tab… Tab… devant un formulaire « Mes informations » ; la souris est posée, pas touchée. Le second : le client passe par Nom, Email et Téléphone, mais Tab n’y va jamais : le bouton Enregistrer reste hors d’atteinte.

42. 

    42 Lecteur d’écran : déjà installé, rien à télécharger. macOS : VoiceOver, Cmd + F5. Windows : Narrateur, Ctrl + Windows + Entrée, ou NVDA, gratuit, nvaccess.org. Linux : Orca, sur GNOME, Super + Alt + S, déjà installé avec le bureau. iOS : VoiceOver, Réglages › Accessibilité › VoiceOver. Android : TalkBack, Paramètres › Accessibilité › TalkBack.

43. 

    43 Definition of Done : Lighthouse, 100 % en accessibilité ; le parcours principal se fait au clavier seul ; le lecteur d’écran annonce un nom, un rôle, un état.

44. 

    44 Ce qui aide les uns aide les autres. Dessin : l’agent et la personne aveugle se donnent la main.

45. 

    45 Lundi, ouvrez Lighthouse. Deux minutes, et vous saurez où vous en êtes.

46. 

    46 Merci ! Cateline en personnage à lunettes, un cœur jaune au-dessus de la tête ; logos de l’Agile Tour Bordeaux et de Tech Speak’Her.

47. 

    47 Pour aller plus loin. Les slides : cateline.fr/talks. L’étude : A11y-CUA Dataset, CHI 2026, arxiv.org/abs/2602.09310. La deuxième étude : AudioEye, 24 septembre 2026, 1 560 agents, 13 tâches, de 31 % à 96 %. L’arbre d’accessibilité : Chrome for Developers, developer.chrome.com/blog/agent-ready-toolkit. Les erreurs ARIA : WebAIM Million 2026, webaim.org/projects/million. Les chiffres du handicap : Organisation mondiale de la santé, who.int. Le référentiel français : RGAA 4.1.2, accessibilite.numerique.gouv.fr. La loi : directive (UE) 2019/882, applicable depuis le 28 juin 2025. Tester vos pages : wave.webaim.org pour le WCAG, ara.numerique.gouv.fr pour le RGAA. Mes mesures et mes pages de démo : github.com/pcate22/demo-arbre-accessibilite. Note : illustrations produites par un programme Python qui dessine en SVG, écrit avec une IA, à partir de ma charte.

48. 

    48 Votre avis sur ce talk, en deux minutes. Les slides sur cateline.fr : cette page. Cateline Puccetti, sur LinkedIn. Deux QR codes : le premier mène au formulaire d’avis sur ce talk, le second à cette page.

Recevoir les slides en PDF

Laissez votre adresse : vous recevez un message de confirmation, puis le lien du PDF (48 slides, 6,7 Mo).

Ces questions se posent chez vous ?

Qui utilise vraiment votre produit, et pour quel résultat business : c’est le travail que je fais avec les Head of Product et les Lead PM en SaaS B2B.