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)
📌 Hinweis: Weitere Verbesserungen sind bereits in Planung, darunter zusätzliche barrierefreie Templates, 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 automatisch reduziert oder deaktiviert. Dazu gehören zum Beispiel:
Scroll-Animationen
Einblendungen
Zahlen- und Statistikanimationen
Slider-Effekte
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.
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.
💡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. 🙂