Bolt, conçu par StackBlitz, crée des sites et des applications à partir d’une conversation sur bolt.new. Il écrit le code, installe ce qu’il faut et affiche en quelques minutes un aperçu en direct à côté de la discussion. Comme tout créateur IA, il suit votre demande de près : si l’accessibilité n’en fait pas partie, le résultat peut sembler fini tout en restant difficile à utiliser au clavier ou avec un lecteur d’écran (un logiciel qui lit l’écran à voix haute). Ce guide montre ce que Bolt génère, quels problèmes surveiller, où placer des instructions pour que Bolt les suive à chaque modification et comment publier puis vérifier le résultat.
Ce que Bolt construit
Si vous ne précisez rien, Bolt démarre généralement un projet avec React (une façon très répandue de construire des pages web), Vite et TypeScript, mis en forme avec Tailwind CSS et avec les icônes du jeu Lucide. Vous pouvez aussi demander d’autres frameworks, comme Next.js, Astro, Vue ou Svelte. Si votre projet a besoin d’une base de données ou de connexions, Bolt Cloud les fournit sur Supabase, sans compte séparé.
Bolt fait tourner votre projet dans votre propre navigateur, grâce à une technique de StackBlitz appelée WebContainers. C’est pour cela que l’aperçu apparaît si vite. Cela veut aussi dire que l’aperçu de l’éditeur n’existe que sur votre ordinateur, ce qui compte au moment de vérifier (voir plus bas).
Les problèmes fréquents
Ces schémas reviennent souvent dans les sites générés. Ce ne sont pas des défauts de chaque projet Bolt, et des instructions claires en évitent la plupart.
- Des menus et fenêtres faits maison. La configuration par défaut de Bolt limite les paquets supplémentaires : menus, listes déroulantes et boîtes de dialogue sont souvent écrits de zéro au lieu de venir d’une bibliothèque de composants éprouvée. Ces versions maison oublient souvent le clavier : Échap ne les ferme pas, ou Tab passe derrière une boîte de dialogue ouverte.
- Des boutons réduits à une icône. Boutons de menu, de fermeture, de recherche ou de réseaux sociaux avec une icône Lucide et sans nom. Un lecteur d’écran annonce seulement « bouton ».
- Des photos d’illustration mal décrites. Bolt insère souvent des liens vers des photos libres de droits pour remplir une page. Leur texte alternatif, la description qu’un lecteur d’écran lit à la place de l’image, manque souvent ou reste vague, comme « hero image ».
- Du texte sur des dégradés et des photos. Les grands bandeaux d’accueil avec du texte blanc sur une photo claire ou un dégradé vif passent souvent sous le contraste minimal.
- Des cartes et des blocs cliquables. Une carte qui réagit au clic de souris sans être un vrai lien ou un vrai bouton reste inaccessible avec la touche Tab.
- Des champs avec un simple placeholder, et des erreurs de formulaire signalées uniquement en rouge, sans texte qui explique quoi corriger.
Où placer des instructions permanentes
Bolt appelle ses instructions permanentes Knowledge. Elles accompagnent vos demandes : vous n’écrivez vos règles d’accessibilité qu’une fois.
- La knowledge du projet s’applique à un seul projet. Cliquez sur l’icône d’engrenage en haut au centre de l’écran, choisissez All project settings, puis Knowledge dans le menu de gauche. La documentation de Bolt décrit ce chemin.
- La knowledge de vos paramètres personnels s’applique à tous vos projets. Placez-y les règles que vous voulez partout, comme votre bloc d’accessibilité, et gardez la knowledge du projet pour les couleurs de marque et le contenu.
Les projets plus anciens affichent parfois encore un « project prompt » ou un fichier .bolt/prompt. Il joue le même rôle : ajoutez-y le bloc si votre projet en a un. Les noms de menus changent de temps en temps : cherchez « Knowledge » si le chemin ci-dessus a bougé.
Avant une grosse modification, vous pouvez utiliser le Plan mode pour demander à Bolt de passer votre projet en revue selon ces règles sans encore toucher au code.
Instructions pour Bolt
Collez ce texte dans la knowledge du projet ou dans celle de vos paramètres personnels. Adaptez la langue si votre site n’est pas en français.
Règles d’accessibilité pour chaque modification (objectif : WCAG 2.2 niveau AA) : - Utilise du HTML sémantique : header, nav, main, footer, un vrai <button> pour les actions et un vrai <a> pour les liens. Ne mets jamais onClick sur un div, un span ou une carte. Si une carte entière est cliquable, place un vrai lien à l’intérieur. - Menus, listes déroulantes, onglets et boîtes de dialogue fonctionnent au clavier : Tab, Entrée, Espace, flèches là où on les attend, Échap pour fermer. Les boîtes de dialogue reçoivent le focus, le gardent et le rendent à la fermeture. Utilise pour cela une bibliothèque de composants accessibles éprouvée si une version maison n’est pas fiable. - Chaque bouton ou lien réduit à une icône (Lucide) reçoit un aria-label dans la langue du site, par exemple "Ouvrir le menu". L’icône elle-même est aria-hidden. - Chaque image reçoit un texte alternatif qui décrit son rôle sur cette page, jamais "image" ni un nom de fichier. Les images décoratives ont alt="". Liste-moi les photos d’illustration pour que je les relise. - Le contraste du texte est d’au moins 4,5:1, 3:1 pour les grands textes. Le texte sur photo ou dégradé reçoit un fond uni ou assombri. - Chaque champ de formulaire a une étiquette visible. Les erreurs apparaissent en texte à côté du champ, pas seulement en couleur. - Garde un style de focus bien visible sur chaque élément interactif. - Mets lang="fr" sur l’élément html et donne à chaque page un titre unique. Un seul h1 par page, titres dans l’ordre. - Respecte prefers-reduced-motion pour les animations.
Prompts de suivi pour les problèmes courants
Après une vérification, demandez une correction à la fois. Remplacez les parties entre crochets.
- Menus et boîtes de dialogue : « [Le menu mobile] ne fonctionne pas au clavier. Fais-le s’ouvrir et se fermer avec Entrée et Échap, place le focus dedans à l’ouverture et ramène-le sur le bouton du menu à la fermeture. »
- Boutons-icônes : « Donne à chaque bouton réduit à une icône dans [l’en-tête] un nom clair en français qui dit ce qu’il fait. Ne change pas leur apparence. »
- Photos d’illustration : « Liste chaque image de [la page d’accueil] avec son texte alternatif actuel. Propose une description adaptée à son rôle sur cette page et attends mon accord. »
- Texte sur image : « Le texte blanc du [bandeau d’accueil] manque de contraste. Ajoute un voile sombre ou un fond uni derrière jusqu’à atteindre au moins 4,5:1. »
- Cartes cliquables : « Je n’atteins pas [les cartes de services] avec la touche Tab. Remplace la fonction de clic sur la carte par un vrai lien autour du titre. »
Publier et vérifier
L’aperçu de l’éditeur Bolt tourne dans votre propre navigateur : ibin ne peut pas l’atteindre. Il vous faut d’abord une adresse publique.
- Publiez. Cliquez sur Publish en haut à droite. Bolt héberge le site pour vous à une adresse en bolt.host. Vous pouvez aussi connecter Netlify si vous préférez y héberger votre site.
- Vérifiez la page avec ibin. Commencez par la page d’accueil, puis votre formulaire le plus important.
- Collez la correction dans Bolt. Chaque problème du rapport a un bouton « Copier les instructions pour un outil d’IA ». Collez le résultat dans la discussion Bolt. Il demande une correction dans le site lui-même.
- Republiez et revérifiez. Les modifications n’arrivent à l’adresse publique qu’après publication.
- Vérifiez davantage 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 vérifications automatiques trouvent environ un tiers à la moitié des problèmes. Faites donc aussi le test clavier en dix minutes. Pour les menus et fenêtres faits maison, ce test en dit plus que n’importe quel rapport.
Ce que Bolt ne peut pas juger
Bolt peut ajouter une description à une photo d’illustration, mais il ne sait pas si cette photo a sa place sur votre page, ni ce qu’elle doit dire au visiteur. Il ne peut pas juger si « En savoir plus » se comprend quand un lecteur d’écran énumère tous les liens d’une page, ni si votre texte se lit facilement. Relisez vous-même les descriptions d’images et les textes de liens à chaque ajout de contenu. Le second regard de l’IA, proposé en option par ibin, les note de 1 à 5 pour vous montrer par où commencer, mais c’est une personne qui tranche.
Pour la démarche générale, valable dans tous les outils, consultez la vue d’ensemble pour les créateurs IA. Les guides de correction expliquent chaque problème en langage clair, par exemple les descriptions d’images et les textes de liens.
Vérifiez votre site Bolt
Publiez votre projet et vérifiez gratuitement une page avec ibin. Copiez les instructions de chaque problème dans Bolt, republiez et revérifiez 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.