Barrierefreiheit

Barrierefreiheit auf haqoo.com

Diese Seite beschreibt die Maßnahmen, die auf haqoo.com zur Barrierefreiheit nach WCAG 2.1 Konformitätsstufe AA umgesetzt wurden.

Farbkontrast

Alle Text-Hintergrund-Kombinationen wurden für den Light Mode und den Dark Mode geprüft. Alle erfüllen mindestens ein Kontrastverhältnis von 4,5:1 für normalen Text und 3:1 für große Texte (WCAG 1.4.3).

Farbe Hintergrund Verhältnis
Primärtext #002855 Weiß #FFFFFF 15:1 ✓
Gedämpfter Text #4A5568 Weiß #FFFFFF 7,4:1 ✓
Dark-Primärtext #E2EEF8 Dark-Hintergrund #0D1B2A 15,2:1 ✓
Dark-gedämpft #8BA5C4 Dark-Hintergrund #0D1B2A 7,0:1 ✓
Teal-Akzent #008B8B Weiß #FFFFFF 4,8:1 ✓
Violett #4338CA Weiß #FFFFFF 8:1 ✓

Tastaturbedienbarkeit

Alle interaktiven Elemente (Navigation, Buttons, Links) sind per Tastatur erreichbar und folgen einer logischen Tab-Reihenfolge (WCAG 2.1.1, 2.4.3).

Alle fokussierbaren Elemente haben einen sichtbaren Fokusrahmen über eine globale :focus-visible-CSS-Regel. Der Fokusrahmen hat ein Kontrastverhältnis von mindestens 3:1 gegenüber dem Hintergrund (WCAG 2.4.11).

ARIA-Attribute und Landmarks

Folgende ARIA-Attribute sind implementiert (WCAG 1.3.1, 4.1.2):

  • Navigation <nav>: aria-label="Hauptnavigation"
  • Cookie-Banner: role="region", aria-label="Cookie-Einstellungen", aria-hidden wird per JavaScript verwaltet (sichtbar wenn geöffnet, versteckt wenn geschlossen)
  • Theme-Toggle-Button: aria-label="Toggle colour theme"
  • Zurück-nach-oben-Link: aria-label="Back to top"
  • Seitenabschnitte <section>: aria-labelledby mit Verweis auf die jeweilige Überschriften-ID
  • Dekorative Icons: aria-hidden="true" auf allen rein dekorativen <span>-Elementen

Überschriften-Hierarchie

Die Seite verwendet eine konsistente, einstufige Überschriften-Hierarchie (WCAG 1.3.1):

  • Eine <h1> pro Seite (Hauptüberschrift im Hero-Bereich)
  • <h2> für Sektionsüberschriften (Trainingsagent, Partner, Newsletter)
  • <h3> für Unterabschnitte innerhalb von Sektionen (Bento-Grid-Karten)

Alternativtexte

Alle inhaltlichen Bilder tragen beschreibende alt-Attribute, die Kontext und Inhalt vermitteln (WCAG 1.1.1). Dekorative Bilder erhalten alt="".

Dark Mode und Farbschema

Das System liest die Systempräferenz (prefers-color-scheme) aus und speichert die Benutzerentscheidung lokal im Browser. Ein Farbübergang von 0,6 Sekunden macht den Wechsel visuell sanft und reduziert Flackern (Flash of Unstyled Content wird durch ein Inline-Script vor dem ersten Rendern verhindert).

Cookie-Banner

Der Cookie-Banner ist vollständig per Tastatur bedienbar (WCAG 2.1.1):

  • Fokus wird beim Öffnen auf die erste Schaltfläche gesetzt
  • Escape schließt den Banner
  • aria-hidden wird per JavaScript korrekt gesetzt
  • Der Banner ist als ARIA-Landmark-Region ausgezeichnet

Bekannte Einschränkungen

  • Auf kleinen Bildschirmen ist keine separate mobile Navigation vorhanden. Die Seitennavigation erfolgt über Anker-Links zu den Abschnitten in der Desktop-Navigation.

Kontakt

Bei Fragen oder Hinweisen zur Barrierefreiheit dieser Website wenden Sie sich bitte an:

E-Mail: info@haqoo.de
Telefon: +49 (40) 414250-0