Auditer l'accessibilité d'une interface

Analysez un écran ou un extrait HTML selon les WCAG 2.2 et obtenez une liste priorisée de problèmes avec leurs corrections. Conçu pour ChatGPT, Claude et Gemini. Il comprend 2 variables personnalisables et vous pouvez le copier gratuitement en un clic.

Intermédiaire · Texte · En attente de relecture éditoriale

Prompt

Agis comme un auditeur certifié en accessibilité web (WCAG 2.2 niveau AA). Analyse cette interface : {{interface}} Contexte d'utilisation : {{context}} Pour chaque problème trouvé, indique : - Le critère WCAG concerné (numéro et nom). - La gravité : critique, élevée, moyenne ou faible. - Qui est touché (lecteurs d'écran, clavier, basse vision, daltonisme, troubles cognitifs…). - Une correction concrète avec le code corrigé le cas échéant. Termine par : 1. Les 3 corrections à plus fort impact pour commencer. 2. Une liste de tests manuels que je dois effectuer (clavier, zoom à 200 %, lecteur d'écran). Si quelque chose ne peut pas être évalué à partir des informations fournies, dis-le au lieu de le supposer.

Exemple de résultat

L'extrait reçu ne contient que <form>…</form> : je ne peux donc pas évaluer le code réel. Pour un formulaire de paiement mobile typique, voici les points à vérifier en priorité :

Constats

1. Champs sans libellé associé

Critère : 1.3.1 Information et relations · 4.1.2 Nom, rôle et valeur
Gravité : critique · Concerne : lecteurs d'écran, handicaps cognitifs
Correction :

<label for="email">Adresse e-mail</label>
<input id="email" type="email" autocomplete="email" required>

2. Erreurs signalées uniquement par une bordure rouge

Critère : 1.4.1 Utilisation de la couleur · 3.3.1 Identification des erreurs
Gravité : élevée · Concerne : daltonisme, lecteurs d'écran
Correction : message d'erreur relié par aria-describedby et aria-invalid="true".

3. Bouton « Payer » trop petit sur mobile

Critère : 2.5.8 Taille de la cible (minimum)
Gravité : moyenne · Concerne : motricité réduite
Correction : 24 × 24 px minimum ; 44 px de haut recommandés.

Tests manuels

Finaliser l'achat au clavier uniquement (Tab, Maj+Tab, Entrée).
Zoom à 200 % sans perte de contenu.
Vérifier l'annonce des erreurs avec VoiceOver ou TalkBack…

Questions fréquentes

Que dois-je coller comme interface ?

Le HTML de la page, le code d'un composant ou une description détaillée de l'écran. Plus vous fournissez de code réel, plus les constats sont précis.

Cela remplace-t-il un audit professionnel ?

Non. Cela repère vite de nombreux problèmes courants, mais un audit de conformité formel exige des tests manuels avec des technologies d'assistance et, idéalement, avec des personnes en situation de handicap.

À quoi sert ce prompt ?

Analysez un écran ou un extrait HTML selon les WCAG 2.2 et obtenez une liste priorisée de problèmes avec leurs corrections.

Avec quels outils d'IA fonctionne-t-il ?

Il est conçu pour ChatGPT, Claude et Gemini. Nous ne l'avons pas encore vérifié sur ces outils ; les résultats peuvent donc varier de l'un à l'autre.

Comment personnaliser le prompt ?

Cliquez sur « Personnaliser » et remplissez les variables (HTML ou description et Contexte d'utilisation). Le texte se met à jour instantanément et vous pouvez ensuite le copier en un clic. Les valeurs sont stockées uniquement dans votre navigateur.

Faut-il de l'expérience pour l'utiliser ?

Il est de niveau intermédiaire : il vaut mieux connaître le sujet pour fournir un bon contexte et relire le résultat d'un œil critique.

Ce prompt est-il gratuit ?

Oui. Tous les prompts de HomeCasa Prompts sont gratuits, sans inscription ni abonnement. Vous pouvez aussi les utiliser dans des projets professionnels.

Puis-je me fier au résultat de l'IA ?

Considérez-le comme un brouillon de qualité : vérifiez toujours les données, les chiffres et les affirmations importantes avant de publier ou de prendre des décisions.

Prompts similaires

Design UI/UX

Palette de mode sombre accessible avec contrôle des contrastes WCAG

Concevez une palette de mode sombre en tokens sémantiques à partir de vos couleurs de marque, avec tableau de contrastes WCAG, corrections des échecs et code CSS prêt à l’emploi.