Rendre le site utilisable par les personnes en situation de handicap
Corriger les barrières pratiques qui empêchent les personnes de lire, de naviguer ou de remplir des formulaires avec un clavier ou une technologie d'assistance.
Quand l'utiliser
Avant le lancement et après tout changement majeur de conception, de navigation ou de formulaire.
Avant de commencer
- Contenu et images réels de la page ; un texte alternatif significatif ne peut pas être rédigé honnêtement à partir d'espaces réservés vides.
- Le flux utilisateur le plus important, comme soumettre une demande, réserver ou finaliser une commande.
- Toute légende ou transcription dont vous disposez déjà pour l'audio et la vidéo.
- Du temps pour effectuer les tests manuels de clavier et de zoom indiqués dans le résultat attendu.
Le prompt
Ces prompts fonctionnent mieux en anglais — collez-les tels quels, même sur les pages traduites.
Review and improve the entire site for people with disabilities without changing its purpose or visual identity. A screen reader is software that reads a page aloud and lets someone navigate by headings, links and controls. Make every page understandable in that order: use one clear main heading, sensible subheadings, meaningful link text, real buttons for actions, and labels that say what every form field does. Make every menu, link, button, form, popup and close control usable with only a keyboard. Keyboard focus means the item currently selected by the keyboard: it must have a clearly visible outline and move in a sensible order. Do not trap someone inside a popup, and return focus to the right place when it closes. Check text, button, form and error-message contrast in every normal, hover, selected and disabled state. Never use color alone to communicate success, warning, error or selection. Keep text readable when a visitor zooms to 200 percent and on a narrow phone. Add useful alt text, which is a short description read aloud instead of an image, to images that carry information. Use [REAL DESCRIPTION OR PURPOSE] where my input is needed. Mark purely decorative images so the screen reader skips them. Do not invent details about people, products, food, places or results that are not visibly present. Give every form field a persistent label, connect each error to the field that caused it, and move focus to a clear error summary after a failed submission. Add captions or a written transcript for [VIDEO OR AUDIO], and respect a visitor's reduced-motion setting, which is a device preference asking sites to limit movement. Keep the style [CURRENT BRAND FEELING] with visible focus states that belong in the design. Test the main navigation and [MOST IMPORTANT USER FLOW] using only the keyboard, then give me a plain-language list of what you fixed, what I still need to describe or caption, and what requires a human test.
Vous construisez déjà ? Collez ceci dans votre projet. Vous partez de zéro ? Ouvrez un compte gratuit sur un outil compatible ci-dessous.
Créez-le sur
Ce que cela crée
- Une structure de page, un texte de lien et des étiquettes de formulaire clairs
- Un accès complet au clavier avec un focus visible
- Un contraste plus fort et des indicateurs d'état autres que la couleur
- Un texte alternatif honnête et des images décoratives correctement ignorées
- De meilleures erreurs de formulaire, une prise en charge des mouvements réduits et une liste de vérification humaine
Vérifiez que ça a marché
Collez le prompt, attendez la fin de la construction, puis vérifiez ceci — en langage simple, sans contrôle technique :
- En partant du haut d'une page, vous pouvez atteindre et utiliser le menu, chaque contrôle principal et le flux complet important en appuyant sur Tab, Maj+Tab, Entrée et Espace
- Vous pouvez toujours voir quel élément est sélectionné par le clavier, et aucune fenêtre contextuelle ne vous bloque
- Avec un zoom à 200 %, le texte reste lisible et les commandes ne se chevauchent pas
- Si vous éteignez l'écran ou détournez le regard, la page reste compréhensible lorsqu'elle est lue par un lecteur d'écran
- Les erreurs de formulaire nomment le problème et vous ramènent au champ à corriger
- Chaque image significative a une description précise, et les images décoratives ne sont pas lues à haute voix
Il manque quelque chose ? C'est normal — demandez-le dans un court message de suivi plutôt que de relancer tout le prompt.
Étapes suivantes
Tester un flux complet au clavier
Après la vérification générale de l'accessibilité
Test [USER FLOW, e.g. choose a service and submit a booking] from beginning to end using only the keyboard. Fix anything that cannot be reached, activated, understood or escaped. Do not use a mouse during the test. Report each step in plain language and confirm where focus moves after errors and success.
Vous saurez que ça a marché quand : Le flux complet peut être effectué sans souris et le parcours de tabulation est documenté.
Examiner les descriptions d'images avec moi
Lorsque le site contient de nombreuses photos, diagrammes ou images de produits importants
List every meaningful image on [PAGE OR SECTION] with its current alt text and the reason the image is there. Flag descriptions that are empty, generic, repetitive or that claim details not visible in the image. Do not rewrite the flagged items until I provide [THE REAL DESCRIPTION OR PURPOSE].
Vous saurez que ça a marché quand : Vous recevez une évaluation honnête et une courte liste de descriptions que vous seul pouvez fournir.
Ajouter des sous-titres et des transcriptions
Avant de publier des pages contenant de la parole ou des sons importants
Add synchronized captions to [VIDEO] using [CAPTION FILE OR VERIFIED TEXT], and place a readable transcript near [VIDEO OR AUDIO]. Include spoken words and important non-speech sounds without inventing anything. Make both usable on a phone and by keyboard.
Vous saurez que ça a marché quand : Les visiteurs peuvent suivre le média sans le son et lire les mêmes informations sous forme de texte.
Attention à
- Un score automatisé n'est pas une preuve. Les scanners ne détectent pas les ordres de lecture confus, les textes alternatifs trompeurs et les flux épuisants à utiliser. La solution consiste en un court test manuel du clavier et du lecteur d'écran sur les pages réelles.
- Le texte alternatif généré peut inventer des détails en toute confiance. Décrivez uniquement ce qui est visible et pertinent pour l'objectif de l'image ; laissez une tâche clairement marquée pour le propriétaire lorsque le générateur ne peut pas savoir.
- Supprimer les contours de focus rend le site inutilisable au clavier. Remplacez une valeur par défaut inesthétique par un contour clair adapté à la marque, mais ne le supprimez jamais.
- Le contraste doit couvrir chaque état. Le texte de substitution, les boutons désactivés, les onglets sélectionnés et les erreurs en ligne sont souvent oubliés même lorsque le texte du corps principal est conforme.
- Les widgets d'accessibilité complémentaires, souvent appelés « overlays », ne remplacent pas de manière fiable la correction du site. Ils peuvent ajouter des commandes tout en laissant les barrières sous-jacentes en place, et ils peuvent en créer de nouvelles.
Notes par plateforme
Les trois plateformes principales peuvent mettre en œuvre ces changements, mais aucun générateur ne peut prouver l'accessibilité uniquement à partir du code généré. L'examen du site publié de Lovable peut signaler les problèmes d'accessibilité courants, tandis que Base44 et v0 peuvent également appliquer des correctifs de code et de conception lorsqu'on leur demande explicitement ; chaque plateforme nécessite toujours des tests au clavier, au zoom et au lecteur d'écran effectués par une personne. Les contrôles automatisés peuvent détecter l'absence de texte alternatif mais ne peuvent pas savoir si la description est honnête ou utile.
Dépensez moins de crédits
Chaque plateforme vous facture le travail que fait son IA — la habitude la moins chère est donc de réfléchir avant de construire. Ces six règles éliminent l'essentiel du gaspillage, quelle que soit la plateforme.
- Planifiez d'abord dans un chat gratuit. Esquissez le tout dans ChatGPT, Claude ou Gemini — pages, fonctionnalités, ce que chaque formulaire collecte, l'apparence voulue. Réfléchir là-bas est gratuit ; réfléchir dans un builder est facturé.
- Partez d'un prompt écrit, pas d'une phrase. « Fais-moi un site » est la phrase la plus chère de la construction avec l'IA. Un premier prompt complet — comme ceux de ce site — évite des dizaines de corrections.
- Ne soyez pas paresseux sur les détails. Chaque détail omis revient en correction payante. Nom de l'entreprise, couleurs, chaque page, chaque champ de formulaire, ce qui se passe après l'envoi — mettez tout dans le premier prompt.
- Ensuite, un changement par message. « Corrige l'en-tête, et le formulaire, et les couleurs » crée un enchevêtrement plus coûteux à démêler que ce qu'il a économisé.
- Bloqué ? Arrêtez de rustiner. Si la même correction échoue environ trois fois, n'en envoyez pas une quatrième — décrivez plutôt l'état final souhaité de toute la section dans un nouveau message.
- Commencez gratuitement. Passez au payant quand il vous en faut plus. Utilisez le quota gratuit pour créer et explorer votre première version. Passez au payant quand vous avez besoin de plus d’utilisation ou de fonctionnalités payantes, et vérifiez le coût des services connectés avant le lancement.
Les prompts de cette page sont écrits pour faire l'essentiel de ce travail à votre place — c'est tout leur intérêt.
Lire le guide completPlaybooks associés
Prompts associés
Fait partie de ces kits
Dernière vérification: 2026-07-27