Wie erfüllt CCM19 die Anforderungen der WCAG?
Klare Orientierung
Logische und intuitive Struktur
Die klar definierte Tab-Reihenfolge und gut erkennbare Fokuspunkte ermöglichen eine mühelose Navigation, sodass Nutzer stets die Orientierung behalten.
Screenreader-Kompatibilität
Optimiert für Screenreader-Nutzung
Das CCM19 Cookie-Banner unterstützt alle gängigen Screenreader sowie die erforderlichen ARIA-Standards, um eine reibungslose und barrierefreie Navigation zu gewährleisten.
Tastatur-Navigation
Komfortable Steuerung per Tastatur
Alle Funktionen und Bereiche des Cookie-Banners sind auch ohne Maus vollständig und einfach über die Tastatur zugänglich – für eine barrierefreie Nutzererfahrung.
Optimierte Farbdarstellung
Kontrastreiche Gestaltung nach WCAG
CCM19 erfüllt die Kontrastanforderungen der WCAG (mindestens 4.5:1), sodass Texte und Schaltflächen für Menschen mit Sehbehinderung optimal lesbar sind.
Flexible Skalierung
Individuell anpassbare Anzeige
Das Cookie-Banner bleibt selbst bei einer Vergrößerung um bis zu 200 % vollständig bedienbar, ohne dass Inhalte verloren gehen – perfekt für Nutzer mit Seheinschränkungen.
Verständliche Sprache
Klar und einfach formulierte Inhaltet
Alle Texte im Cookie Banner sind bewusst einfach und verständlich geschrieben, sodass Nutzer die Informationen unabhängig von ihren Vorkenntnissen problemlos erfassen können.
CCM19 hilft bereits 201.101 Webseiten bei der Erfüllung von DSGVO, TDDDG & Co.
BFSG-konform durch Umsetzung der WCAG-Richtlinien
WCAG als Grundlage für BFSG-Konformität
Das CCM19 Cookie Banner ist so entwickelt, dass es die Anforderungen des Barrierefreiheitsstärkungsgesetzes (BFSG) erfüllt, indem es konsequent die internationalen WCAG-Richtlinien berücksichtigt. Damit erfüllen Sie gesetzliche Vorgaben zur Barrierefreiheit ganz einfach und zuverlässig.
Einfach integrierbar und direkt nutzbar
Mit dem intuitiven Einrichtungsassistenten integrieren Sie das CCM19 Cookie-Banner problemlos in Ihre Website – ganz ohne zusätzliche technische Hürden. So stellen Sie sicher, dass Ihre Website barrierefrei nach WCAG gestaltet und gleichzeitig BFSG-konform ist.
Gezielte Unterstützung für rechtliche Sicherheit
CCM19 begleitet Sie aktiv dabei, Ihr Cookie-Banner barrierefrei und WCAG-konform umzusetzen, sodass Sie die Anforderungen des BFSG rechtssicher erfüllen können – ohne zusätzlichen Aufwand.
WCAG-konform und rechtssicher – Consent Management mit CCM19
CCM19 ermöglicht Ihnen auch ein umfassendes Consent-Management, dazu gehört u.a.:
Transparenz bei Einwilligungen schaffen
Mit dem CCM19 Consent Management dokumentieren Sie zuverlässig und transparent die Zustimmung Ihrer Nutzer – klar strukturiert und jederzeit nachvollziehbar. So bleiben Sie dauerhaft rechtskonform im Sinne der DSGVO und der WCAG-Richtlinien.
Regelmäßige Prüfung der DSGVO-Konformität
Ein automatischer Scanner überprüft regelmäßig, ob Ihre Website weiterhin die aktuellen Anforderungen der DSGVO erfüllt. So gewährleisten Sie kontinuierliche Rechtssicherheit.
Alle Einstellungen übersichtlich verwalten
CCM19 bündelt sämtliche Funktionen zur Verwaltung von Einwilligungen an einem Ort. Das spart Zeit, reduziert Komplexität und sorgt dafür, dass Ihre Website immer den aktuellen Anforderungen an Datenschutz und Barrierefreiheit gerecht wird.
Weitere Vorteile von CCM19
Optimale Ladegeschwindigkeit
Das CCM19 Cookie Banner ist schlank und Performance-optimiert, sodass Ihre Website blitzschnell lädt. So profitieren Ihre Besucher von einer reibungslosen Nutzererfahrung.
Professioneller Support
Unser erfahrenes Support-Team steht Ihnen bei allen Fragen rund um das Cookie-Banner per Telefon, E-Mail und Chat zur Verfügung – kompetent, freundlich und schnell erreichbar.
DSGVO- und BFSG-konform
Das CCM19 Cookie-Banner entspricht jederzeit den aktuellen gesetzlichen Anforderungen nach DSGVO und BFSG. Dadurch informieren Sie Ihre Nutzer immer transparent und rechtssicher.
Features für ein barrierefreies Cookie Banner
WCAG-Konformität mit CCM19: Übersicht aller erfüllten Kriterien
In der folgenden Tabelle sehen Sie auf einen Blick, wie das CCM19 Cookie Banner die Anforderungen der Web Content Accessibility Guidelines (WCAG 2.1) konkret erfüllt.
Nicht relevante Kriterien sind entsprechend gekennzeichnet.
| WCAG-Abschnitt | Beschreibung | Relevanz für CCM19 |
|---|---|---|
| 1.1 Text Alternatives | ||
| 1.1.1 Non-text Content | Alle nicht-textuellen Inhalte haben eine Text-Alternative: - Alle Eingabefelder haben ein Label oder aria-label - Alle rein dekorativen Elemente sind so markiert, dass sie von Screenreadern ignoriert werden (aria-hidden="true") - Alles, was nicht als Text abbildbar ist, hat zumindest eine kurze Beschreibung, was zu sehen oder zu hören ist. | ✅ |
| 1.2 Time-based Media | ||
| 1.2.1 Audio-only/Video-only (Prerecorded) | Audio: Es gibt eine alternative Darstellung für den Audioinhalt für Gehörlose. Video: Es gibt eine beschreibende Tonspur oder eine alternative Darstellung für Blinde. | Nicht relevant |
| 1.2.2 Captions (Prerecorded) | Videos haben Untertitel. | Nicht relevant |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | Videos enthalten eine beschreibende Tonspur oder eine alternative textuelle Darstellung. | Nicht relevant |
| 1.2.4 Captions (Live) | Es gibt Live-Untertitel für Live-Videos mit Ton. | Nicht relevant |
| 1.2.5 Audio Description (Prerecorded) | Es gibt eine Audiobeschreibung für Videoinhalte. | Nicht relevant |
| 1.2.6 Sign Language (Prerecorded) | Optional: Gebärdenvideos für Audioinhalte sind vorhanden. | Nicht relevant |
| 1.3 Adaptable | ||
| 1.3.1 Info and Relationships | Informationen, Strukturen und Beziehungen, die sich durch das Layout ergeben, sind programmatisch erkennbar (z. B. über for-Attribute, aria-labelledby, aria-controls) oder in Textform verfügbar. | ✅ |
| 1.3.2 Meaningful Sequence | Die sinnvolle Lesereihenfolge ist für Screenreader erkennbar. | ✅ |
| 1.3.3 Sensory Characteristics | Anweisungen stützen sich nicht allein auf das Aussehen (Form, Position, Farbe). | ✅ |
| 1.3.4 Orientation | Keine feste Beschränkung auf Hochformat oder Querformat, außer es ist absolut und begründet notwendig. | ✅ |
| 1.3.5 Identify Input Purpose | Der Zweck von Eingabefeldern kann programmatisch erkannt werden (z. B. mit type und autocomplete-Attribut). | ✅ |
| 1.3.6 Identify Purpose (optional, Level AAA) | Der Zweck aller UI-Elemente, Icons und Regionen kann programmatisch erkannt werden. | ✅ |
| 1.4 Distinguishable | ||
| 1.4.1 Use of Color | Farbe darf nie das einzige Merkmal sein, um eine Information zu vermitteln. Alternativen sind z. B. Helligkeitsunterschiede oder Formen. | ✅ |
| 1.4.2 Audio Control | Bei Audio, das länger als 3 Sekunden automatisch abspielt, gibt es eine Pausen-, Stoppfunktion oder Lautstärkeregler. | nicht relevant |
| 1.4.3 Contrast (Minimum) | Der minimale Kontrast für (Fließ-)Text beträgt 4.5:1. Für große Schrift (Überschriften u.ä., ab 18pt oder 14pt fett): 3:1 Deaktivierte Inputs/Buttons, Logos und rein dekorative Elemente haben keine Kontrastanforderung. | ✅ |
| 1.4.4 Resize Text | Text kann bis zu 200 % ohne Funktionsverlust vergrößert werden. | ✅ |
| 1.4.5 Images of Text | Bilder die Text enthalten werden vermieden, außer es ist absolut notwendig, oder der Text wird aus einer Nutzereingabe generiert. | ✅ |
| 1.4.6 Contrast (Enhanced) (optional, Level AAA) | Kontrastverhältnis ist 7:1 für (Fließ-)Text und 4.5:1 für große Schrift. | ✅ |
| 1.4.7 Low or No Background Audio | (ist erfüllt) | nicht relevant |
| 1.4.8 Visual Presentation (optional, Level AAA) | Einstellbar, dass der Text wie folgt angezeigt wird: - Vorder- und Hintergrundfarbe wählbar - nicht mehr als 80 Zeichen in einer Zeile - Kein Blocksatz - Zeilenabstand mindestens 1,5 - Absatzabstand 1,5x größer als der Zeilenabstand - Text kann auf bis zu 200% vergrößert werden, ohne dass man horizontal scrollen muss (auf üblichen Displays im Fullscreen) | ✅ |
| 1.4.9 Images of Text (No Exception) (optional, Level AAA) | siehe 1.4.5 | ✅ |
| 1.4.10 Reflow | Die Seite ist responsive → Alle Inhalte sind bei allen Bildschirmgrößen erreichbar und es ist kein Scrollen in zwei Dimensionen (vertikal+horizontal) nötig… bei vertikal laufenden Inhalten bei einer Breite von 320 CSS-Pixeln bei horizontal laufenden Inhalten bei einer Höhe von 256 CSS-Pixeln außer es ist absolut und begründet nötig für 2-dimensional dargestellte Dinge. | ✅ |
| 1.4.11 Non-text Contrast | UI-Elemente (Inputs, Buttons etc.) haben ein Kontrastverhältnis von mindestens 3:1, außer sie sind deaktiviert, oder das Standard-Browser-Input wird verwendet. Grafiken, die für den Inhalt wichtig sind, haben auch einen Mindestkontrast von 3:1. | ✅ |
| 1.4.12 Text Spacing | Wenn die folgenden Textformatierungen vom Browser erzwungen werden, funktioniert die Seite weiter problemlos: - Zeilenhöhe von 1,5 - Absatzabstand: 2 x Fontsize - Buchstabenabstand: 0,12 x Fontsize - Wortabstand: 0,16 x Fontsize | ✅ |
| 1.4.13 Content on Hover or Focus | Wenn Inhalte durch Hover/Fokussieren eines Elements hinzugefügt/entfernt werden (Overlays, Popovers), dann: - können diese geschlossen werden (dismissible), außer sie überdecken nie etwas anderes oder kommunizieren einen Eingabefehler, - kann der Cursor über den Popover bewegt werden, ohne dass er verschwindet, - bleibt der Inhalt sichtbar, bis er geschlossen wird, der Fokus weggenommen wird, oder die Information nicht mehr gültig ist. | ✅ |
| 2.1 Keyboard Accessible | ||
| 2.1.1 Keyboard | Alle Funktionalität ist mit der Tastatur erreichbar und steuerbar (außer unmöglich für das vorhandene Interface, z. B. handschriftliche Unterschrift mit der Maus). Die Funktionalität hängt nicht von einer bestimmten Tippgeschwindigkeit ab. | ✅ |
| 2.1.2 No Keyboard Trap | Der Tastaturfokus wird nicht eingesperrt. Falls es für eine Funktion doch nötig ist und das nicht mit den normalen Tasten (Tab etc.) möglich ist, ist der Weg, wie der Fokus rausgenommen wird, mit der Tastatur möglich und auf der Seite beschrieben. | ✅ |
| 2.1.3 Keyboard (No Exception) (optional, Level AAA) | siehe 2.1.1 | ✅ |
| 2.1.4 Character Key Shortcuts | Wenn es Keyboard Shortcuts gibt, die nur normale (druckbare) Tasten ohne Modifier (Ctrl, Alt, …) verwenden, sind diese entweder: - abschaltbar, - umstellbar auf Ctrl, Alt, … + die Taste, - oder nur aktiv, während das betreffende Element den Fokus hat. | ✅ |
| 2.2 Enough Time | ||
| 2.2.1 Timing Adjustable (optional, Level AAA) | Wenn es Zeitlimits (<20h) gibt, sind diese entweder abschaltbar, auf mindestens bis zu 10x anpassbar oder lassen sich verlängern. | ✅ |
| 2.2.2 Pause, Stop, Hide | Blinkende, sich automatisch bewegende oder scrollende Inhalte länger als 5s lassen sich pausieren, stoppen oder verstecken. Automatisch aktualisierende Inhalte, die parallel zu anderem angezeigt werden, lassen sich pausieren, stoppen oder verstecken bzw. die Update-Frequenz einstellen. | ✅ |
| 2.2.3 No Timing | Keine Zeitlimits oder Abhängigkeiten von der Reaktionszeit des Users. | ✅ |
| 2.2.4 Interruptions (optional, Level AAA) | Unterbrechungen können vom User verzögert oder unterdrückt werden, außer für Notfall-Meldungen. | ✅ |
| 2.2.5 Re-authenticating (optional, Level AAA) | Wenn die Sitzung abläuft, kann der Benutzer die Aktivität fortsetzen, ohne Daten zu verlieren. | ✅ |
| 2.2.6 Timeouts (optional, Level AAA) | Benutzer werden gewarnt und über das Zeitlimit informiert, wenn Inaktivität zu Datenverlust führen kann, außer die Daten werden für mehr als 20 h gehalten. | ✅ |
| 2.3 Seizures and Physical Reactions | ||
| 2.3.1 Three Flashes or Below Threshold | Nichts flackert mehr als 3x pro Sekunde auf mehr als zusammen 300x200 px. | ✅ |
| 2.3.2 Three Flashes (optional, Level AAA) | Nichts flackert mehr als 3x pro Sekunde. | ✅ |
| 2.3.3 Animation from Interactions (optional, Level AAA) | Alle nicht notwendigen Bewegungsanimationen lassen sich ausschalten. Bewegungsanimationen: Bewegungen und Größenänderungen, nicht nur Farbänderung oder Ausblenden. | ✅ |
| 2.4 Navigable | ||
| 2.4.1 Bypass Blocks | Blöcke, die sich auf mehreren Seiten wiederholen (Header, Navigation etc.), lassen sich mit einem Mechanismus für Screenreader überspringen – etwa über Navigationslinks, ARIA landmarks, Sections mit Überschriften oder Einklappmenüs. | ✅ |
| 2.4.2 Page Titled | Die Seite hat einen sinnvollen Titel. | ✅ |
| 2.4.3 Focus Order | Die Tab-Fokus-Reihenfolge ist sinnvoll. | ✅ |
| 2.4.4 Link Purpose (In Context) | Der Zweck eines Links ist aus dem Link-Text (bzw. maximal zusammen mit dem umgebenden Text oder Tabellenüberschriften) erkennbar. | ✅ |
| 2.4.5 Multiple Ways | Es gibt mehr als einen Weg, eine Seite zu erreichen (Ausnahme: z. B. in Wizards oder Bestellbestätigungsseiten). Umsetzbar mit "Links zu verwandten Seiten", Inhaltsverzeichnis, Sitemap oder Suchfunktion. | ✅ |
| 2.4.6 Headings and Labels | Es gibt beschreibende Überschriften und Labels. | ✅ |
| 2.4.7 Focus Visible | Der Tastaturfokus ist beim Durchtabben immer sichtbar. | ✅ |
| 2.4.8 Location (optional, Level AAA) | Die aktuelle Position in der Website (z. B. über Breadcrumbs) ist erkennbar. | ✅ |
| 2.4.9 Link Purpose (Link Only) (optional, Level AAA) | Der Zweck eines Links ist immer aus dem Link-Text erkennbar, außer er ist auch für Personen ohne Behinderung uneindeutig. | ✅ |
| 2.4.10 Section Headings (optional, Level AAA) | Bereichsüberschriften werden zum Organisieren der Inhalte verwendet. | ✅ |
| 2.5 Input Modalities | ||
| 2.5.1 Pointer Gestures | Alle Interaktionen mit Bewegungsgesten, bei denen nicht nur Start- und Endpunkt wichtig sind oder mehrere Finger benötigt werden, können auch mit einer einfacheren Geste bzw. Mausklicks durchgeführt werden. | ✅ |
| 2.5.2 Pointer Cancellation | Eine Aktion wird nicht beim mousedown, sondern erst beim Loslassen der Maus über dem Element abgeschlossen und ist abbrechbar bzw. rückgängig machbar. | ✅ |
| 2.5.3 Label in Name | Der ARIA-Label enthält den sichtbaren Label-/Button-Text. | ✅ |
| 2.5.4 Motion Actuation | Alle Funktionen, die über Bewegen/Schütteln/Drehen des Geräts ausgelöst werden, können alternativ in der UI gesteuert werden und die Reaktion auf Bewegungen kann abgeschaltet werden. | nicht relevant |
| 2.5.5 Target Size (optional, Level AAA) | Klickbare Elemente sind mindestens 44 × 44 CSS-Pixel groß oder es gibt eine entsprechend große Alternative – ausgenommen Links im Fließtext. | ✅ |
| 2.5.6 Concurrent Input Mechanisms (optional, Level AAA) | Die Website beschränkt die Eingabemethode nicht unnötig. Touch, Maus und Tastatur funktionieren gleich gut, und es kann problemlos zwischen diesen gewechselt werden. | ✅ |
| 3.1 Readable | ||
| 3.1.1 Language of Page | Die Hauptsprache der Seite ist programmatisch erkennbar. | ✅ |
| 3.1.2 Language of Parts | Sprachwechsel in einzelnen Abschnitten oder Wörtern sind programmatisch gekennzeichnet. Ausnahmen: Fachwörter, Eigennamen u.ä. | ✅ |
| 3.1.3 Unusual Words (optional, Level AAA) | Für ungewöhnliche Wörter gibt es einen Mechanismus mit einer Erklärung (<dl>, <dfn>, Glossar o.ä.). | ✅ |
| 3.1.4 Abbreviations (optional, Level AAA) | Für Abkürzungen gibt es einen Mechanismus mit der ausgeschriebenen Form oder Bedeutung. | ✅ |
| 3.1.5 Reading Level (optional, Level AAA) | Für kompliziertere Sprache als Hauptschul-Level gibt es Erklärtexte oder eine einfachere Alternative. | ✅ |
| 3.1.6 Pronunciation (optional, Level AAA) | Wenn die Aussprache eines Worts vom Kontext abhängt oder die Bedeutung ohne Aussprache unklar ist, ist die Aussprache identifizierbar. | ✅ |
| 3.2 Predictable | ||
| 3.2.1 On Focus | Nur durch das Setzen des Fokus auf ein Element wird kein Seitenwechsel oder ähnlich großflächiger Eingriff in die Seite ausgelöst. | ✅ |
| 3.2.2 On Input | Nur durch das Verändern des Werts eines Input-Elements wird kein Seitenwechsel oder Fokuswechsel ausgelöst – außer der User wurde vorher informiert. | ✅ |
| 3.2.3 Consistent Navigation | Die Navigation ist auf der Website konsistent. Die Reihenfolge der Menüpunkte bleibt gleich, außer der User ändert sie absichtlich. | ✅ |
| 3.2.4 Consistent Identification | Elemente mit gleicher Funktion sind konsistent benannt und erkennbar. | ✅ |
| 3.2.5 Change on Request (optional, Level AAA) | Seitenwechsel und ähnlich großflächige Eingriffe (sowie Fokusverschiebungen) werden nur auf Wunsch des Users ausgelöst oder können deaktiviert werden. | ✅ |
| 3.3 Input Assistance | ||
| 3.3.1 Error Identification | Bei Eingabefehlern wird das Eingabefeld mit dem Fehler identifiziert und das Problem beschrieben. | ✅ |
| 3.3.2 Labels or Instructions | Labels oder Anleitungen unterstützen bei der Eingabe. | ✅ |
| 3.3.3 Error Suggestion | Bei erkannten Fehlern werden Korrekturen vorgeschlagen (sofern sicher möglich). | ✅ |
| 3.3.4 Error Prevention (Legal, Financial, Data) | Rechtlich oder finanziell relevante Eingaben sind rückgängig machbar oder werden geprüft. | ✅ |
| 3.3.5 Help (optional, Level AAA) | Kontextbezogene Hilfe ist vorhanden. | ✅ |
| 3.3.6 Error Prevention (All) (optional, Level AAA) | Bei allen Usereingaben ist die Eingabe entweder rückgängig machbar, wird auf Fehler überprüft (mit Korrekturmöglichkeit) oder es erfolgt eine Bestätigung mit Review der Änderungen. | ✅ |
| 4.1 Compatible | ||
| 4.1.1 Parsing | Das HTML ist valide, IDs sind eindeutig. | ✅ |
| 4.1.2 Name, Role, Value | Für Nicht-Standard-Form-Elemente sind Name/Label und Rolle/Funktion programmatisch erkennbar. ARIA-Zustände und -Eigenschaften werden gesetzt. | ✅ |
| 4.1.3 Status Messages | Live-Statusmeldungen können programmatisch als solche erkannt werden. | ✅ |
Häufig gestellte Fragen
Haben wir Ihr Interesse geweckt?
Möchten auch Sie Ihre Webseite barrierefrei gestalten und benötigen ein BFSG- und DSGVO-konformes Cookie Banner, haben aber noch Fragen zur Vertragsgestaltung oder zu den technischen Fähigkeiten des Systems? Kein Problem - wir helfen Ihnen gerne weiter! Füllen Sie einfach alle mit einem Stern (*) markierten Felder aus und wir melden uns schnellstmöglich bei Ihnen zurück. Wir freuen uns auf Ihre Anfrage!
Bei Fragen erreichen Sie uns natürlich auch per Telefon, E-Mail oder über unser Kontaktformular.
Tel: +49 228 536 637 26
E-Mail: info@ccm19.de