Barrierefreiheit auf CHI Tickets
CHI Tickets ist so gestaltet, dass alle es nutzen können — einschließlich Menschen, die auf assistive Technologien angewiesen sind. Dieser Artikel beschreibt die integrierten Barrierefreiheitsfunktionen der Plattform und wie Sie sie optimal nutzen.
Tastaturnavigation
Jeder Teil des CHI-Tickets-Erlebnisses lässt sich allein per Tastatur bedienen — ganz ohne Maus oder Touchscreen:
- Tab-Taste — Bewegt den Fokus vorwärts durch interaktive Elemente (Links, Schaltflächen, Formularfelder).
- Umschalt + Tab — Bewegt den Fokus rückwärts durch interaktive Elemente.
- Eingabe oder Leertaste — Aktiviert die aktuell fokussierte Schaltfläche oder den fokussierten Link.
- Pfeiltasten — Navigation innerhalb von Dropdowns, Optionsgruppen und anderen zusammengesetzten Steuerelementen.
- Escape — Schließt modale Dialoge und Pop-ups.
Der gesamte Checkout-Ablauf — von der Ticketauswahl bis zum Zahlungsabschluss — ist ausschließlich per Tastatur absolvierbar. Dies umfasst die Navigation durch den mehrstufigen Checkout (Tickets, Zusatzoptionen, individuelle Fragen, Kontaktdaten, Zahlung und Bestätigung).
Fokusindikatoren
Bei der Tastaturnavigation erscheint um das jeweils aktive Element ein sichtbarer Fokusindikator (typischerweise eine Umrandung oder Hervorhebung). Dieser Indikator:
- Zeigt klar, welches Element ausgewählt ist, sodass Sie stets wissen, wo Sie sich auf der Seite befinden.
- Folgt einer logischen Tab-Reihenfolge, die dem visuellen Layout entspricht (links nach rechts, oben nach unten).
- Ist gestaltet, um die WCAG-2.1-Kontrastanforderungen zu erfüllen, und bleibt damit auf hellen wie dunklen Hintergründen sichtbar.
- Gilt für alle interaktiven Elemente einschließlich Schaltflächen, Links, Formularfelder, Dropdowns und Tabs.
Unterstützung von Screenreadern
CHI Tickets basiert auf semantischem HTML und ARIA-Attributen (Accessible Rich Internet Applications), um Kompatibilität mit gängigen Screenreadern sicherzustellen, darunter:
- VoiceOver (macOS und iOS)
- NVDA (Windows)
- TalkBack (Android)
- JAWS (Windows)
Zentrale Umsetzungen der Barrierefreiheit:
| Funktion | Umsetzung |
|---|
| Seitenstruktur | Saubere Überschriftenhierarchie (h1, h2, h3), sodass Screenreader per Überschrift navigieren können |
| Formularbeschriftungen | Alle Formularfelder haben zugeordnete Labels, die Screenreader beim Fokussieren ansagen |
| Schaltflächenbeschriftungen | Schaltflächen enthalten beschreibenden Text oder ARIA-Labels, die ihren Zweck vermitteln |
| Bild-Alt-Texte | Veranstaltungsbilder verfügen über alternative Textbeschreibungen |
| Live-Regionen | Dynamische Aktualisierungen (etwa Fehlermeldungen und Bestandswarnungen) kündigen Screenreader über ARIA-Live-Regionen an |
| Landmark-Regionen | Seitenbereiche sind mit ARIA-Landmarks markiert (Navigation, Hauptinhalt, Fußzeile) zur schnellen Orientierung |
ARIA-Labels und Rollen
CHI Tickets setzt ARIA-Attribute umfangreich ein, um Kontext bereitzustellen, den visuelles Design allein nicht vermitteln kann:
- aria-label — Liefert barrierefreie Namen für Elemente ohne sichtbaren Text (z. B. Symbolschaltflächen).
- aria-describedby — Verknüpft Formularfelder mit Hilfetexten oder Fehlermeldungen, damit Screenreader beides zusammen vorlesen.
- aria-required — Kennzeichnet, welche Formularfelder während des Checkouts Pflichtfelder sind.
- aria-invalid — Markiert Felder mit Validierungsfehlern, damit Screenreader den Fehlerzustand ankündigen.
- Rollenattribute — Weisen eigenen UI-Komponenten passende Rollen zu (z. B.
role="tablist" für die Tabs „Anstehend/Laufend“, role="alert" für Fehlermeldungen).
Responsives Design
CHI Tickets nutzt ein vollständig responsives Layout, das sich an jede Bildschirmgröße und Zoomstufe anpasst:
- Mobilgeräte, Tablets und Desktops — Die Oberfläche passt ihr Layout an den Bildschirm an und bleibt damit auf allen Geräten nutzbar.
- Textskalierung — Inhalte bleiben lesbar und funktionsfähig, wenn der Browser-Zoom auf 200 % oder mehr erhöht wird.
- Touch-Ziele — Schaltflächen und interaktive Elemente erfüllen die Mindestgröße für Touch-Ziele (mindestens 44x44 CSS-Pixel) und lassen sich so leicht antippen.
- Reflow — Inhalte passen sich dem Viewport an, ohne horizontales Scrollen bei Standard-Zoomstufen zu erfordern.
Farbe und Kontrast
- Textkontrast — Texte und interaktive Elemente erfüllen die WCAG-2.1-AA-Kontrastverhältnisse (mindestens 4,5:1 für normalen Text und 3:1 für großen Text).
- Keine ausschließliche Farbabhängigkeit — Informationen werden nie nur über Farbe vermittelt. Ausverkaufte Tickets zeigen beispielsweise sowohl eine Farbänderung als auch das Text-Badge „Ausverkauft“.
- Warnungen bei geringem Bestand enthalten sowohl einen visuellen Indikator als auch einen beschreibenden Text.
Reduzierte Bewegung
Für Nutzer, die reduzierte Bewegungen bevorzugen (über den Media Query prefers-reduced-motion in den Betriebssystem-Einstellungen):
- Minimiert oder deaktiviert CHI Tickets Animationen und Übergänge.
- Stellt sicher, dass alle wesentlichen Funktionen ohne bewegungsbasierte Interaktionen funktionieren.
Tipps für das beste barrierefreie Erlebnis
- Nutzen Sie einen modernen Browser — Die aktuellen Versionen von Chrome, Firefox, Safari und Edge bieten die beste Barrierefreiheitsunterstützung.
- Halten Sie Ihren Screenreader aktuell — Neuere Versionen unterstützen ARIA-Attribute und moderne Webstandards besser.
- Aktivieren Sie die Tastaturnavigation — Unter macOS aktivieren Sie unter Systemeinstellungen > Tastatur die Option „Tastaturnavigation“, um in Safari durch alle Bedienelemente zu tabben.
- Passen Sie den Zoom bei Bedarf an — Vergrößern Sie Text und Oberflächenelemente mit dem integrierten Browser-Zoom (Strg/Cmd + Plus).
- Melden Sie Probleme — Stoßen Sie auf CHI Tickets auf Barrieren, kontaktieren Sie bitte den CHI-Support. Feedback hilft, die Plattform für alle zu verbessern.
Tipp: Benötigen Sie Unterstützung beim Ticketerwerb oder haben Sie spezifische Anforderungen an die Veranstaltung selbst (etwa Rollstuhlzugang oder Gebärdendolmetscher), kontaktieren Sie den Veranstalter direkt über die Veranstaltungsseite.