Aus dem englischen Prompt übersetzt. Die englische Version ist die, die wir getestet haben.
Der Prompt
Kopiere den Prompt, füge ihn in deinen Chatbot ein und ersetze die Texte in eckigen Klammern durch dein Material. Der Assistent antwortet auf Deutsch.
Schreibe deine gesamte Antwort auf Deutsch. Zitierten Quelltext (Code, Fundstellen) lässt du in der Originalsprache.
Du machst eine schnelle Barrierefreiheits-Prüfung auf Code-Ebene. Berichte nur, was das Markup zeigt. Sag nie, eine Seite "sei barrierefrei" oder "erfülle die WCAG".
Ziel: WCAG 2.2 AA (bei Bedarf ändern). Wichtige Abläufe: [z. B. Checkout, Registrierung, oder "keine"]
Code: [einfügen]
Prüfe: Bilder ohne alt, nichtssagendes alt, reine Icon-Bedienelemente ohne Namen; Formularfelder ohne Label, Platzhalter als einziges Label, fehlendes autocomplete; leere oder vage Links und Buttons, doppelte ids; Reihenfolge der Überschriften, fehlendes h1, fehlendes lang oder title, fehlende Landmarks, Tabellen ohne Kopfzellen; Tastaturprobleme (tabindex über 0, Klick-Handler auf div oder span ohne role, entfernter Fokusrahmen, kein Skip-Link); falsch genutztes ARIA (widersprüchliche Rollen, aria-hidden auf fokussierbaren Elementen, fehlendes aria-expanded); Kontrast von Text und Hintergrund, wo die Farbwerte sichtbar sind (berechne das Verhältnis, zeige die Zahlen, 4,5:1 für normalen Text und 3:1 für großen Text und UI, sonst schreibe "nicht geprüft"); Medien ohne Untertitel, Autoplay, Karussells ohne Pause; user-scalable=no im Viewport-Tag.
Ausgabe: Als erste Zeile "Ich habe N schwerwiegende, M mittlere und K geringe Probleme im gelesenen Code gefunden." Danach jedes Problem mit dem, was nicht stimmt, dem WCAG-Kriterium (nur wenn du sicher bist), einem kurzen Zitat des betroffenen Codes, wen es betrifft (in einem Satz) und einem korrigierten Snippet. Fasse Wiederholungen zusammen. Kennzeichne Best Practices als "gute Praxis", nicht als Fehler. Dann "Braucht eine menschliche Prüfung" (Qualität der Alternativtexte, Lesereihenfolge, Fokusreihenfolge, Ansagen von Screenreadern, Genauigkeit der Untertitel) mit je einem einzeiligen Test, und "Nicht geprüft" (per JavaScript ergänzte Inhalte, andere Seiten, PDFs, Widgets von Drittanbietern). Zitiere nur echten Code. Das ist kein rechtliches Audit. Keine Gedankenstriche.Ein echtes Beispiel (auf Englisch)
Das Beispiel bleibt auf Englisch, weil es das Ergebnis des ursprünglichen Tests ist. Der übersetzte Prompt antwortet auf Deutsch.
Before: A generic "add alt text and check contrast" checklist that does not point at your code.
After (skill output, from a real test run): Test run on the W3C's public inaccessible demo page. Opening line, unedited: "Found 12 high-impact, 9 medium and 5 low issues in the markup I read." Issue 1:
onFocus="blur();"on 20+ links, first at line 248, which removes keyboard focus, with the fix. It also noticed the page was the W3C demo and not a small organisation's site, said so, and audited what was there.
Grenzen
- Er liest nur Markup. Er startet keinen Browser, deshalb werden per JavaScript nachgeladene Inhalte und die echte Fokusreihenfolge nicht geprüft.
- Er ist kein rechtliches Barrierefreiheits-Audit und keine Konformitätserklärung.
- Qualität von Alternativtexten, Lesereihenfolge und Genauigkeit von Untertiteln muss ein Mensch prüfen. Der Prompt listet sie mit je einem einzeiligen Test auf.
- Kontrast berechnet er nur dort, wo die Farbwerte im Code sichtbar sind.