Der European Accessibility Act (EAA) trat am 28. Juni 2025 vollständig in Kraft und stellte neue Anforderungen an die Barrierefreiheit von Websites. Für Unternehmen, die in der EU tätig sind oder Kunden in der EU bedienen, ist es von entscheidender Bedeutung, die Barrierefreiheit zu verbessern und sich an diese neuen Standards anzupassen. Mit dem Accessibility Widget von iubenda war es noch nie so einfach, Ihre Website barrierefrei zu gestalten.
Das neue Accessibility Widget von iubenda verwendet KI-gestützte Anpassungen, um Ihre Website automatisch für Nutzer mit verschiedenen Behinderungen barrierefreier zu machen. Die Lösung unterstützt eine Reihe von Funktionen für bessere Barrierefreiheit, die es den Nutzern erleichtern, auf Ihrer Website zu navigieren und mit ihr zu interagieren.
Was ist das Accessibility Widget von iubenda?
Das Accessibility Widget von iubenda ist ein vollständig automatisiertes Widget zur Verbesserung der Barrierefreiheit Ihrer Website. Es passt Ihre Website in Echtzeit an die Bedürfnisse von Nutzern mit Behinderungen an, zum Beispiel durch Barrierefreiheitsprofile, die Größenanpassung von Text, kontrastreiche Modi, gut lesbare Schriftarten und mehr. Einige der Vorteile unseres Tools:
- KI-Alt-Text und Seitenstruktur: Ergänzt Bilder um Alt-Text und erkennt Überschriften und Seitenbereiche, während Besucher surfen. Das hilft Menschen, die Screenreader nutzen.
- 🔳 Kontrast und Textanpassung: Ermöglicht Nutzern, den Kontrast und die Schriftgröße an ihre Bedürfnisse anzupassen.
- ⌨️ Tastenkombinationen: Mit Alt+0 öffnen oder schließen Besucher das Panel, mit Alt+9 pausieren sie die Anpassungen oder stellen sie wieder her.
- 🌀 Kontrolle über dynamische Inhalte: Ermöglicht Nutzern mit Epilepsie oder anderen Erkrankungen, Animationen oder dynamische Inhalte zu deaktivieren, die schädlich sein könnten.
Dank des einfachen Installationsprozesses können Sie sofort loslegen, ohne den Code Ihrer Website überarbeiten zu müssen.
Schritt 1: Accessibility Widget aktivieren
- Rufen Sie das iubenda-Dashboard auf: Auf Ihrem iubenda-Dashboard finden Sie unter Ihren verfügbaren Produkten die Kachel Accessibility Widget.
- Widget aktivieren: Klicken Sie auf die Schaltfläche Aktivieren, um das Accessibility Widget zu verwenden.
Schritt 2: Accessibility Widget anpassen
Sobald Sie das Accessibility Widget aktiviert haben, können Sie es mit dem Konfigurator des Accessibility Widget an das Erscheinungsbild Ihrer Website anpassen. Der Konfigurator ist sowohl in den neuen Preisplänen als auch in älteren Plänen verfügbar.
- Rufen Sie Ihr iubenda-Dashboard auf.
- Suchen Sie die Kachel Accessibility Widget.
- Klicken Sie auf die Schaltfläche Einstellungen, um den Konfigurator zu öffnen.
So sieht der Konfigurator aus:
Im Konfigurator finden Sie mehrere Optionen, mit denen Sie das Widget individuell gestalten können:
- Position der Widget-Schaltfläche: Legen Sie fest, wo die Schaltfläche des Widgets auf dem Bildschirm erscheint: oben links, unten links, unten rechts oder oben rechts.
👉 Das Panel des Widgets öffnet sich immer vom unteren Bildschirmrand aus.
- Farben des Panels: Wählen Sie eine Primärfarbe für das Panel, passend zum Design Ihrer Website. Im Standard-Plan können Sie außerdem eine Sekundärfarbe für ausgewählte Elemente festlegen. Ohne Sekundärfarbe verwendet das Widget die Primärfarbe. Bei zu geringem Kontrast sehen Sie einen Hinweis, können aber trotzdem speichern.
- Aussehen der Widget-Schaltfläche: Passen Sie die Farbe des Symbols und die Hintergrundfarbe der Schaltfläche an.
- Standardsprache: Das Widget zeigt sein Panel in der Sprache der jeweiligen Seite an. Fehlt die Sprachangabe einer Seite oder ist die Sprache nicht verfügbar, verwendet es die Sprache, die Sie hier festlegen.
💡 Das Panel des Widgets enthält keinen Link zu einer Erklärung zur Barrierefreiheit. Wenn Sie eine haben, verlinken Sie sie in der Fußzeile Ihrer Website, damit Besucher sie auf jeder Seite finden. Sie möchten eine erstellen? Lesen Sie unseren Leitfaden zur Erklärung zur Barrierefreiheit.
💡 Alle Änderungen, die Sie im Konfigurator vornehmen, werden automatisch auf Ihr Accessibility Widget übertragen, auch wenn es bereits auf Ihrer Website eingebettet ist.
Schritt 3: Accessibility Widget auf Ihrer Website installieren
Sobald das Widget aktiviert ist, können Sie es auf Ihrer Website einbetten.
-
Widget einbetten: Kopieren Sie den mitgelieferten Code-Snippet für das Accessibility Widget und fügen Sie ihn ganz am Anfang des Head-Bereichs Ihrer Website ein (direkt nach dem
<head>-Tag), um das Widget zu installieren. - Funktionalität des Widgets prüfen: Aktualisieren Sie nach dem Einbetten Ihre Website, um sicherzustellen, dass das Widget sichtbar ist und funktioniert. Sie sollten nun ein kleines Accessibility-Symbol sehen:
So funktioniert‘s für Ihre Endnutzer
Sobald das Accessibility Widget in Ihre Website eingebettet und aktiv ist, können Endnutzer damit interagieren, um ihr Surf-Erlebnis anzupassen. Wenn Nutzer ihre Einstellungen über das Widget ändern, wird das Layout der Website in Echtzeit angepasst, sodass der Inhalt sofort je nach gewählten Einstellungen optimiert wird. Hier erfahren Sie, wie sich das Widget verhält und welche Funktionen es bietet:
- Erscheinungsbild des Widgets: Das Accessibility Widget erscheint als kleines Symbol. Wenn Ihre Nutzer darauf klicken, öffnet sich ein Menü mit Optionen für die Barrierefreiheit, mit denen Sie das Layout der Website nahtlos anpassen können.
- Nutzerpräferenzen: Nutzer können mit dem Widget ihre Präferenzen für die Barrierefreiheit auswählen, z. B:
- Textgröße: Nutzer können die Größe des Textes für eine bessere Lesbarkeit anpassen.
- Kontrasteinstellungen: Durch Kontrastanpassungen kann der Inhalt deutlicher hervorgehoben werden, insbesondere für Menschen mit Sehbehinderungen.
- Gut lesbare Schriftarten: Besucher können zu Schriftarten wechseln, die das Lesen erleichtern, zum Beispiel Atkinson Hyperlegible und OpenDyslexic.
- Profile (Standard-Plan): Voreinstellungen mit einem Klick für Sehschwäche, Anfälle & Epilepsie, Motorische Einschränkungen, Legasthenie, Kognition & Lernen, ADHS, Screenreader und Farbenblindheit. Sie ändern, was Besucher sehen, nicht den Code Ihrer Website.
- Textgröße und -stil: Vergrößert oder passt den Text so an, dass er besser lesbar ist, ohne dass die Seite neu geladen werden muss.
- Kontrast: Ändert die Hintergrund- und Textfarben, um die Sichtbarkeit für Nutzer mit Farbenblindheit oder einer Sehbehinderung zu verbessern.
- Kontrolle über dynamische Inhalte: Für Nutzer, die empfindlich auf Animationen oder blinkende Inhalte reagieren, bietet das Widget die Möglichkeit, Animationen zu deaktivieren oder das Verhalten dynamischer Inhalte zu ändern. Dies ist besonders vorteilhaft für Menschen mit Erkrankungen wie Epilepsie.
- Seitenstruktur: Ein Tab, der die Überschriften, Seitenbereiche und Links der Seite auflistet, damit Besucher direkt zum gewünschten Abschnitt springen können. Mit Alt+0 öffnen oder schließen Besucher außerdem das Panel, mit Alt+9 pausieren sie die Anpassungen oder stellen sie wieder her.
- KI-Alt-Text und Seitenbereiche: Das Widget ergänzt Bilder um Alt-Text und erkennt Überschriften und Seitenbereiche, während Besucher surfen, im Rahmen der monatlichen Limits Ihres Plans. Das hilft Menschen, die Screenreader nutzen.
- Bequem und leicht zugänglich: Die Einstellungen für die Barrierefreiheit sind jederzeit leicht zugänglich. Das Widget befindet sich an einer festen Position auf der Website, so dass Ihre Nutzer bei Bedarf Änderungen vornehmen können.
Mit dem Accessibility Widget von iubenda können Sie die Barrierefreiheit Ihrer Website verbessern und allen Nutzern ein besseres, integratives Erlebnis bieten.