Barrierefreiheit

chrrp.eu ist bemüht, die Website barrierefrei zugänglich zu machen. Diese Seite dokumentiert den aktuellen Stand der Umsetzung gemäß WCAG 2.2 Level AA (Web Content Accessibility Guidelines).

Stand: September 2026 — zuletzt aktualisiert nach einem vollständigen WCAG-2.2-Audit

Wahrnehmbar

  • 1.1.1 A Nicht-Text-Inhalt — Avatare, Icons und Grafiken haben Alt-Texte oder aria-label; hochgeladene Bilder haben ein Alt-Text-Feld; das YouTube-Embed hat einen title
  • 1.3.1 A Info und Beziehungen — Semantische Landmarks (header, nav, main, footer), Labels auf allen Formularfeldern, Radio-Gruppen in fieldset/legend, Tabellen mit th scope
  • 1.4.1 A Verwendung von Farbe — Informationen werden nicht ausschließlich über Farbe vermittelt; Links im Fließtext sind zusätzlich dauerhaft unterstrichen
  • 1.4.3 AA Kontrast (Minimum) — Alle Texte ≥ 4.5:1 auf dem jeweiligen Hintergrund (Light & Dark Mode), inkl. Badges, „LIVE“-Kennzeichnung und Platzhaltertext
  • 1.4.4 AA Textgröße — Text auf 200 % skalierbar ohne Inhaltsverlust
  • 1.4.10 AA Umfluss (Reflow) — Kein horizontales Scrollen bei 320 px Breite; das Layout ist fluid statt fester Breite
  • 1.4.11 AA Nicht-Text-Kontrast — Formularrahmen, Fokus-Indikatoren und Status-Punkte ≥ 3:1
  • 1.4.12 AA Textabstand — Layout bricht nicht bei erhöhten Abständen (WCAG-Grenzwerte)

Bedienbar

  • 2.1.1 A Tastatur — Alle Funktionen per Tastatur erreichbar; Overlays (Lightbox, Emoji-Auswahl, Menüs) schließen mit Escape
  • 2.2.2 A Pause, Stopp, Ausblenden — Neue Beiträge in der Live-Timeline werden nicht mehr automatisch eingeschoben, sondern über einen Button „N neue Beiträge anzeigen“ abgerufen; Animationen respektieren die Systemeinstellung
  • 2.3.1 A Grenzwerte für Blitzen — Keine Inhalte blitzen häufiger als dreimal pro Sekunde
  • 2.3.3 AAA Bewegung durch Interaktion — prefers-reduced-motion deaktiviert Animationen und Übergänge global (freiwillig über AA hinaus)
  • 2.4.1 A Blöcke überspringen — Skip-to-content Link vorhanden
  • 2.4.2 A Seite betitelt — Jede Seite hat einen beschreibenden Titel
  • 2.4.3 A Fokus-Reihenfolge — Logische Reihenfolge; Overlays setzen den Fokus hinein und geben ihn beim Schließen zurück, die Lightbox hält den Fokus
  • 2.4.7 AA Fokus sichtbar — Alle interaktiven Elemente haben einen sichtbaren Fokus-Ring (2 px)
  • 2.4.11 AA Fokus nicht verdeckt — Einblendungen (Toasts) verdecken fokussierte Bedienelemente nicht
  • 2.5.7 AA Ziehbewegungen — Datei-Upload per Drag & Drop hat immer eine Alternative (Button und Einfügen)
  • 2.5.8 AA Zielgröße (Minimum) — Interaktive Ziele (Blätter-Links, Glocke, Schließen-/ALT-Buttons) mindestens 24 × 24 px

Verständlich

  • 3.1.1 A Sprache der Seite — lang="de" auf dem html-Element
  • 3.2.6 A Konsistente Hilfe — Kontakt, Impressum und diese Seite stehen an gleicher Stelle im Footer jeder Seite
  • 3.3.1 A Fehlererkennung — Formularfehler werden als Text beschrieben und angesagt
  • 3.3.2 A Beschriftungen — Alle Eingabefelder haben sichtbare oder aria-Label
  • 3.3.7 A Redundante Eingabe — Kein doppeltes Abtippen: das frühere E-Mail-Bestätigungsfeld wurde entfernt; bereits eingegebene Daten bleiben nach einem Fehler erhalten
  • 3.3.8 AA Zugängliche Authentifizierung — Kein CAPTCHA, Einfügen aus Passwort-Managern erlaubt, optionale 2FA per TOTP

Robust

  • 4.1.2 A Name, Rolle, Wert — Icon-Buttons haben aria-label; Umschalter (Gefällt mir, Retweet, Folgen, Reaktion) melden ihren Zustand über aria-pressed; die @/#-Vervollständigung nutzt Combobox/Listbox-Semantik
  • 4.1.3 AA Statusmeldungen — Neue Beiträge, veröffentlichte Tweets, Aktionen und ungelesene Zähler werden über aria-live-Regionen angesagt, ohne den Fokus zu verschieben

Dark Mode

chrrp.eu unterstützt Light und Dark Mode — manuell umschaltbar sowie automatisch über die Systemeinstellung. Alle Farb- und Kontrastwerte wurden für beide Modi geprüft und angepasst:

  • Links Light Mode — #b03333 auf Weiß: 6.25:1 ✓ (zusätzlich unterstrichen)
  • Links Dark Mode — #ff8080 / #ffa0a0 auf #1a1a1a: ≥ 7:1 ✓
  • Sekundärtext Light Mode — #767676 auf Weiß: 4.54:1 ✓
  • Sekundärtext Dark Mode — #b0b0b0 auf #1a1a1a: 8:1 ✓
  • Feldrahmen Light / Dark — #767676 bzw. #6a6a6a: ≥ 3:1 ✓
  • Buttons Light Mode — Weiß auf #0077b6→#b03333: ≥ 4.86:1 ✓
  • Buttons Dark Mode — #1a1a1a auf #ffbaba→#e08080: ≥ 7:1 ✓
  • Flash-Meldungen Dark Mode — Erfolg: #7ecf7e auf #1a2e1a (8:1) ✓ — Fehler: #ff8080 auf #2e1a1a (7:1) ✓

Bekannte Einschränkungen

Ein vollständiger Screenreader-Test mit NVDA oder VoiceOver steht noch aus. Die Oberfläche mischt an einigen Stellen bewusst deutsche und englische Begriffe; diese sind noch nicht durchgängig mit lang-Auszeichnungen (3.1.2) versehen. Hochgeladene Videos bieten aktuell keine Untertitel-Funktion. Solltest du Barrieren feststellen, melde sie bitte per Direktnachricht an @koos oder per E-Mail an jan@railslove.com.

Technische Grundlage

chrrp.eu ist eine serverseitig gerenderte Web-App (Ruby/Sinatra), ohne JavaScript-Frameworks. Alle Inhalte sind im HTML vorhanden und benötigen kein JavaScript zur Darstellung.