Clerkcode02/responsive-accessibility

Responsive & Accessibility

Eine notfallbezogene Seite muss für alle, auf jedem Gerät und unter Stress nutzbar sein. Klarheit schlägt Cleverness.

Breakpoints

Tailwind-Standards: sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Mobile-First-Design und bewusst pro Bereich:

• 320–639: einspaltig, flache Telefone, horizontale Scroll-Snap-Galerie, gestapelte CTAs in voller Breite, Menü in einem Ausklapp-Panel.
• 640–1023: zweispaltige Grids, wo der Inhalt es zulässt; immer noch kein 3D-Kippen oder Anheften.
• ≥ 1024: asymmetrische 12-Spalten-Layouts, 2.5D-Telefone, Zeigerkippen, optionales fixiertes Storytelling. Testbreiten: 320, 375, 414, 768, 1024, 1280, 1440, 1920. Kein horizontaler Seiten-Scroll bei keiner Breite (achten Sie auf gedrehte Telefone und übergroße Schrift – verwenden Sie overflow-x: clip auf Abschnitten, nicht auf body).

Orientierungspunkte & Struktur

• <a href="#main" class="skip-link">Zum Inhalt springen</a> als erstes fokussierbares Element.
• <header> (nav), <main id="main">, jeder Abschnitt ein <section aria-labelledby="…-heading">, <footer>.
• Genau eine h1 (Hero-Überschrift). Jeder Abschnitt beginnt mit h2; Unterelemente h3. Keine ausgelassenen Ebenen.
• Abschnitts-ids stimmen mit Navigationsankern überein: about, features (Kategorien + Präsentation), how-it-works, register, faq.
• Ankerziele werden durch die fixierte Navigation versetzt: scroll-margin-top: var(--nav-h).

Navigation

• Desktop: Inline-Links + ein informierender CTA (z. B. „Entdecken Sie die Funktionen“) – kein Download-/Installations-CTA, siehe CLAUDE.md „Scope: Präsentation, kein Installations-Trichter“.
• Mobil: Ein <button aria-expanded aria-controls="mobile-menu"> schaltet ein Panel um. Beim Öffnen: Fokus auf ersten Link; Esc schließt und gibt den Fokus zurück zum Button; das Klicken eines Links schließt das Menü. Die Body-Scroll-Sperre ist optional und muss zuverlässig aufgehoben werden. Der Hamburger-Button hat einen zugänglichen Namen „Menü öffnen“/„Menü schließen“.
• Aktuelle Abschnittsmarkierung (optional) über aria-current="true", nicht nur über Farbe.

Tastatur & Fokus

• Alles Interaktive ist per Tab in visueller Reihenfolge erreichbar. Kein positives tabindex.
• Sichtbarer Fokusring auf allen Steuerelementen: outline: 2px solid var(--color-accent); outline-offset: 3px; – stellen Sie ein Kontrastverhältnis von ≥ 3:1 zu dunklen und hellen Hintergründen sicher (verwenden Sie bei roten Buttons einen hellen Ring).
• Horizontale Galerien: Container tabindex="0" mit role="region" + aria-label, Pfeiltasten scrollen nativ.
• Jedes deaktivierte/nicht verfügbare Steuerelement (z. B. fehlender Kontakt-/Rechts-Link): als <span aria-disabled="true"> oder <button disabled> mit erklärendem Text rendern, niemals ein fokussierbarer Fake-Link.

FAQ-Akkordeons

• Bevorzugt natives <details><summary>; oder button[aria-expanded][aria-controls] + Region. Der Zusammenfassungstext ist die Frage als Klartext in einem h3-Äquivalent.
• Der Inhalt ist im DOM (durchsuchbar, funktioniert ohne JS).

Touch & Zeiger

• Touch-Ziele ≥ 44×44 Pixel (Buttons, Menüpunkte, FAQ-Umschalter).
• ≥ 8 Pixel Abstand zwischen benachbarten Zielen.
• Nur-Hover-Effekte verbergen niemals Informationen.

Farbe & Text

• Textkörperkontrast ≥ 4,5:1, großer Text ≥ 3:1, UI-Grenzen ≥ 3:1.
• Status (Ausstehend/Laufend/Abgeschlossen) hat immer Textlabel + Symbol, nicht nur Farbe.
• Text vergrößert sich auf 200 % ohne Verlust; keine Textcontainer mit fester Höhe.
• Zeilenlänge ≤ ~70 Zeichen für Fließtext.

Bilder & Medien

• Sinnvolle Screenshots: sachlicher alt-Text (siehe app-screenshot-showcase). Dekorativ: alt="" + aria-hidden bei rein dekorativen SVGs.
• Platzhalter kündigen sich selbst an: „Screenshot-Platzhalter: Registrierungsbildschirm“.
• Symbole in Begleitung von Text: aria-hidden="true".

Bewegung

• Respektieren Sie prefers-reduced-motion (siehe lightweight-motion). Kein Inhalt erscheint nur durch Animation.
• Illustrative animierte Komponenten (Tracking, Koordination) enthalten sichtbaren Text, der sagt, dass es Illustrationen sind, plus aria-live wird NICHT verwendet (keine Live-Daten).

Notfallinformationen

• Ein Haftungsausschluss erscheint in der Nähe der Hero-CTAs, im FAQ („Ist SOS ein Ersatz für Notrufnummern?“), in der Nähe des abschließenden CTAs und in der Fußzeile. Klare Sprache, lesbarer Kontrast, nicht in winziger Schrift versteckt (≥ 14 Pixel).

Prüfliste

• axe / Lighthouse Barrierefreiheit ≥ 95, null kritische Verstöße
• Nur Tastatur: Skip-Link, Menü öffnen/schließen/Esc, alle Anker, FAQ, Galerie
• Stichprobe mit Bildschirmlesegerät (VoiceOver/NVDA): Überschriftenliste ergibt Sinn
• 320 Pixel: kein Überlauf, Überschrift passt, CTAs prominent
• 200% Zoom funktioniert
• Reduzierte Bewegung verifiziert
• Querformat mobil (z. B. 740×360) nutzbar