Barrierefreiheit
Barrierefrei heißt: mehr Menschen können mit, statt trotz unserer Gestaltung arbeiten. Das passt zur Marke, klar und für alle zugänglich statt exklusiv. Diese Seite bündelt, was verstreut galt (Kontrast, Bewegung, Icons) und macht es zum Maßstab.
Zielniveau
Miragon-Material erfüllt WCAG 2.1 Level AA. Das ist die Messlatte, nicht „sieht gut aus".
Kontrast
Die Zahlen sind nicht geschätzt, sondern aus den Marken-Tokens berechnet (brand/tokens.json → contrast.generated.json). Vordergrund auf Hintergrund, mit WCAG-Urteil:
| Beispiel | Vordergrund | Hintergrund | Kontrast | Text AA | Groß AA |
|---|---|---|---|---|---|
| Aa | blau #335DE5 | weiss #FFFFFF | 5.47:1 | ✓ | ✓ |
| Aa | blau-link #2B50D4 | weiss #FFFFFF | 6.56:1 | ✓ | ✓ |
| Aa | gruen #00E676 | weiss #FFFFFF | 1.67:1 | ✗ | ✗ |
| Aa | schwarz #1D1D1D | weiss #FFFFFF | 16.86:1 | ✓ | ✓ |
| Aa | blau #335DE5 | grau #F9F7F7 | 5.13:1 | ✓ | ✓ |
| Aa | schwarz #1D1D1D | grau #F9F7F7 | 15.79:1 | ✓ | ✓ |
| Aa | weiss #FFFFFF | blau #335DE5 | 5.47:1 | ✓ | ✓ |
| Aa | gruen #00E676 | blau #335DE5 | 3.28:1 | ✗ | ✓ |
| Aa | weiss #FFFFFF | schwarz #1D1D1D | 16.86:1 | ✓ | ✓ |
| Aa | gruen #00E676 | schwarz #1D1D1D | 10.10:1 | ✓ | ✓ |
| Aa | success #0B7A55 | weiss #FFFFFF | 5.34:1 | ✓ | ✓ |
| Aa | warning #92610A | weiss #FFFFFF | 5.33:1 | ✓ | ✓ |
| Aa | danger #C92A2A | weiss #FFFFFF | 5.46:1 | ✓ | ✓ |
| Aa | info #2B50D4 | weiss #FFFFFF | 6.56:1 | ✓ | ✓ |
Ableitungen daraus:
- Blau
#335DE5trägt Text auf Weiß (5,47:1, AA). Für kleine Links nutzen wir das etwas tiefere--cd-blau-link(6,56:1). - Grün
#00E676ist auf Weiß nur 1,67:1, also nie Fließtext. Grün nur groß und fett, als Fläche oder Grafik-Akzent. Auf Blau reicht Grün für große Elemente (3,28:1, AA groß), nicht für Kleingedrucktes. - Statusfarben sind so gewählt, dass sie als Text auf Weiß AA erreichen (siehe Farben).
Alt-Texte
Jedes Bild braucht eine Entscheidung, keinen Reflex:
- Dekorativ (Verlauf, Schmuck, Key Visual ohne Aussage): leeres
alt="", damit Screenreader es überspringen. - Inhaltstragend (Diagramm, Screenshot, Foto mit Aussage): kurz beschreiben, was zu sehen und gemeint ist.
- Text im Bild: Steht ein Claim oder eine Zahl eingebrannt im Bild (Social-Post, Banner), gehört dieser Text in den Alt-Text. Sonst geht die Kernaussage für Screenreader verloren.
Fokus und Tastatur
- Alles, was klickbar ist, ist auch per Tastatur erreichbar und bedienbar.
- Der Fokus ist sichtbar: ein deutlicher Rahmen in Markenblau. Nie
outline: noneohne Ersatz. - Reihenfolge folgt dem Lesefluss, keine Fokusfallen.
Touch-Ziele
Tippbare Flächen sind mindestens 44 × 44 px groß, auch wenn das Icon kleiner wirkt. Lieber die Trefferfläche vergrößern als das Icon.
Bewegung
- Animationen respektieren
prefers-reduced-motion. Wer Bewegung abgewählt hat, bekommt einen ruhigen Zustand (der animierte Startseiten-Hintergrund steht dann still). - Kein Dauer-Autoplay, kein Blinken, nichts, was schneller als dreimal pro Sekunde flackert.
- Bewegung ist Würze, kein Selbstzweck. Werte dafür stehen unter Layout & Raster.
Schriftgröße
Fließtext ist mindestens 16 px. Kleiner nur für echte Nebenrollen (Bildunterschrift, Hinweis), nie für Inhalt, den du lesen sollst.
Stand
Zielniveau AA ist gesetzt, die Kontrastwerte sind aus den Tokens berechnet. Für eine formale Prüfung (z. B. BFSG-Relevanz konkreter Produkte) das Marketing im ask-marketing-Channel fragen.