Mit den aktuellen Updates orientiert sich Onepage an den Anforderungen der WCAG 2.1 Level AA Richtlinien und verbessert damit die Zugänglichkeit deiner Websites deutlich.
Onepage hat umfassende technische Verbesserungen im Bereich Barrierefreiheit umgesetzt. Diese laufen größtenteils automatisch im Hintergrund, sodass deine bestehenden Projekte nach dem nächsten Veröffentlichen davon profitieren.
📌 Hinweis: Du musst deine Website einmal neu veröffentlichen, damit alle Verbesserungen aktiv werden. Das Design deiner Website bleibt dabei unverändert.
Technische Verbesserungen
Viele Bereiche wurden technisch optimiert:
Verbesserter Screenreader-Support (Buttons beschriftet, aktuelle Seite in der Navigation markiert, Alt-Texte vervollständigt)
Vollständige Tastaturbedienbarkeit (Alle Menüpunkte, Buttons und Links per Tastatur erreichbar, "Skip to content"-Link ergänzt)
Sichtbare Fokus-Indikatoren für alle interaktiven Elemente
Verbesserte Formular-Accessibility (Labels korrekt verknüpft, Fehler werden vorgelesen, Pflichtfelder angekündigt)
Überarbeitete Widgets (Dropdowns, Range Slider, Date Picker, Uploads etc.)
Verbesserte Modals & Overlays (Fokus bleibt innerhalb des Dialogs, Escape-Taste schließt, Cookie-Banner zugänglich)
Semantische Seitenstruktur (HTML-Struktur mit echten Landmark-Elementen, statt generischer Divs)
Barrierefreie Templates (mit geprüften Farbkontrasten, logischer Überschriftenstruktur, korrekten Alt-Texten und vorkonfigurierter Seitenstruktur)
📌 Hinweis: Weitere Verbesserungen sind bereits in Planung, darunter weitere Accessibility-Optimierungen im Editor und laufende Erweiterung der technischen Standards.
Seitenstruktur: Header, Hauptbereich & Footer
Du kannst einzelnen Abschnitten deiner Seite jetzt eine semantische Rolle zuweisen:
Kopfzeile (Header)
Hauptbereich (Main)
Fußzeile (Footer)
Das verbessert insbesondere:
die Navigation für Screenreader
die Bedienung per Tastatur
die semantische HTML-Struktur deiner Seite
die WCAG-Konformität
Die Einstellung dazu findest du direkt in dem jeweiligen Abschnitt im Editor unter Position.
Klicke dazu im gewünschten Abschnitt auf die drei Punkte oben rechts und wähle anschließend die passende Rolle aus, also "Kopfzeile" für den Header:
und "Fußzeile" für den Footer:
Es ist auch möglich, mehrere Abschnitte gemeinsam als Kopfzeile oder Fußzeile zu definieren.
In der Seitenstruktur kannst du jetzt nachvollziehen, wie deine Abschnitte semantisch für die Barrierefreiheit aufgebaut und organisiert sind.
Auch in den Seiten-Einstellungen im Reiter "SEO" unter "Landmark-Struktur" wird die Struktur deiner Seite angezeigt. Das hilft Suchmaschinen zusätzlich, den Aufbau deiner Website besser zu verstehen.
📌 Hinweis: Diese Einstellungen solltest du auf allen Unterseiten deiner Website vornehmen.
Pinch-to-Zoom auf Mobilgeräten
Besucher können deine Website jetzt wieder frei per Finger auf Mobilgeräten zoomen.
Das ist besonders wichtig für:
Menschen mit Sehbeeinträchtigungen
mobile Barrierefreiheit
Dieses Verhalten ist bewusst so umgesetzt. Damit die Änderung sichtbar wird, veröffentliche deine Website.
Reduce Motion (Bewegung reduzieren)
Onepage berücksichtigt automatisch die Systemeinstellung "Bewegung reduzieren" des Besuchers.
Wenn diese Einstellung auf dem Gerät aktiviert ist, werden Animationen oder Videos automatisch reduziert oder deaktiviert. Dazu gehören zum Beispiel:
Scroll-Animationen
Einblendungen
Zahlen- und Statistikanimationen
Slider-Effekte
sowie Videos die sofort abgespielt werden
Du musst hierfür nichts manuell einstellen, das passiert automatisch.
Damit die Änderung aktiv wird, veröffentliche deine Website einfach erneut, falls die letzte Veröffentlichung (Update) schon länger zurückliegt.
Barrierefreie Templates
Unsere neuen barrierefreien Templates sind speziell dafür entwickelt worden, Websites von Anfang an strukturell korrekt und zugänglich aufzubauen. Sie bieten eine saubere Grundlage für bessere Nutzerfreundlichkeit und höhere Reichweite und erfüllen wichtige Standards für Barrierefreiheit im Web.
Der Vorteil: Du musst dich nicht selbst um technische Details wie korrekte Landmark-Strukturen, Farbkontraste oder Überschriften-Hierarchien kümmern, das ist bereits im Template berücksichtigt. Dadurch sind die Seiten direkt besser lesbar für Screenreader, klarer strukturiert für Nutzer und insgesamt professioneller aufgebaut.
Schritt 1: Projekt erstellen
Um ein neues Projekt anzulegen, gehe in die Übersicht deiner Projekte in deinem Account und klicke dort oben rechts auf den blauen Button "Projekt erstellen".
Alternativ kannst du auch in einem bestehenden Projekt eine neue Seite anlegen.
Schritt 2: Template auswählen
Gehe zum Reiter Barrierefrei optimiert. Dort findest du 10 Templates, die von unserem Designteam speziell erstellt wurden. Du kannst dir die Vorlagen in Ruhe ansehen und eine davon auswählen.
Anschließend kannst du wie gewohnt mit der Bearbeitung beginnen und deine eigenen Inhalte einfügen.
📌 Hinweis: Die Templates sind bereits strukturell und technisch auf Barrierefreiheit optimiert (Farbkontraste, Überschriftenlogik, Landmark-Struktur). Wenn du jedoch nachträglich größere Änderungen an Layout, Farben oder Struktur vornimmst, kann diese Barrierefreiheit teilweise verloren gehen.
Daher empfehlen wir, bei Anpassungen darauf zu achten, dass Kontraste und Struktur weiterhin sinnvoll erhalten bleiben.
Benutzerdefinierte Attribute (fortgeschritten)
Du kannst jetzt eigene IDs, Klassen und Data-Attribute an einzelne Abschnitte vergeben.
Diese Funktion ist vor allem für fortgeschrittene Kunden gedacht, die eigene Code-Lösungen verwenden und bestimmte Bereiche ihrer Website gezielt ansprechen möchten, zum Beispiel für Custom Scripts, Animationen oder externe Tools.
Das ist besonders relevant für:
Accessibility-Anpassungen
Custom Code & externe Skripte
gezielte Scroll-Ziele oder Ankerpunkte
AI / Vibe Coding / Integrationen
Über diese Attribute können einzelne Abschnitte oder Elemente eindeutig identifiziert und in eigenem Code gezielt angesprochen werden.
Klicke dazu bei dem gewünschten Abschnitt auf die drei Punkte oben rechts, dann auf "Benutzerdefinierte Attribute" und füge dort deine ID, Klasse oder data attribut hinzu:
📌 Hinweis: Onepage stellt diese Funktion zur Verfügung, bietet jedoch keine Erstellung von individuellem Custom Code an.
Du kannst entweder unsere KI (Vibe Coding) nutzen, um bestimmte Elemente gezielt anzusprechen oder einen eigenen Code erstellen. Wir können bei individuellen Code-Implementierungen nur eingeschränkt helfen.
Viewport-Skalierung
Unter Projekteinstellungen → SEO → Barrierefreiheit → Viewport-Skalierung
kannst du das mobile Zoom-Verhalten steuern.
Das beeinflusst:
Zoom auf Smartphones
Safari Verhalten bei Formularfeldern
mobile Accessibility
📌 Hinweis: Die aktivierte Skalierung verbessert die Barrierefreiheit deutlich.
Ergänzende Maßnahmen zur Barrierefreiheit
Neben den technischen Verbesserungen von Onepage kannst du die Barrierefreiheit deiner Website zusätzlich selbst verbessern durch:
gute Farbkontraste
sinnvolle Überschriftenstruktur
Alt-Texte für Bilder
verständliche Inhalte
Mehr dazu findest du hier: Tipps zu barrierefreien Inhalten
Häufig gestellte Fragen (FAQ)
Muss ich meine Website neu veröffentlichen?
Muss ich meine Website neu veröffentlichen?
Ja, ein einmaliges erneutes Veröffentlichen aktiviert alle Verbesserungen.
Ändert sich dadurch mein Design?
Ändert sich dadurch mein Design?
Nein, alle Änderungen sind rein technischer Natur.
Ist meine Website jetzt vollständig barrierefrei?
Ist meine Website jetzt vollständig barrierefrei?
Die technische Basis wurde stark verbessert. Inhalte (Texte, Bilder, Farben) liegen weiterhin in deiner Verantwortung.
Was bedeutet WCAG 2.1 AA?
Was bedeutet WCAG 2.1 AA?
WCAG steht für Web Content Accessibility Guidelines und es handelt sich um die Version 2.1 der Stufe AA, es handelt sich dabei um einen internationalen Standard für digitale Barrierefreiheit im Web.
Warum werden Videos, Animationen oder Bewegungen auf meiner Website plötzlich nicht mehr angezeigt?
Warum werden Videos, Animationen oder Bewegungen auf meiner Website plötzlich nicht mehr angezeigt?
Das liegt in den meisten Fällen an der aktivierten Betriebssystem-Einstellung "Reduce Motion" (Bewegung reduzieren). Diese Einstellung reduziert oder deaktiviert Animationen, Bewegungen und teilweise auch bestimmte Videos.
Diese Einstellung wird nicht direkt im Browser aktiviert, sondern auf Betriebssystem-Ebene gesetzt. Browser wie Chrome, Safari oder Firefox übernehmen diese Einstellung automatisch über die CSS Media Query prefers-reduced-motion.
Je nach Gerät kann die Einstellung hier aktiviert sein:
macOS: Systemeinstellungen → Bedienungshilfen → Anzeige → "Bewegung reduzieren"
iPhone / iPad: Einstellungen → Bedienungshilfen → Bewegung → "Bewegung reduzieren"
Windows 11: Einstellungen → Barrierefreiheit → Visuelle Effekte → "Animationseffekte"
Windows 10: Einstellungen → Erleichterte Bedienung → Anzeige → "Animationen in Windows anzeigen"
Android: Einstellungen → Bedienungshilfen → "Animationen entfernen" (je nach Hersteller unterschiedlich)
Linux (GNOME): Einstellungen → Barrierefreiheit → "Animationen reduzieren"
Zum Testen kann die Funktion auch direkt im Browser in den Chrome DevTools simuliert werden:
F12 öffnen
Cmd/Ctrl + Shift + P drücken
"Emulate CSS prefers-reduced-motion: reduce" eingeben
Damit lässt sich schnell prüfen, wie sich die Website mit reduzierten Bewegungen verhält, ohne die Systemeinstellungen ändern zu müssen.
💡Du hast Feedback zu diesem Hilfe-Artikel? Teile es gerne mit uns über den Live-Chat oder an support@onepage.io, damit wir ihn auf dem neuesten Stand halten können. 🙂