Checklist (prioritized)
Aligned with WCAG 2.2 AA / EU Accessibility requirements. Use this as a pre‑launch QA list.
| Priority | Area | Rule | Do | Don’t |
|---|---|---|---|---|
| High | Headings | Exactly one <h1> per page; use h2–h6 in order. |
<h1>Mobilet – Parken & Tickets</h1> | <h1>Start</h1><h1>Auch Überschrift</h1> |
| High | Skip Links | Hidden links to content, menu, footer at top of page. | <a class="screen-reader-text" href="#maincontent">Zum Hauptinhalt springen</a> | <!-- none --> |
| High | Links & Buttons | Clear text; avoid duplicate links to the same target inside one block. | <a href="/preise">Preise ansehen</a> | <a href="/preise" aria-label="Link zu Preise">Mehr</a> |
| High | Images | Informative images need alt; decorative alt="" or CSS background. | <img src="qr.png" alt="Beispiel-QR-Code für Ticket"> | <img src="qr.png" alt="Bild"> |
| High | Color & Focus | Contrast ≥4.5:1 (text); visible keyboard focus on all controls. | body{color:#111;background:#fff} :focus{outline:2px solid currentColor;} | #aaa on #fff; button{outline:none} |
| High | Forms | Label each input; explain errors; associate help text. | <label for="email">E‑Mail</label><input id="email" type="email"> | <input placeholder="E‑Mail"> |
| High | Video & Audio | All media must have captions; audio content needs transcript. | Video mit synchronen Untertiteln <track kind="captions" src="subs.vtt" srclang="de" /> | Video ohne Untertitel oder Transkript |
| High | PDFs & Docs | Use tagged PDF; headings, reading order, alt text, bookmarks. | Export aus Word mit "Barrierefreiheitsprüfung bestanden" | Gescanntes Bild-PDF ohne Text |
| High | Error Prevention | Confirm before submitting irreversible actions; allow review. | "Bestellung prüfen" Seite vor finaler Zahlung | Direkter Kauf ohne Bestätigungsseite |
| Medium | Pattern Backgrounds | Use solid overlay or remove pattern under text for legibility. | .hero{background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)),url(bg.jpg);} | Text directly on a noisy pattern |
| Medium | Focus Order | Logical tab sequence; avoid tabindex > 0. | :focus{outline:2px solid currentColor;outline-offset:3px;} | tabindex="5" |
| Medium | Heading Length | Short, descriptive h1 (≈3–6 words) matching page purpose. | <h1>Mobilet: Parken & Tickets</h1> | <h1>Willkommen auf unserer wunderschönen ...</h1> |
| Medium | Language Attribute | Set lang on <html> and for inline changes. |
<html lang="de">…</html> | <html>…</html> ohne lang |
| Medium | Reduced Motion | Respect prefers-reduced-motion to limit animations. |
@media (prefers-reduced-motion: reduce){ *{animation:none;transition:none;} } | Unabschaltbare Animationen |
| Medium | Timing | Allow users to extend or turn off time limits. | "Sitzung verlängern" Button bei Timeout | Automatischer Logout ohne Warnung |
| Low | ARIA | Prefer native HTML; only add ARIA where needed (no redundancy). | <nav aria-label="Hauptnavigation">...</nav> | <a aria-label="Link zu Preise" href="/preise">Preise</a> |
| Low | New Windows | Inform users when a link opens a new tab or file. | <a href="file.pdf" target="_blank">PDF (öffnet in neuem Tab)</a> | <a href="file.pdf" target="_blank">PDF</a> |
| Low | Link Purpose (Context) | Link text must be meaningful out of context. | <a href="/kontakt">Kontakt aufnehmen</a> | <a href="/kontakt">Hier</a> |
| Low | Consistent Navigation | Menu items should appear in the same order on every page. | Hauptnavigation: Home – Produkte – Preise – Kontakt | Unterschiedliche Menüreihenfolge |
High Priority Examples — Do & Don’t
Skip Links
<a class="screen-reader-text" href="#maincontent">Zum Hauptinhalt springen</a> <a class="screen-reader-text" href="#site-navigation">Zum Menü springen</a> <a class="screen-reader-text" href="#site-footer">Zum Footer springen</a>
Images (alt text)
<img src="qr.png" alt="Beispiel-QR-Code für Ticket" /> <img src="linie.svg" alt="" role="presentation" /> <!-- decorative -->
Links & Buttons
<a href="/preise">Preise ansehen</a> <button type="submit">Bezahlen</button>
Color Contrast — readable text vs low contrast
Image Alt Text — meaningful alt vs missing/wrong alt
alt.Form Labels & Errors — proper association & clear errors
How to use this page
- Open the target page in a new tab and run quick tests with WAVE / AudioEye / EXPERTE (links above).
- Keyboard test: Tab through the page — can you reach all links, buttons, and form fields? Is focus visible?
- Screen reader spot‑check (NVDA/VoiceOver): do headings, links, and images make sense?
- Fix High priority items first, then Medium, then Low.
Content Preflight
mini‑form (so nothing ships without basics)
Content Preflight (must‑do before publish)
Alt‑Text Kochbuch (schnell & sicher)
- Informativ: Was sieht/man lernt man? “QR‑Code für Mobilet‑Ticket mit Preis 2,90 €.”
- Funktional: Was macht das Bild? “Button: Ticket scannen” (wenn als Bild umgesetzt).
- Dekorativ:
alt=""undrole="presentation"(keinen Text erfinden). - Logos: “Mobilet Logo” (oder leeres
alt, wenn daneben der Name als Text steht).
Color Tokens — palette & contrast proof
These tokens are WCAG‑friendly defaults for mobilet. The right side shows typical text/background pairs with their contrast ratio and pass status.
Copy‑ready CSS tokens for developers
:root{
--brand-gray-300:#cccccc;
--brand-gray-50:#f6f6f6;
--brand-text:#555555;
--brand-blue:#094b82;
--brand-blue-dark:#053a66;
--brand-red:#be0005;
--brand-red-dark:#8c0005;
--brand-blue-100:#cfdbe5;
--brand-blue-50:#e4ebf1;
--ax-bg:#ffffff;
--ax-text:#111111;
--ax-surface:var(--brand-gray-50);
--ax-primary:var(--brand-blue);
--ax-primary-on:#ffffff;
}
body{background:var(--ax-bg);color:var(--ax-text)}
a{color:var(--ax-primary)}
.btn-primary{background:var(--ax-primary);color:var(--ax-primary-on)}
Pattern / Hero Overlay — keep text readable
Never place text directly on busy photos or patterns. Use a solid or high‑opacity scrim so contrast stays ≥ 4.5:1.
Dev helper — drop‑in CSS for hero overlays
/* Dark scrim in brand blue (preferred for white text) */
.hero--scrim-dark {
position: relative;
color: #fff; /* use white on dark scrim */
}
.hero--scrim-dark::before {
content: "";
position: absolute; inset: 0;
background: rgba(5, 58, 102, 0.72); /* #053a66 @ 72% */
pointer-events: none;
}
/* Light scrim (when you want dark text) */
.hero--scrim-light {
position: relative;
color: #555; /* dark text */
}
.hero--scrim-light::before {
content: "";
position: absolute; inset: 0;
background: rgba(246, 246, 246, 0.92); /* #f6f6f6 @ 92% */
pointer-events: none;
}
/* Safe text container inside hero */
.hero__inner {
position: relative; /* sits above ::before scrim */
max-width: 64rem;
padding: clamp(16px, 4vw, 48px);
}
/* Quick contrast guardrails */
.hero--scrim-dark .btn-primary { background:#094b82; color:#fff; }
.hero--scrim-light .btn-primary { background:#094b82; color:#fff; }
Content rules (Marketing)
- Kein Text in Bilder rendern. Headlines/CTAs immer als HTML.
- Kurz & klar: H1 3–6 Wörter; Subline max. 80–100 Zeichen.
- Buttons sichtbar: Weiß auf
#094b82oder#be0005(AA/AAA). - Foto zu wild? Scrim‑Deckkraft erhöhen, bis der Kontrast‑Check (WAVE/EXPERTE) passt.
Video Captioning — micro‑workflow (EU AA / WCAG 2.2)
All videos must have captions; audio‑only needs a transcript. Prefer human‑reviewed captions (WebVTT). Avoid autoplay-without-sound, and always provide player controls.
Dev helper — minimal, standards‑based embed
<figure aria-labelledby="vid1-title" aria-describedby="vid1-desc">
<figcaption id="vid1-title">Mobilet – Ticket kaufen in 30 Sekunden</figcaption>
<video id="vid1" controls preload="metadata" width="100%" style="max-width:720px">
<source src="/media/mobilet-demo.mp4" type="video/mp4">
<track kind="captions" src="/media/mobilet-demo.de.vtt" srclang="de" label="Deutsch" default>
<track kind="subtitles" src="/media/mobilet-demo.en.vtt" srclang="en" label="English">
<!-- Optional: audio descriptions if available -->
<!-- <track kind="descriptions" src="/media/mobilet-demo.desc.vtt" srclang="de" label="Audiodeskription"> -->
</video>
<p id="vid1-desc">
Transcript: <a href="/media/mobilet-demo-transcript.html">Vollständiger Text</a>.
</p>
</figure>
Marketing rules (quick)
- Immer Captions. Sprache prüfen, Namen/Zahlen korrekt. Musik/Off‑Screen beschreiben (“[Musik]”, “[Applaus]”).
- Autoplay vermeiden. Falls absolut nötig: muted, ohne Ton starten und Controls sichtbar lassen.
- Transcript direkt unter dem Video verlinken (oder auf gleicher Seite einblenden).
- Sprachen: mind. DE; EN wenn Video international genutzt wird.
- QA: WAVE/EXPERTE scannen; kurz mit Screenreader testen (Untertitel werden angekündigt?).