• KRITISCH
  • VISUELL
  • FIXES
  • MANUELL

Barrierefreiheit prüfen mit dem Tailwind Excellence Prover MCP

Verbinde deine KI mit dem Tailwind Excellence Prover, um Lücken in der Barrierefreiheit deines UI-Codes zu finden. So entdeckst du fehlende Labels oder Kontrastprobleme vor dem Deployment.

Fragen Sie die KI zu dieser Seite

Kurzantwort

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

Deine KI nutzt den Tailwind Excellence Prover, um deine Tailwind-Klassen und das HTML auf Konformität zu prüfen. Sie identifiziert fehlende ARIA-Attribute, Kontrastfehler und Probleme bei Fokus-Zuständen. Du erhältst eine präzise Liste der notwendigen Korrekturen.

Prüfergebnisse.

So werden deine Fehler kategorisiert.

Die KI ordnet jedes Ergebnis ein, damit du die Korrekturen priorisieren kannst.

KRITISCH

Barrierefreiheits-Fehler

Die KI markiert fehlende ARIA-Labels oder eine defekte Tastaturbedienung. Das sind Prioritäten, die die Nutzung deiner UI für Betroffene verhindern.

VISUELL

Kontrastverstöße

Sie prüft Tailwind-Farben gegen WCAG-Standards. Du siehst genau, welche Text- und Hintergrundkombinationen den Kontrasttest nicht bestehen.

FIXES

Code-Korrekturen

Die KI schlägt die exakten Tailwind-Klassen oder ARIA-Attribute vor, die zur Fehlerbehebung nötig sind. Nutze diese Vorschläge direkt für deinen Code.

MANUELL

Manuelle Prüfung nötig

Die KI kennzeichnet komplexe interaktive Muster, bei denen ein Mensch das Verhalten mit einem Screenreader testen muss. Diese Fälle musst du selbst verifizieren.

Der Ablauf

Was deine KI tut, sobald der Code vorliegt.

Die KI übernimmt die Schwerstarbeit beim Scannen von Klassen-Strings und Attributen.

  1. Tailwind-Klassen scannen

    Die KI analysiert deinen Komponenten-Code, um die verwendeten Tailwind-Utility-Klassen für Farben und Abstände zu finden.

    validate_tailwind_excellence

  2. ARIA-Konformität prüfen

    Sie sucht nach notwendigen Rollen und Labels, damit Screenreader deine UI-Elemente korrekt interpretieren können.

    validate_tailwind_excellence

  3. Fokus-Zustände verifizieren

    Der Agent prüft, ob deine Komponenten sichtbare Fokus-Ringe oder Umrandungen für Tastaturbenutzer besitzen.

    validate_tailwind_excellence

  4. Kontrastfehler melden

    Die KI berechnet das Kontrastverhältnis zwischen den Vordergrund- und Hintergrundfarben deiner Tailwind-Klassen.

    validate_tailwind_excellence

Probieren Sie es

Kopiere diese Vorlagen zum Start.

Nutze diese Prompts, um die Prüfung sofort auszulösen.

Startpunkte

Ersetze den Text in Klammern durch deine tatsächlichen Dateipfade oder Komponentennamen.

Tailwind Excellence Prover Connector

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

Connector-Linkhttps://edge.vinkius.com/vk_preview_FdR5Ea2fMyzzvbauD84P40uMFKV5D3exRd23L6Fl/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 — Tailwind Excellence Prover capabilities are ready to use.
Konfiguration · claude_desktop_config.jsonKopieren
{
  "mcpServers": {
    "tailwind-excellence-prover-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_FdR5Ea2fMyzzvbauD84P40uMFKV5D3exRd23L6Fl/mcp"
    }
  }
}
In den Chat kopieren04

  • Prüfe die Barrierefreiheit der Komponenten im Ordner /src/components.

  • Überprüfe diese Tailwind-Button-Komponente auf korrekte ARIA-Labels und Fokus-Zustände: [Code einfügen].

  • Scanne meine Navigationsleiste auf Kontrastverstöße mit diesen Tailwind-Klassen: [Code einfügen].

  • Überprüfe die Barrierefreiheit meines Dashboard-Layouts im aktuellen Repository.

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

Starten Sie hier

Einmal verbinden, dann fragen.

Verbinde den MCP mit einem Klick mit deinem bevorzugten Client. Deine Zugangsdaten bleiben verschlüsselt, die Einrichtung übernehmen wir.

Tailwind Excellence Prover mit deiner KI verbinden

FAQ

So funktioniert die Aufgabe

  • 01

    Kann die KI meinen Code automatisch reparieren?

    Nein. Die KI identifiziert die Probleme und schlägt die richtigen Tailwind-Klassen oder Attribute vor, aber du musst die Änderungen selbst in deinen Dateien anwenden.

  • 02

    Wird die mobile Barrierefreiheit geprüft?

    Sie prüft den Code auf Standards wie die Größe von Touch-Zielen und Kontraste, kann aber nicht physisch mit einem mobilen Gerät interagieren.

  • 03

    Werden meine Tailwind-Konfigurationen gelöscht?

    Nein. Das Tool liest deinen Code nur aus, um die Prüfung durchzuführen. Es kann deine Konfigurationsdateien weder ändern noch löschen.

  • 04

    Kann es auch Komponenten ohne Tailwind prüfen?

    Nein. Dieses spezifische Tool ist darauf ausgelegt, Tailwind CSS Utility-Klassen zu analysieren und zu validieren.

  • 05

    Wie geht es mit benutzerdefinierten Farbpaletten um?

    Es liest deine Tailwind-Konfiguration aus, um deine eigenen Farbwerte zu verstehen, und prüft diese gegen die Kontrastanforderungen.

  • Weitere Fragen zum Tailwind Excellence Prover? Die Connector-Seite liefert Antworten. Alle Funktionen des Tailwind Excellence Prover Connectors ansehen

Verbinde Tailwind Excellence Prover mit Claude, Cursor, ChatGPT & mehr