• CODE
  • NAV
  • VISUAL
  • HUMAN

Barrierefreiheit prüfen mit der KI und dem Accessibility Prover

Verbinden Sie Ihre KI mit Ihrem Code, um automatisierte Checks gegen Barrierefreiheits-Standards durchzuführen. Die KI findet Fehler im Markup und bei Kontrasten, ohne dass Sie jede Komponente manuell scannen müssen.

Fragen Sie die KI zu dieser Seite

Kurzantwort

Wie kann ich die Barrierefreiheit mit meiner KI prüfen?

Ihre KI nutzt das Tool validate_accessibility, um Ihren Code auf semantische HTML-Fehler, Tastaturfallen und Kontrastprobleme zu scannen. Sie erhalten eine klare Liste der Verstöße, die behoben werden müssen. Diese Übersicht zeigt Ihnen, wie Sie diese Prüfungen durchführen.

Wo jedes Problem landet.

Prüfungsergebnisse

Die KI kategorisiert alle Funde, damit Sie wissen, was Sie zuerst beheben müssen.

CODE

Markup-Fehler gefunden

Die KI identifiziert fehlende ARIA-Labels oder fehlerhafte semantische Strukturen. Sie erhalten die exakten Codezeilen, die nicht konform sind.

NAV

Probleme bei der Navigation

Es werden Komponenten markiert, die nicht per Tab-Taste erreichbar sind oder Fokus-Fallen aufweisen. Das hilft Ihnen, die Navigation logisch zu halten.

VISUAL

Kontrastfehler

Das Tool erkennt Texte, die sich zu wenig vom Hintergrund abheben. Sie erhalten die spezifischen Hex-Codes, die gegen WCAG-Standards verstoßen.

HUMAN

Manuelle Prüfung nötig

Einige komplexe Barrierefreiheits-Probleme erfordern einen menschlichen Test. Die KI markiert diese Grenzfälle für Ihre abschließende Abnahme.

Der Ablauf

Was Ihre KI tut, sobald der Code vorliegt.

Die KI übernimmt die Schwerstarbeit beim Scannen und beim Abgleich von Mustern.

  1. Markup scannen

    Die KI untersucht Ihre HTML-Struktur, um sicherzustellen, dass Elemente wie Buttons und Inputs die korrekten Tags verwenden.

    validate_accessibility

  2. Navigation prüfen

    Sie simuliert die Tastatur-Interaktion, um Elemente zu finden, die nicht erreichbar sind oder unerwartet den Fokus verlieren.

    validate_accessibility

  3. Kontrast analysieren

    Der Agent berechnet das Luminanzverhältnis zwischen Text- und Hintergrundfarben.

    validate_accessibility

  4. Regressions melden

    Die KI vergleicht aktuelle Ergebnisse mit vorherigen Durchläufen, um neue Barrierefreiheits-Fehler aufzuzeigen.

    validate_accessibility

Probieren Sie es

Kopieren Sie diese Befehle zum Start.

Nutzen Sie diese Prompts, um sofort eine Prüfung zu starten.

Startpunkte

Ersetzen Sie die Dateipfade oder Repository-Namen durch die tatsächlichen Pfade Ihres Projekts.

WCAG 2.2 Connector

Alles bereit. Wählen Sie Ihren MCP-Client und folgen Sie den Einrichtungsschritten.

Connector-Linkhttps://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp

Claude Desktop

Folgen Sie den Schritten unten, um sich in Sekunden zu verbinden.

  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.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "accessibility-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_Z4jgihFSGVmVid2ldA4mxeRfY0ki8hZy1vHx94N4/mcp"
    }
  }
}
In den Chat kopieren04

  • Führe eine Barrierefreiheits-Prüfung für die Komponenten in ./src/components/ui durch.

  • Prüfe den Farbkontrast der Buttons in meiner Haupt-Dashboard-Datei.

  • Prüfe die Tastaturnavigation für die Modal-Komponente in diesem Repo.

  • Suche nach semantischen HTML-Fehlern im Code der Navigationsleiste.

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

Starten Sie hier

Einmal mit Accessibility Prover verbinden, dann fragen.

Sie müssen den MCP nur einmal verknüpfen. Ihre Zugangsdaten bleiben verschlüsselt und Sie können sofort über Ihren bevorzugten KI-Client mit der Prüfung beginnen.

Accessibility Prover mit Ihrer KI verbinden

FAQ

So funktioniert die Aufgabe

  • 01

    Kann die KI den Code für mich reparieren?

    Nein. Die KI identifiziert die Fehler und zeigt Ihnen deren Position, aber Sie müssen die Korrekturen manuell in Ihrem Code vornehmen.

  • 02

    Wird die Kompatibilität mit Screenreadern geprüft?

    Ja, indem die KI prüft, ob die korrekten ARIA-Attribute und semantischen HTML-Tags vorhanden sind, auf die Screenreader angewiesen sind.

  • 03

    Kann die KI meine Dateien löschen?

    Nein. Dieser MCP hat nur die Berechtigung, Ihren Code zu lesen und zu validieren. Er kann keine Dateien verändern oder löschen.

  • 04

    Wird jedes einzelne Barrierefreiheits-Problem erkannt?

    Nein. Die KI findet viele gängige technische Fehler, kann aber eine manuelle Prüfung durch einen Menschen mit assistiven Technologien nicht ersetzen.

  • 05

    Woher weiß die KI, ob meine Farben falsch sind?

    Sie nutzt das Tool validate_accessibility, um die Kontrastverhältnisse Ihrer CSS- und Inline-Styles zu berechnen.

  • Weitere Fragen zum Accessibility Prover? Die Connector-Seite liefert Antworten. Alle Funktionen des Accessibility Prover Connectors sehen

Verbinde WCAG 2.2 mit Claude, Cursor, ChatGPT & mehr