Barrierefreiheits-Prüfung
Prüfen Sie Ihren Frontend-Code auf WCAG-Konformität und Barrierefreiheit.
Prompt-Vorlage
Prüfe den folgenden [HTML/React/Vue]-Code auf Barrierefreiheit nach WCAG 2.1 AA Standards. **Zu prüfender Code:** ```[FORMAT] [CODE HIER EINFÜGEN] ``` **Prüfe systematisch:** 1. **Wahrnehmbarkeit:** - Alt-Texte für alle Bilder und Icons - Farbkontraste (mindestens 4.5:1 für Text, 3:1 für große Texte) - Textalternativen für Nicht-Text-Inhalte - Responsive Design und Zoom-Tauglichkeit 2. **Bedienbarkeit:** - Vollständige Keyboard-Navigation (Tab-Reihenfolge, Focus-Management) - Skip-Links für Hauptinhalt - Keine Tastatur-Fallen - Ausreichende Klickflächen (mindestens 44x44px) 3. **Verständlichkeit:** - Klare Formular-Labels und Fehlermeldungen - Konsistente Navigation - Vorhersagbares Verhalten 4. **Robustheit:** - Korrekte semantische HTML-Elemente - ARIA-Rollen und -Attribute wo nötig - Kompatibilität mit Screen Readern **Ausgabe:** Für jedes Problem: WCAG-Kriterium, Schweregrad, betroffener Code, Fix mit Beispiel.
Platzhalter in [eckigen Klammern] ersetzen: [HTML/React/Vue][FORMAT][CODE HIER EINFÜGEN]
So verwendest du die Vorlage
Kopiere den Prompt, ersetze die Platzhalter in eckigen Klammern durch deine Angaben und füge ihn in den KI-Assistenten deiner Wahl ein. Je genauer die Angaben, desto besser das Ergebnis.
Tipps für bessere Ergebnisse
- Geben Sie an, ob es sich um eine Web-App oder statische Seite handelt
- Erwähnen Sie Ziel-Screen-Reader (NVDA, VoiceOver, JAWS)
- Fragen Sie nach automatisierten Test-Skripten mit axe-core
- Bitten Sie um eine ARIA-Pattern-Bibliothek für häufige Komponenten
Passende offene Modelle
Die Auswahl nennt aktuelle offene Modelle als Ausgangspunkt für eigene Tests. Sie ist keine Messung für diese Vorlage.
Stichwörter: #accessibility #wcag #a11y #inclusive-design