Replit est un espace de travail en ligne où Replit Agent, un assistant d’IA, construit un site ou une application à partir de votre description, le fait tourner et le met en ligne. Agent prend beaucoup de choses en charge, mais il construit ce que vous demandez : si l’accessibilité ne fait pas partie de la demande, elle est laissée au hasard. Ce guide montre les problèmes à surveiller, comment écrire des instructions qu’Agent lit à chaque demande et comment vérifier le site publié.
Ce que construit Replit Agent
Pour les sites et applications web, Agent utilise souvent React (une façon très répandue de construire des pages web) mis en forme avec Tailwind CSS, avec des composants de shadcn/ui, une collection de menus, fenêtres de dialogue et champs de formulaire prêts à l’emploi. Derrière, on trouve généralement un petit serveur en Node.js et une base de données PostgreSQL. Le choix exact dépend de votre demande, et Agent peut aussi créer des applications mobiles. ibin vérifie des pages web : ce guide porte donc sur les sites qui s’ouvrent dans un navigateur.
Les composants de shadcn/ui sont un bon départ : leurs fenêtres, listes déroulantes et onglets fonctionnent au clavier et transmettent les bonnes informations aux lecteurs d’écran (logiciels qui lisent l’écran à voix haute). Beaucoup d’applications web de Replit sont aussi des applications monopages : le navigateur charge une seule page et remplace le contenu quand vous cliquez sur un lien. C’est rapide, mais cela cause les deux premiers problèmes ci-dessous.
Les problèmes fréquents
Ces schémas reviennent régulièrement. Des instructions claires en évitent la plupart.
- Un seul titre pour tous les écrans. Dans une application monopage, le titre dans l’onglet du navigateur reste souvent le même partout. Les utilisateurs de lecteur d’écran entendent ce titre en premier et s’en servent pour savoir où ils sont.
- Un focus qui reste en arrière après la navigation. Après un clic sur un lien du menu, le nouveau contenu s’affiche, mais la position du clavier reste dans le menu. Les personnes qui utilisent le clavier ou un lecteur d’écran ne remarquent pas que quelque chose a changé.
- Des boutons réduits à une icône, sans nom. Une icône de menu, de fermeture ou de suppression qu’un lecteur d’écran annonce seulement comme « bouton ».
- Des erreurs affichées seulement dans un toast. Un toast est le petit message qui apparaît dans un coin et disparaît après quelques secondes. On le rate facilement, et rien à côté du champ n’indique quoi corriger.
- Du texte atténué trop peu contrasté. Du texte gris doux sur fond blanc ou sur des cartes gris clair.
- Des lignes et des cartes cliquables. Des lignes de tableau et des cartes de tableau de bord qui réagissent au clic de souris, mais que la touche Tab n’atteint pas.
Où placer les instructions permanentes
Replit Agent lit un fichier nommé replit.md dans le dossier principal de votre projet. Selon la documentation de Replit, Agent crée ce fichier au démarrage d’un nouveau projet et en inclut le contenu dans chaque demande, pour comprendre vos préférences, la structure du projet et votre style de code. Vous pouvez le modifier comme n’importe quel autre fichier.
- Ouvrez replit.md dans le dossier racine de votre projet. S’il n’existe pas, créez-y un fichier portant exactement ce nom ; Agent ne le trouve que dans le dossier principal.
- Collez le bloc ci-dessous à la fin.
Agent peut aussi mettre à jour replit.md lui-même. Vérifiez de temps en temps que votre partie sur l’accessibilité s’y trouve toujours.
Replit propose aussi des skills, des instructions réutilisables que l’on installe dans un projet, mais pour une courte liste de règles, replit.md reste l’endroit le plus simple.
Instructions pour Replit
Collez ce bloc dans replit.md. Adaptez le code de langue si votre site n’est pas en français.
## Exigences d’accessibilité (ne pas supprimer) Respecte ces règles à chaque modification. Objectif : WCAG 2.2 niveau AA. - Utilise des éléments sémantiques : header, nav, main, footer. Utilise de vrais liens pour la navigation et de vrais boutons pour les actions. Ne mets jamais de gestionnaire de clic sur une div, une ligne de tableau ou une Card. Si toute une carte est cliquable, place un vrai lien à l’intérieur. - Chaque bouton réduit à une icône a un aria-label dans la langue du site, par exemple "Supprimer la facture". Ajoute aria-hidden sur l’icône. - Chaque champ de formulaire a une étiquette visible qui lui est reliée. Un placeholder n’est jamais la seule étiquette. Les erreurs s’affichent en texte à côté du champ, pas seulement dans un toast. - Contraste du texte d’au moins 4.5:1, 3:1 pour le grand texte et les icônes, en mode clair et sombre. - Garde un style de focus bien visible sur chaque lien, bouton et champ. - Définis lang="fr" sur l’élément html. Mets à jour le titre du document à chaque changement de route, par exemple "Factures – Mon appli". - Après un changement de route, place le focus sur le titre principal du nouvel écran. - Un seul h1 par écran, des titres dans l’ordre. - Garde le comportement clavier des composants shadcn/ui et Radix. Les fenêtres se ferment avec Échap et rendent le focus au bouton qui les a ouvertes. - Les images porteuses de sens ont un texte alternatif ; les images décoratives reçoivent alt="". - Respecte prefers-reduced-motion pour les animations. - Ajoute un lien "Aller au contenu principal" en premier sur chaque page.
Prompts de suivi pour les problèmes courants
Après une vérification, demandez une correction à la fois. Remplacez les parties entre crochets.
- Titres et focus : « Quand je passe à un autre écran, le titre de l’onglet ne change pas et le focus du clavier reste dans le menu. Donne à chaque écran son propre titre et place le focus sur son titre principal après la navigation. »
- Boutons à icône : « Donne à chaque bouton réduit à une icône dans [le tableau des factures] un nom qui dit ce qu’il fait, et sur quel élément. Ne change pas leur apparence. »
- Erreurs dans un toast : « Dans [le formulaire d’inscription], affiche chaque erreur en texte sous le champ concerné, reliée à ce champ. Garde le toast seulement en complément. »
- Contraste : « Fonce le texte gris sur [les cartes du tableau de bord] jusqu’à atteindre au moins 4.5:1. »
- Lignes cliquables : « Je ne peux pas ouvrir [une commande] au clavier. Remplace le clic sur la ligne du tableau par un vrai lien dans la première cellule. »
Agent peut tester si les fonctions marchent, mais fonctionner à la souris n’est pas la même chose que fonctionner au clavier. Demandez-le explicitement : « Teste le parcours principal uniquement au clavier et dis-moi où il bloque. »
Publier et vérifier
ibin vérifie des pages sur le web public : il lui faut une adresse que tout le monde peut ouvrir. Le guide de publication de Replit décrit les étapes.
- Ignorez l’aperçu de développement. L’adresse d’aperçu que vous voyez pendant la construction est temporaire. Vérifiez l’application publiée.
- Publiez. Choisissez Publish en haut à droite de l’éditeur. L’adresse se termine par .replit.app.
- Choisissez un accès public. Replit propose Public, Password protected, Workspace only et Invite only. Un outil de vérification ne peut ni se connecter ni saisir de mot de passe : choisissez Public.
- Vérifiez la page avec ibin. Commencez par la page d’accueil, puis votre formulaire ou écran le plus important.
- Collez la correction dans Agent. Chaque problème du rapport a un bouton « Copier les instructions pour un outil d’IA ». Collez le résultat dans la discussion avec Agent ; il demande une correction dans l’application elle-même.
- Republiez et vérifiez à nouveau. Les modifications de l’éditeur n’arrivent dans l’application en ligne qu’après Republish. L’adresse reste la même.
- Vérifiez plus de pages. Connectez-vous pour vérifier jusqu’à 200 pages du même site, et activez les vérifications hebdomadaires pour repérer les problèmes qui reviennent.
Les écrans derrière une connexion ne peuvent pas être vérifiés de l’extérieur : testez-les vous-même au clavier. Les vérifications automatiques trouvent environ un tiers à la moitié des problèmes ; faites aussi le test clavier en dix minutes.
Ce qu’Agent ne peut pas juger
Agent peut rédiger une description pour une photo, mais il ne sait pas si elle montre votre produit, votre équipe ou simplement une ambiance. Il ne peut pas savoir si cinq boutons « Voir » ont un sens quand un lecteur d’écran les énumère, ni si votre texte est clair pour une personne qui lit le français comme langue seconde. Relisez vous-même les descriptions d’images et les textes de liens chaque fois que vous ajoutez du contenu. Le second regard de l’IA, proposé en option par ibin, les note de 1 à 5 pour vous indiquer par où commencer, mais c’est une personne qui tranche.
Voir aussi la présentation pour les créateurs de sites par IA et les guides de correction, par exemple sur les champs sans étiquette et les titres de page.
Vérifiez votre application Replit
Publiez votre application avec un accès public et vérifiez gratuitement une page avec ibin. Copiez les instructions de chaque problème dans Replit Agent, republiez et vérifiez à nouveau jusqu’à ce que les problèmes urgents aient disparu.
Voyez où en est votre site
Vérifiez gratuitement une page, sans compte. Vous recevez une liste claire de ce qu’il faut corriger en premier, avec des images de l’endroit où se trouve chaque problème.