• CODE
  • NAV
  • VISUEL
  • HUMAIN

Auditer l'accessibilité des composants avec votre IA

Connectez votre IA à votre base de code pour effectuer des vérifications automatisées selon les normes d'accessibilité. Elle détecte les erreurs de balisage et de contraste sans que vous ayez à scanner chaque composant manuellement.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment auditer l'accessibilité des composants avec mon IA ?

Votre IA utilise l'outil validate_accessibility pour scanner votre code à la recherche d'erreurs de HTML sémantique, de pièges au clavier et de défauts de contraste. Vous obtenez une liste précise des violations à corriger. Voici comment lancer ces vérifications.

Le récapitulatif des problèmes.

Résultats de l'audit

L'IA catégorise chaque résultat pour que vous sachiez quoi corriger en priorité.

CODE

Erreurs de balisage

L'IA identifie les labels ARIA manquants ou les structures sémantiques incorrectes. Vous recevez les lignes de code exactes qui ne sont pas conformes.

NAV

Problèmes de navigation

Elle signale les composants inaccessibles via la touche Tab ou présentant des pièges de focus. Cela garantit une navigation logique.

VISUEL

Défauts de contraste

L'outil détecte le texte trop clair sur un fond peu contrasté. Vous obtenez les codes hexadécimaux qui ne respectent pas les normes WCAG.

HUMAIN

Révision manuelle requise

Certaines questions d'accessibilité liées à la logique nécessitent un test humain. L'IA signale ces cas particuliers pour votre validation finale.

Le flux

Ce que fait votre IA une fois le code reçu.

L'IA prend en charge l'analyse lourde et la reconnaissance de motifs.

  1. Scanner le balisage

    L'IA inspecte la structure HTML pour s'assurer que les éléments comme les boutons et les champs de saisie utilisent les bonnes balises.

    validate_accessibility

  2. Vérifier la navigation

    Elle simule l'interaction au clavier pour trouver les éléments inaccessibles ou ceux qui perdent le focus de manière inattendue.

    validate_accessibility

  3. Analyser le contraste

    L'agent calcule le rapport de luminance entre la couleur du texte et celle du fond.

    validate_accessibility

  4. Signaler les régressions

    Elle compare les résultats actuels aux passages précédents pour mettre en évidence les nouveaux bugs d'accessibilité.

    validate_accessibility

Essayez

Copiez ces commandes pour commencer.

Utilisez ces prompts pour lancer un audit immédiatement.

Points de départ

Remplacez les chemins de fichiers ou les noms de dépôts par les emplacements réels de votre projet.

WCAG 2.2 Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — WCAG 2.2 capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopier
{
  "mcpServers": {
    "accessibility-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp"
    }
  }
}
Copiez dans le chat04

  • Lance un audit d'accessibilité sur les composants dans ./src/components/ui.

  • Vérifie le contraste des couleurs des boutons dans mon fichier de tableau de bord principal.

  • Audite la navigation au clavier pour le composant modal dans ce dépôt.

  • Trouve les erreurs de HTML sémantique dans le code de la barre de navigation.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Commencez ici

Connectez Accessibility Prover une fois, puis interrogez.

Liez le MCP une seule fois. Vos identifiants restent cryptés et vous pouvez commencer vos audits via votre client IA habituel immédiatement.

Connecter Accessibility Prover à votre IA

FAQ

Fonctionnement de la tâche

  • 01

    L'IA peut-elle corriger le code pour moi ?

    Non. L'IA identifie les erreurs et vous indique où elles se trouvent, mais vous devez appliquer les corrections manuellement dans votre code.

  • 02

    Vérifie-t-elle la compatibilité avec les lecteurs d'écran ?

    Oui, en vérifiant la présence des attributs ARIA et des balises HTML sémantiques indispensables aux lecteurs d'écran.

  • 03

    L'IA peut-elle supprimer mes fichiers ?

    Non. Ce MCP a uniquement la permission de lire et de valider votre code. Il ne peut ni modifier ni supprimer de fichiers.

  • 04

    Détectera-t-elle absolument tous les problèmes d'accessibilité ?

    Non. Bien qu'elle détecte de nombreuses défaillances techniques courantes, elle ne remplace pas un audit humain réalisé avec des technologies d'assistance.

  • 05

    Comment sait-elle si mes couleurs sont incorrectes ?

    Elle utilise l'outil validate_accessibility pour calculer les ratios de contraste de votre CSS et de vos styles inline.

  • D'autres questions sur Accessibility Prover ? La page du connecteur y répond. Voir toutes les capacités du connecteur Accessibility Prover

Connectez WCAG 2.2 à Claude, Cursor, ChatGPT et d'autres