Ein Sprachmodell gibt wieder, was in seinem Material überwiegt. Und im
Web überwiegen anklickbare div-Elemente, Platzhalter statt
Beschriftungen und Fokusrahmen, die jemand weggeräumt hat, weil sie
gestört haben. Wer nichts vorgibt, bekommt genau diesen Durchschnitt.
Die Gegenmaßnahme ist eine Textdatei im Projekt, die vor jeder Zeile Code sagt, was gilt. Unten steht sie fertig zum Kopieren.
Für wen ist dieser Artikel?
Für Entwicklerinnen und Entwickler, die mit KI-Unterstützung bauen und wollen, dass Barrierefreiheit und Auffindbarkeit von Anfang an stimmen – statt sie am Ende nachzubessern.
Warum eine Datei und nicht ein Prompt
Eine Anweisung im Gespräch gilt für dieses Gespräch. Beim nächsten Mal fängst du wieder bei null an, und deine Kollegin sowieso. Eine Datei im Projektverzeichnis gilt für jedes Gespräch, für jede Person und für jedes Werkzeug.
Die Namen unterscheiden sich je nach Werkzeug: CLAUDE.md,
AGENTS.md, .github/copilot-instructions.md,
Regeldateien im Editor.
Nützliche Tipps
Zahlen statt Adjektive. „Gut sichtbarer Fokus" ist keine Anforderung, das ist eine Hoffnung. „3 px Ring, 2 px Abstand" ist eine Anforderung: prüfbar, wiederholbar, nicht interpretierbar. Dasselbe beim Zielniveau – nicht „barrierefrei", sondern WCAG 2.2 Stufe AA.
Verbote wirken besser als Wünsche. Die WebAIM Million findet Jahr für Jahr auf über 90 Prozent der geprüften Startseiten automatisch erkennbare WCAG-Verstöße. Das ist die Datenlage, aus der gelernt wurde. Gegen diese Wahrscheinlichkeit hilft „Kein Platzhalter als Beschriftung" mehr als „bitte barrierefreie Formulare" – ein Verbot schließt genau das Muster aus, das sonst käme.
Was eine gute Website können muss
Steht in der Website Specification (Externer Link, öffnet sich in einem neuen Fenster): rund 170 Themen in zehn Kategorien – Grundlagen, SEO, Sicherheit, Barrierefreiheit, Performance, Datenschutz, Mehrsprachigkeit und mehr. Ein Profiwerkzeug, frei zugänglich.
Jedes Thema trägt einen Status: required,
recommended, optional, avoid. Der
letzte ist Gold wert – er markiert genau die Muster, die ein Modell aus
alten Anleitungen mitbringt.
Über den MCP-Server (externer Link, öffnet sich in einem neuen Fenster) mcp.specification.website fragt der Assistent das Regelwerk direkt ab, statt zu raten. In deiner Datei steht davon eine Zeile.
Die Vorlage für SEO und Barrierefreiheit
Kopieren oder zur bestehenden Datei ergänzen, unter
CLAUDE.md oder AGENTS.md ins Projektverzeichnis
legen, den letzten Abschnitt füllen. Sie ist auf Englisch, wie der Code,
auf den sie sich bezieht.
# Project rules
## Target level
WCAG 2.2 level AA.
## Markup
- Semantic HTML first. ARIA only where no element does the job.
- Focus ring 3px, offset 2px, on every operable element (2.4.11).
- Targets at least 24 × 24 px, aim for 44 × 44 px (2.5.8).
- Visible label with for/id, plus autocomplete. A placeholder is not a label (1.3.5).
- Validate on submit only. Error summary on top, links to the fields,
aria-describedby (3.3.1).
- alt test: is information lost without the image? If not, alt="".
- Colour never carries information on its own (1.4.1). Contrast 4.5:1 / 3:1.
- Motion behind prefers-reduced-motion (2.3.3).
- No sideways scrolling at 320px, no loss of text at 200% zoom (1.4.10, 1.4.4).
- Headings form the outline. Never skip a level.
## SEO
- canonical points at the page itself, never at the main language version.
- hreflang reciprocal, including self and x-default.
- Own title and own description per page, following a fixed pattern.
- URLs are a promise. Move them only with a 301 — with and without .html.
- Indexing explicit: public pages indexable, previews noindex.
- JSON-LD only for facts that are visible on the page.
## Never
- <div onclick> where a <button> belongs
- outline: none without an equivalent replacement
- positive tabindex
- aria-label on an element that already has a visible name, or differing
from it (2.5.3)
- "here" and "read more" as link text
- status, warning or severity by colour alone
- fonts from the Google CDN — self-host them (GDPR)
- CAPTCHA — honeypot plus a server-side filter
- extra libraries without asking
## Sources
- Normative: WCAG 2.2, w3.org/TR/WCAG22
- Implementation: Website Specification, via MCP at mcp.specification.website.
Before every new page template: fetch the accessibility/required checklist.
## Project-specific
This is where everything goes that nobody can guess. For example:
- No hero images. Every page starts with text.
- Language and tone of voice, matching the lang attribute.
- Which building blocks exist already and what they are called.Der letzte Abschnitt enthält auch was Wichtiges: Ohne die Zeile „No hero images" schlägt jeder Assistent zuverlässig ein bildschirmfüllendes Aufmacherbild vor, weil das seit Jahren so gemacht wird.
Mit diesen Regeln im Projekt optimierst du deine Seite von Anfang an in beide Richtungen: barrierefrei und gut auffindbar.
Der nächste Schritt sind die Prüfschritte: Was kann die KI an Barrierefreiheit und an SEO automatisch testen – und was bleibt Handarbeit? Dazu kommt mehr im nächsten Artikel.
Quellen: W3C, Web Content Accessibility Guidelines 2.2 (Externer Link, öffnet sich in einem neuen Fenster) · The Website Specification (Externer Link, öffnet sich in einem neuen Fenster) und ihr MCP-Server (Externer Link, öffnet sich in einem neuen Fenster) · WebAIM Million (Externer Link, öffnet sich in einem neuen Fenster). Die verlinkten Quellen sind auf Englisch.