Erklärung zur Barrierefreiheit
Diese Erklärung zur Barrierefreiheit gilt für die öffentlich zugängliche Website clever.legal der clever.legal GmbH i. Gr., Florianweg 1, 88677 Markdorf.
Wir verpflichten uns, unsere digitalen Angebote im Einklang mit dem Barrierefreiheitsstärkungsgesetz (BFSG), der europäischen Norm EN 301 549 und den Web Content Accessibility Guidelines (WCAG) 2.1 Level AA barrierefrei zu gestalten.
Diese Website ist weitgehend konform mit WCAG 2.1 Level AA. Im April 2026 haben wir eine umfassende Überprüfung und Überarbeitung aller öffentlichen Seiten durchgeführt. Die nachfolgenden Maßnahmen wurden umgesetzt.
Umgesetzte Maßnahmen
Sprache & Grundstruktur
- ✓Das HTML-Dokument ist mit lang="de" ausgezeichnet, sodass Screenreader die korrekte Sprachausgabe verwenden.
- ✓Die Seite nutzt semantische HTML5-Landmarks: header, main, nav und footer. Screenreader können damit direkt zwischen Seitenbereichen navigieren.
- ✓Ein Skip-Link („Zum Inhalt springen“) ist als erstes interaktives Element implementiert. Bei Fokus wird er sichtbar und überspringt die Navigation.
Navigation & Tastaturzugänglichkeit
- ✓Alle interaktiven Elemente (Links, Buttons, Formularfelder, Slider) sind vollständig per Tastatur bedienbar.
- ✓Der globale Focus-Indikator ist als 2px-Kontur in der Akzentfarbe definiert (:focus-visible) und auf allen Elementen sichtbar.
- ✓Die Hauptnavigation und die mobile Navigation sind jeweils mit aria-label ausgezeichnet.
- ✓Der mobile Menü-Button enthält aria-expanded und aria-controls. Das Menü schließt sich per Escape-Taste und der Fokus wird beim Öffnen automatisch in das Menü verschoben.
Farben & Kontraste
- ✓Alle Text-Hintergrund-Kombinationen erfüllen das WCAG-Mindest-Kontrastverhältnis von 4.5:1 für normalen Text und 3:1 für großen Text.
- ✓Farbe wird nie als einziger Informationsträger verwendet — Severity-Level in der Alerts-Tabelle sind zusätzlich textlich ausgezeichnet.
- ✓Die Akzentfarbe (Grün) auf dunklem Hintergrund erreicht ein Kontrastverhältnis von ca. 5.8:1.
Animationen & Bewegung
- ✓Alle Animationen (Ticker-Laufschrift, Cursor-Blinken, Glocken-Pulse, Übergänge) werden bei aktivierter Systemeinstellung prefers-reduced-motion vollständig deaktiviert.
- ✓Die Typewriter-Animation im Heldenbereich wird bei reduzierter Bewegung sofort als vollständiger Text dargestellt — ohne Verzögerung.
- ✓Der Ticker ist mit role="marquee" und aria-label beschrieben. Der scrollende Inhalt ist für Screenreader über aria-hidden verborgen, um unnötige Wiederholungen zu vermeiden.
Formulare & Fehlermeldungen
- ✓Alle Formularfelder im Kontaktformular sind mit sichtbaren label-Elementen verknüpft.
- ✓Das Alert-Abonnement-Modal nutzt sichtbare Labels, aria-required und aria-describedby zur Verknüpfung von Feldern und Fehlermeldungen.
- ✓Fehlermeldungen werden mit role="alert" ausgezeichnet, sodass Screenreader sie sofort vorlesen.
- ✓Das Abonnement-Modal nutzt das native dialog-Element mit eingebautem Focus-Trap und ist per aria-labelledby mit seinem Titel verknüpft.
Bilder & Icons
- ✓Alle informativen Bilder (Teamfotos, Blog-Cover) tragen beschreibende Alt-Texte mit Name und Rolle.
- ✓Dekorative SVG-Icons sind mit aria-hidden="true" markiert und werden von Screenreadern ignoriert.
- ✓Das Logo ist als Link mit aria-label="clever.legal – Startseite" ausgezeichnet.
Semantische Struktur & ARIA
- ✓Die Überschriften-Hierarchie ist konsistent: eine H1 pro Seite, gefolgt von H2 für Sektionen und H3 für Unterabschnitte.
- ✓Die Zielgruppen-Tabs (Cluster-Auswahl) sind mit dem vollständigen WAI-ARIA Tabs-Pattern implementiert: role="tablist", role="tab" mit aria-selected und aria-controls, sowie role="tabpanel" mit aria-labelledby.
- ✓Vergleichstabellen (Status Quo vs. clever.legal, Alerts-Übersicht) sind mit ARIA-Tabellenrollen (role="table", role="row", role="columnheader", role="cell") ausgezeichnet.
- ✓Der Footer ist mit mehreren <nav>-Elementen strukturiert, jeweils mit aria-label für die Kategorie.
Links & interaktive Elemente
- ✓Wiederholt vorkommende Links (z.B. „Öffnen“ in der Alerts-Tabelle) sind mit individuellen aria-label-Attributen versehen, die den jeweiligen Kontext enthalten.
- ✓Blog-Artikel-Links tragen aria-label mit dem Artikeltitel.
- ✓Range-Slider im Kostenrechner nutzen aria-valuetext, um den aktuellen Wert mit Einheit vorzulesen (z.B. „80 Fälle“).
Trotz unserer Bemühungen können einzelne Bereiche Einschränkungen aufweisen:
- ›Eingebettete Inhalte Dritter (z.B. externe Widgets) unterliegen nicht unserer Kontrolle.
- ›Ältere Blog-Beiträge können vereinzelt suboptimale Alt-Texte enthalten — wir arbeiten an einer Nachpflege.
- ›PDF-Dokumente, die zum Download angeboten werden, sind möglicherweise noch nicht vollständig barrierefrei.
Die Barrierefreiheit wurde durch eine Kombination folgender Methoden geprüft:
- ›Statische Code-Analyse aller öffentlichen Komponenten
- ›Automatisierte Tests mit ESLint jsx-a11y-Regelwerk
- ›Manuelle Prüfung gegen WCAG 2.1 Level AA Erfolgskriterien
- ›Kontrastverhältnis-Prüfung aller Farbkombinationen
Sollten Sie auf Barrieren stoßen oder Verbesserungsvorschläge haben, freuen wir uns über Ihre Rückmeldung:
clever.legal GmbH i. Gr.
RA Marc Ellerbrock
Florianweg 1, 88677 Markdorf
E-Mail: barrierefreiheit@clever.legal
Wir bemühen uns, Ihre Anfrage innerhalb von 14 Tagen zu beantworten und etwaige Mängel zeitnah zu beheben.
Sollte nach Ihrer Kontaktaufnahme keine zufriedenstellende Lösung gefunden werden, können Sie sich an die zuständige Durchsetzungsstelle wenden. Zuständig ist die Marktüberwachungsbehörde des jeweiligen Bundeslandes gemäß § 3 BFSG.