v0 est le créateur de sites par IA de Vercel : vous décrivez une page ou une application dans une discussion, et v0 écrit le code, affiche un aperçu en direct et met le résultat en ligne. Le code est moderne et soigné, mais v0 construit ce que vous demandez. Si l’accessibilité ne fait pas partie de la demande, les mêmes problèmes reviennent sans cesse. Ce guide montre ce qu’il faut surveiller, comment donner à v0 des instructions permanentes et comment vérifier le site publié.
Ce que construit v0
D’après la FAQ de v0, v0 utilise Next.js, React, TypeScript, Tailwind CSS et shadcn/ui. React est une façon très répandue de construire des pages web, Next.js prépare ces pages sur le serveur et Tailwind CSS les met en forme avec de courts noms de classes. shadcn/ui est une collection de composants prêts à l’emploi, comme des menus, des fenêtres de dialogue et des onglets, construits sur une bibliothèque appelée Radix.
C’est une bonne nouvelle : les fenêtres, listes déroulantes et onglets de shadcn/ui fonctionnent au clavier et transmettent les bonnes informations aux lecteurs d’écran (logiciels qui lisent l’écran à voix haute). En revanche, tout ce que v0 construit de zéro, comme une grille de cartes sur mesure ou une bannière animée, dépend de vos instructions.
Les problèmes fréquents
Ces schémas reviennent régulièrement. Des instructions claires en évitent la plupart.
- Des boutons réduits à une icône, sans nom. Les maquettes générées utilisent souvent de petites icônes pour le menu, la recherche, la fermeture ou les réseaux sociaux. Sans nom dans le code, un lecteur d’écran annonce seulement « bouton ».
- Du texte gris clair trop peu contrasté. Le thème par défaut utilise un gris atténué pour le texte secondaire. Sur fond blanc ou sur des cartes gris clair, il passe souvent sous le contraste minimum.
- La mauvaise langue de page. Le fichier principal de mise en page définit la langue une seule fois, généralement en anglais. Un site en français qui annonce encore l’anglais est lu avec un accent anglais.
- Le même titre sur chaque page. Le titre de page s’affiche dans l’onglet du navigateur et c’est la première chose que lit un lecteur d’écran. Si vous ne le demandez pas, les pages partagent souvent un titre générique.
- Des cartes cliquables. Une carte de tarif ou de produit qui réagit au clic de souris sans être un vrai lien ou un vrai bouton reste hors de portée de la touche Tab.
- Beaucoup de mouvement. Les apparitions en fondu et les sections qui glissent font soigné, mais peuvent donner des vertiges à certaines personnes.
- Des descriptions d’images génériques. Quand vous remplacez une image provisoire par une vraie photo, la description (texte alternatif) reste souvent vague.
Où placer les instructions permanentes
v0 appelle ses instructions permanentes Instructions. Elles sont enregistrées dans votre compte et peuvent être activées dans n’importe quelle discussion. La documentation de v0 explique comment en créer une :
- Cliquez sur le bouton + dans la barre de saisie.
- Sous Instructions, choisissez New Instruction.
- Donnez-lui un Title, par exemple « Accessibilité », et collez le bloc ci-dessous dans Rule.
- Cliquez sur Add.
Pour l’utiliser, cliquez de nouveau sur + et cochez l’instruction. Une instruction cochée s’applique à chaque message jusqu’à ce que vous la décochiez : vérifiez qu’elle l’est toujours quand vous ouvrez une nouvelle discussion. Les menus de v0 évoluent souvent ; cherchez « Instructions » si les étapes ci-dessus ont changé. Pour un grand nettoyage, cochez aussi l’instruction intégrée Plan Mode : v0 expose alors son plan et attend votre accord.
Instructions pour v0
Collez ce bloc dans une nouvelle instruction. Adaptez le code de langue si votre site n’est pas en français.
Règles d’accessibilité pour chaque modification (objectif : WCAG 2.2 niveau AA) : - Utilise des éléments sémantiques : header, nav, main, footer. Utilise Link de next/link pour la navigation et Button pour les actions. Ne mets jamais onClick sur une div, un span ou une Card. Si toute une carte est cliquable, place un vrai lien à l’intérieur. - Chaque Button réduit à une icône (size="icon", lucide-react) reçoit un aria-label dans la langue du site, par exemple "Ouvrir le menu". Ajoute aria-hidden sur l’icône. - Chaque Input, Select et Textarea a un Label visible relié par htmlFor. 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. Vérifie text-muted-foreground sur chaque fond, y compris les cartes, les dégradés et le mode sombre. - Garde l’indicateur de focus visible (classes focus-visible) sur tous les éléments interactifs. - Dans app/layout.tsx, définis <html lang="fr">. Donne à chaque page son propre titre via l’export metadata. - Un seul h1 par page, des titres dans l’ordre. Ne choisis jamais un niveau de titre pour sa taille. - 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. - Chaque next/image a un texte alternatif qui décrit sa fonction ; les images décoratives reçoivent alt="". - Place les animations dans motion-safe: ou vérifie prefers-reduced-motion. Pas de carrousel automatique sans bouton pause. - 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.
- Boutons à icône : « Donne à chaque bouton réduit à une icône dans [l’en-tête et le pied de page] un nom clair en français qui dit ce qu’il fait. Ne change pas leur apparence. »
- Contraste : « Le texte secondaire gris manque de contraste sur [les cartes de tarifs]. Fonce la couleur du texte atténué dans le thème jusqu’à atteindre au moins 4.5:1 sur chaque fond où elle est utilisée, en mode clair et sombre. Donne-moi les nouvelles valeurs. »
- Langue et titres : « Définis la langue de la page sur [français, fr] dans la mise en page principale et donne à chaque page un titre propre et descriptif. »
- Cartes cliquables : « Je n’atteins pas [les cartes de projet] avec la touche Tab. Retire le clic de la carte et place un vrai lien sur le titre, pour que la carte fonctionne au clavier. »
- Mouvement : « Désactive les animations [de la bannière et au défilement] quand le visiteur a demandé à son appareil de réduire les animations. »
Si vous changez des couleurs dans le mode visuel Design de v0, vérifiez à nouveau le contraste.
Publier et vérifier
ibin vérifie des pages sur le web public : il lui faut une adresse que tout le monde peut ouvrir. v0 publie sur Vercel.
- Publiez. Choisissez Publish en haut de la discussion. La première fois, v0 demande un nom de projet, qui peut voir le site et un domaine. L’adresse par défaut se termine par vercel.app.
- Vérifiez que l’adresse est publique. Pendant la publication, choisissez une visibilité qui permet à tout le monde d’ouvrir le site. Vercel peut aussi protéger les adresses d’aperçu pour que seuls les membres connectés de l’équipe les voient ; c’est la Deployment Protection. Un outil de vérification ne peut pas se connecter : vérifiez l’adresse de production publique, ou une adresse d’aperçu sans protection.
- Vérifiez la page avec ibin. Commencez par la page d’accueil, puis votre formulaire le plus important.
- Collez la correction dans v0. Chaque problème du rapport a un bouton « Copier les instructions pour un outil d’IA ». Collez le résultat dans la discussion v0 ; il demande une correction dans le site lui-même.
- Publiez les modifications et vérifiez à nouveau. Ouvrez Publish et choisissez Publish Changes. Les modifications n’arrivent sur l’adresse publique qu’après publication.
- 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 après des modifications.
Les vérifications automatiques trouvent environ un tiers à la moitié des problèmes. Faites aussi le test clavier en dix minutes : posez la souris et parcourez le menu avec la touche Tab, ouvrez et fermez une fenêtre de dialogue et envoyez votre formulaire.
Ce que v0 ne peut pas juger
v0 peut décrire une photo comme « personne devant un ordinateur portable », mais il ne sait pas qu’il s’agit de votre responsable du service client. Il ne peut pas savoir si trois liens « En savoir plus » ont encore un sens quand un lecteur d’écran énumère tous les liens d’une page, ni si votre texte est facile à suivre 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 boutons sans nom et le contraste des couleurs.
Vérifiez votre site v0
Publiez votre projet et vérifiez gratuitement une page avec ibin. Copiez les instructions de chaque problème dans v0, publiez les modifications 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.