foundations
Accessibility
Ein System für drei Nutzergruppen muss für alle funktionieren. Kontrast, Fokus und Tastatur sind keine Extras, sondern Teil jeder Komponente.
01 — Kontrast
WCAG AA auf jeder Fläche
Alle Textkombinationen im System erreichen mindestens 4.5:1.
Schwarz auf Weiß21 : 1
Grau 6b auf Weiß5.7 : 1
Weiß auf Schwarz21 : 1
Grau a3 auf Schwarz8.6 : 1
Rot auf Weiß5.1 : 1
Grau 6b auf Subtle5.2 : 1
02 — Fokus
Rot gibt es nur als Ring
- 2px roter Ring, 2px außerhalb der Form, auf allen interaktiven Elementen identisch.
- Nur bei Tastaturfokus (focus-visible), nicht bei Mausklick.
- Der Ring ist die einzige Stelle, an der Rot eine Komponente berührt.
03 — Tastatur & Semantik
Vier Regeln
- Jede Komponente ist per Tab erreichbar und per Enter oder Leertaste bedienbar. Dropdowns öffnen auch bei Fokus.
- Semantisches HTML zuerst: Button ist button, Link ist a, Toggle ist role=switch mit aria-checked.
- Zielgrößen mindestens 40×40px, mobil 48×48px.
- Sprache und Textalternativen: lang=de, alt-Texte für Inhaltsbilder, leer für Dekoration.