Accessibility

Accessibility on haqoo.com

This page describes the accessibility measures implemented on haqoo.com in accordance with WCAG 2.1 conformance level AA.

Colour Contrast

All text/background colour combinations have been verified for both Light Mode and Dark Mode. All meet the minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (WCAG 1.4.3).

Colour Background Ratio
Primary text #002855 White #FFFFFF 15:1 ✓
Muted text #4A5568 White #FFFFFF 7.4:1 ✓
Dark primary text #E2EEF8 Dark background #0D1B2A 15.2:1 ✓
Dark muted text #8BA5C4 Dark background #0D1B2A 7.0:1 ✓
Teal accent #008B8B White #FFFFFF 4.8:1 ✓
Purple #4338CA White #FFFFFF 8:1 ✓

Keyboard Navigation

All interactive elements (navigation, buttons, links) are reachable by keyboard and follow a logical tab order (WCAG 2.1.1, 2.4.3).

All focusable elements have a visible focus ring applied via a global :focus-visible CSS rule. The focus ring meets a contrast ratio of at least 3:1 against the background (WCAG 2.4.11).

ARIA Attributes and Landmarks

The following ARIA attributes are implemented (WCAG 1.3.1, 4.1.2):

  • Navigation <nav>: aria-label="Main navigation"
  • Cookie banner: role="region", aria-label="Cookie Settings", aria-hidden managed by JavaScript (exposed when open, hidden when closed)
  • Theme toggle button: aria-label="Toggle colour theme"
  • Back-to-top link: aria-label="Back to top"
  • Page sections <section>: aria-labelledby referencing the respective heading ID
  • Decorative icons: aria-hidden="true" on all purely decorative <span> elements

Heading Hierarchy

The page uses a consistent, single-branch heading hierarchy (WCAG 1.3.1):

  • One <h1> per page (main heading in the hero area)
  • <h2> for section headings (Training Agent, Partner, Newsletter)
  • <h3> for subsections within sections (bento grid cards)

Alternative Text

All meaningful images carry descriptive alt attributes that convey context and content (WCAG 1.1.1). Decorative images receive alt="".

Dark Mode and Colour Scheme

The system reads the user's system preference (prefers-color-scheme) and stores the decision locally in the browser. A 0.6-second colour transition makes switching visually smooth and a Flash of Unstyled Content is prevented by an inline script that runs before the first render.

Cookie Banner

The cookie banner is fully keyboard-operable (WCAG 2.1.1):

  • Focus moves to the first button when the banner opens
  • Escape closes the banner
  • aria-hidden is correctly toggled by JavaScript
  • The banner is marked up as an ARIA landmark region

Known Limitations

  • On small screens, no dedicated mobile navigation menu is present. Navigation is provided via anchor links to page sections in the desktop navigation bar.

Contact

For questions or feedback about the accessibility of this website, please contact:

Email: info@haqoo.de
Phone: +49 (40) 414250-0