IA et accessibilité web : les 7 erreurs que génèrent les outils de design

Tu demandes une landing page à Framer AI, à Figma Make ou à Claude. En dix minutes, tu as un rendu propre, aéré, dans l'air du temps. Puis tu passes la page au clavier : le focus disparaît derrière un bouton fantôme, l'icône de menu n'a pas de nom, le texte gris clair sur fond crème ne passe pas le contraste. L'IA appliquée au design produit des sites qui ont l'air finis, mais dont l'accessibilité reste à faire, et c'est à toi de la rattraper avant la livraison.

Cet article liste les erreurs d'accessibilité que les outils IA génèrent le plus souvent, ce que Framer gère déjà pour toi, et le protocole de vérification à passer sur chaque projet client.

Pourquoi les outils IA génèrent des sites peu accessibles

Un modèle reproduit ce qu'il a vu. Or le web dont il apprend est massivement inaccessible : selon le rapport WebAIM Million 2026, 95,9 % des un million de pages d'accueil les plus visitées présentent des erreurs WCAG détectables, avec 56,1 erreurs en moyenne par page. Le même rapport avance, comme une hypothèse et non comme un résultat mesuré, que la hausse des erreurs cette année pourrait venir en partie du code écrit avec l'aide de l'IA.

Deuxième cause : l'IA optimise ce que tu lui montres, c'est-à-dire l'apparence. Un bouton icône sans nom accessible s'affiche parfaitement. Un titre stylé en <div> ressemble à un vrai titre. Ces défauts n'apparaissent qu'au clavier, au lecteur d'écran ou dans un outil d'audit.

Les modèles ne se valent pas pour autant. Une étude présentée à CHI 2026 (Calò, Gurita et De Russis) a analysé 300 interfaces générées par trois modèles et relevé en moyenne 0,3 problème d'accessibilité « sémantique » par interface pour Claude Sonnet 4, 1,5 pour Gemini 2.5 Flash et 1,8 pour GPT-4o. Ces problèmes passent sous le radar des outils automatiques : boutons au libellé générique, liens vagues, alt text pauvre.

Les 7 erreurs d'accessibilité que l'IA génère le plus souvent

Les erreurs d'accessibilité que l'IA reproduit le plus sont celles du web en général : contraste, alt text, labels, liens et boutons sans nom, plus trois défauts de structure. Fréquences d'après WebAIM 2026 :

1. Le contraste sacrifié à l'esthétique

C'est l'erreur numéro un du web, et l'IA l'adore : gris moyen sur blanc, texte blanc sur dégradé pastel, légendes en opacité 50 %. Les palettes « tendance » qu'elle propose sont rarement testées. Si tu génères un design system avec l'IA, vérifie chaque paire texte/fond avant de l'utiliser : c'est une des corrections détaillées dans notre article sur générer un design system avec l'IA.

2. Un alt text absent, ou inutile

L'IA oublie l'alt ou le remplit avec le nom du fichier, « image » ou une description qui répète le titre voisin. Un bon alt dit ce que l'image apporte dans son contexte. Une image purement décorative doit avoir un alt vide pour que le lecteur d'écran l'ignore.

3. Des boutons et des liens sans nom

Icône burger, flèche de carrousel, logos de réseaux sociaux : visuellement clairs, muets pour un lecteur d'écran. L'étude CHI 2026 classe les libellés de boutons génériques (27 % des problèmes relevés) et les textes de liens vagues (26 %) en tête des défauts sémantiques. « En savoir plus » répété six fois sur une page ne dit rien à quelqu'un qui navigue de lien en lien.

4. Une hiérarchie de titres choisie pour la taille

L'IA attribue H1, H2 ou H3 selon le rendu voulu, pas selon la structure. Résultat : deux H1, un H4 directement sous le H1, un slogan balisé en titre. Les utilisateurs de lecteur d'écran naviguent souvent par titres : une hiérarchie cassée, c'est une table des matières illisible.

5. Des formulaires où le placeholder fait office de label

« Ton e-mail » écrit en gris dans le champ disparaît dès que l'utilisateur tape. Sans label associé, le lecteur d'écran annonce « champ de saisie », sans plus.

6. De l'ARIA en trop

Quand on lui demande un site « accessible », l'IA a tendance à saupoudrer des attributs ARIA partout. WebAIM observe que les pages qui utilisent ARIA comptent en moyenne 59,1 erreurs, contre 42 pour les autres (le rapport précise que ces pages sont aussi plus complexes). La règle tient en une ligne : un élément HTML natif vaut mieux qu'un rôle ARIA. Un vrai <button> plutôt qu'un <div role="button">.

7. Des animations qui ignorent le mouvement réduit

Parallaxe, scroll animé, apparitions en cascade : l'IA en met volontiers, rarement avec une alternative pour les personnes sensibles au mouvement. On a détaillé ce point dans notre article sur les animations Framer générées par l'IA.

Ce que Framer gère déjà, et ce qu'il te laisse faire

Framer gère nativement la structure sémantique, le texte alternatif, l'ordre de tabulation et le mouvement réduit. D'après le guide d'accessibilité de Framer, tout passe par le panneau d'accessibilité de l'élément sélectionné :

• Balises de texte : chaque style de texte reçoit une balise (h1, h2, h3, p) que tu peux modifier instance par instance.

• Balises de frame : Header, Nav, Section, Article, Footer, pour donner une vraie structure de page.

• Texte alternatif des images, lu par les lecteurs d'écran et les moteurs de recherche.

• Ordre de tabulation personnalisable, par défaut celui du panneau des calques.

• Réglage de mouvement réduit, qui désactive parallaxe, transformations et animations de layout pour les visiteurs qui le demandent.

Ce que Framer ne fait pas à ta place : choisir des couleurs contrastées, écrire des alt utiles, nommer tes boutons icônes, ordonner tes titres. Après chaque génération par l'agent IA de Framer, repasse dans le panneau d'accessibilité.

Tu veux apprendre à construire des sites Framer propres de bout en bout, structure et accessibilité comprises, en utilisant l'IA comme accélérateur et pas comme pilote automatique ? C'est exactement ce que couvre la formation Framer de Frames Académie.

Le prompt qui limite les dégâts dès la génération

Pour réduire les erreurs d'accessibilité dès la génération, ajoute ce bloc à tes prompts de génération de page ou de composant :

Respecte les WCAG 2.2 niveau AA. Contraste minimum 4,5:1 pour le texte courant. Un seul H1, puis une hiérarchie H2/H3 logique. Chaque image a un alt descriptif ou vide si décorative. Chaque bouton icône a un nom accessible. Chaque champ a un label visible. Utilise les éléments HTML natifs avant ARIA. Prévois une version sans animation pour prefers-reduced-motion.

Ce prompt réduit le nombre d'erreurs, il ne les supprime pas. L'IA peut affirmer avoir respecté une contrainte qu'elle n'a pas appliquée, d'où l'étape suivante, non négociable.

Le protocole de vérification avant chaque livraison

Avant de livrer un site généré avec l'IA, passe ces sept tests sur la version publiée, pas sur le canevas. Compte 20 à 30 minutes par page type.

1. Débranche la souris. Parcours la page avec Tab et Maj+Tab. Le focus doit rester visible, suivre un ordre logique et atteindre chaque lien, bouton et champ. Ouvre et ferme le menu mobile au clavier.

2. Lance Lighthouse (onglet Lighthouse des outils de développement Chrome), catégorie Accessibilité. Corrige tout ce qui touche au contraste, aux noms manquants et aux labels.

3. Vérifie la structure des titres avec une extension qui affiche le plan de la page. Un H1, pas de saut de niveau.

4. Relis chaque alt dans le panneau d'accessibilité de Framer : est-ce qu'il dit ce que l'image apporte ?

5. Teste un formulaire en entier : labels annoncés, erreurs décrites en texte, message de confirmation lisible.

6. Active « réduire les animations » dans les réglages de ton système et recharge la page.

7. Écoute la page cinq minutes avec VoiceOver (macOS) ou NVDA (Windows, gratuit). C'est là que tu repères les boutons muets et les liens « en savoir plus » en série.

Les outils automatiques ne détectent qu'une partie des problèmes : ils voient un alt présent, pas un alt inutile. Les étapes 1, 4 et 7 restent humaines. Si tu fais déjà des audits UX avec l'IA, ce protocole s'ajoute naturellement à notre protocole d'audit UX en 6 étapes.

Ce que la loi change pour tes clients

Depuis le 28 juin 2025, l'European Accessibility Act (directive UE 2019/882), transposée en France par la loi du 9 mars 2023, impose des exigences d'accessibilité à une liste de services numériques destinés aux consommateurs, dont le commerce électronique, la banque, le transport de voyageurs et les livres numériques. Les microentreprises qui fournissent des services (moins de 10 personnes et chiffre d'affaires ou bilan annuel inférieur ou égal à 2 millions d'euros) en sont exemptées.

Concrètement : le site vitrine d'un artisan n'est pas visé, la boutique en ligne d'une PME de 15 salariés l'est. Pour un cas précis, ton client doit se référer au texte ou à son conseil juridique : ton rôle n'est pas de rendre un avis juridique, mais de savoir que la question existe et de livrer un site qui ne l'aggrave pas.

Vendre l'accessibilité sans promettre la conformité

Vends l'accessibilité comme une méthode, pas comme une garantie. Un score Lighthouse à 100 ne vaut pas conformité : seul un audit complet (en France, sur la base du RGAA) peut l'établir.

• Ce que tu peux promettre : un site construit selon les bonnes pratiques WCAG AA, vérifié avec un protocole documenté (clavier, contraste, lecteur d'écran).

• Ce que tu ne peux pas promettre : une conformité légale certifiée, sauf à passer par un auditeur spécialisé.

• Comment le facturer : une ligne dédiée dans le devis, qui rend visible un travail que l'IA ne fait pas. On détaille cette logique dans notre article sur la facturation d'un projet conçu avec l'IA.

Conclusion : l'IA va vite, la vérification reste ton métier

Les outils IA font gagner des heures sur la mise en page, mais ils reproduisent les défauts d'un web à 95,9 % non conforme. Contraste, alt, noms de boutons, titres, labels, ARIA superflu et animations : sept points à vérifier systématiquement, dont la moitié se règle dans le panneau d'accessibilité de Framer. Le reste demande vingt minutes de clavier et de lecteur d'écran par page.

Si tu veux structurer ce workflow IA + Framer + Figma, du prompt à la mise en ligne, la formation Framer de Frames Académie te donne la méthode complète, avec les vérifications qui vont avec.