With its latest updates, Onepage aligns with the requirements of the WCAG 2.1 Level AA guidelines, significantly improving the accessibility of your websites.
Onepage has implemented comprehensive technical improvements in the area of accessibility. These updates run mostly automatically in the background, so your existing projects will benefit from them the next time you publish.
📌 Please note: You'll need to republish your website once for all the improvements to take effect. Your website's design will remain unchanged.
Technical improvements
Many areas have been technically optimized:
Improved screen reader support (labels added to buttons, current page highlighted in the navigation, alt text completed)
Full keyboard accessibility (all menu items, buttons, and links accessible via keyboard; "Skip to content" link added)
Visible focus indicators for all interactive elements
Improved form accessibility (labels correctly linked, errors read aloud, required fields announced)
Revised widgets (dropdowns, range sliders, date pickers, uploads, etc.)
Improved modals & overlays (focus remains within the dialog, Escape key closes, cookie banner accessible)
Semantic page structure (HTML structure with real landmark elements instead of generic divs)
Accessible templates (with verified color contrasts, logical heading structure, correct alt text, and preconfigured page structure)
📌 Please note: Further improvements are already in the works, including additional accessibility enhancements in the editor and ongoing expansion of technical standards.
Page structure: Header, main content area & footer
You can now assign a semantic role to individual sections of your page:
Header
Main
Footer
In particular, this improves:
navigation for screen readers
keyboard navigation
the semantic HTML structure of your page
WCAG compliance
You can find this setting directly in the relevant section of the editor under Location.
To do this, click the three dots in the upper-right corner of the desired section, then select the appropriate role, so "Header" for the header:
and "Footer" for the footer:
It is also possible to define multiple sections together as a header or footer.
In the page structure, you can now see how your sections are structured and organized semantically for accessibility.
Your page's structure is also displayed in the page settings under the "SEO" tab, in the "Landmark structure" section. This further helps search engines better understand the structure of your website.
📌 Please note: You should apply these settings to all subpages of your website.
Pinch-to-zoom on mobile devices
Visitors can now freely zoom in on your website using their fingers on mobile devices.
This is especially important for:
People with visual impairments
Mobile accessibility
This behavior has been implemented intentionally. To make the change visible, publish your website.
Reduce Motion
Onepage automatically takes into account the visitor's “Reduce Motion” system setting.
If this setting is enabled on the device, animations or videos will be automatically reduced or disabled. These include, for example:
Scroll animations
Fade-in effects
Number and statistics animations
Slider effects
as well as videos that play immediately
You don't need to adjust any settings manually, this happens automatically.
To apply the change, simply republish your website if the last publication (update) was some time ago.
Accessible Templates
Our new accessible templates have been specifically designed to help you build websites that are structurally sound and accessible from the very start. They provide a solid foundation for improved user-friendliness and greater reach, and meet key web accessibility standards.
The advantage: You don’t have to worry about technical details like correct landmark structures, color contrasts, or heading hierarchies, these are already built into the template. As a result, the pages are immediately more readable for screen readers, more clearly structured for users, and have a more professional overall design.
Step 1: Create a project
To create a new project, go to the project overview in your account and click the blue "Create project" button in the top-right corner.
Alternatively, you can also create a new page in an existing project.
Step 2: Select a template
Go to the Optimized for Accessibility tab. There you'll find 10 templates that were created specifically by our design team. Take your time to look through the templates and choose one.
You can then start editing as usual and add your own content.
📌 Please note: The templates are already structurally and technically optimized for accessibility (color contrast, heading hierarchy, landmark structure). However, if you make significant changes to the layout, colors, or structure later on, some of this accessibility may be lost.
Therefore, we recommend ensuring that contrasts and structure are maintained in a meaningful way when making adjustments.
Custom attributes (advanced)
You can now assign custom IDs, CSS classes and data attributes to individual sections.
This feature is primarily intended for advanced users who use their own code solutions and want to target specific areas of their website, for example, for custom scripts, animations, or external tools.
This is particularly relevant for:
Accessibility adjustments
Custom code & external scripts
Targeted scroll targets or anchor points
AI / Vibe Coding / Integrations
These attributes allow individual sections or elements to be uniquely identified and specifically targeted in your own code.
To do this, click the three dots in the top-right corner of the section you want, then click "Custom attributes" and add your ID, class or data attribute there:
📌 Please note: Onepage provides this feature but does not offer custom code development.
You can either use our AI (Vibe Coding) to target specific elements or create your own code. We can only provide limited assistance with custom code implementations.
Viewport scaling
Under Project Settings → SEO → Accessibility settings→ Viewport scaling you can control the mobile zoom behavior.
This affects:
Zoom on smartphones
Safari behavior with form fields
Mobile accessibility
📌 Please note: Enabling zoom significantly improves accessibility.
Additional measures to ensure accessibility
In addition to the technical improvements made by Onepage, you can further improve your website’s accessibility on your own by:
using good color contrast
creating a logical heading structure
providing alt text for images
ensuring content is easy to understand
You can find more information here: Tips for Creating Content Compliant with the European Accessibility Act (EAA)
Frequently Asked Questions (FAQ)
Do I need to republish my website?
Do I need to republish my website?
Yes, republishing once will activate all the improvements.
Will this change my design?
Will this change my design?
No, all the changes are purely technical.
Is my website now fully accessible?
Is my website now fully accessible?
The technical infrastructure has been significantly improved. You remain responsible for the content (text, images, colors).
What does WCAG 2.1 AA mean?
What does WCAG 2.1 AA mean?
WCAG stands for Web Content Accessibility Guidelines; this is version 2.1, Level AA, and it is an international standard for digital accessibility on the web.
Why are videos, animations or moving elements suddenly no longer displaying on my website?
Why are videos, animations or moving elements suddenly no longer displaying on my website?
In most cases, this is due to the "Reduce Motion" setting being enabled in the operating system. This setting reduces or disables animations, motion effects and, in some cases, certain videos.
This setting is not enabled directly in the browser, but is set at the operating system level. Browsers such as Chrome, Safari, or Firefox automatically adopt this setting via the CSS media query prefers-reduced-motion.
Depending on the device, the setting may be enabled here:
macOS: System Preferences → Accessibility → Display → "Reduce Motion"
iPhone / iPad: Settings → Accessibility → Motion → "Reduce Motion"
Windows 11: Settings → Ease of Access → Visual Effects → "Animation Effects"
Windows 10: Settings → Ease of Access → Display → "Show animations in Windows"
Android: Settings → Accessibility → "Remove animations" (varies by manufacturer)
Linux (GNOME): Settings → Accessibility → "Reduce animations"
To test this feature, you can also simulate it directly in your browser using Chrome DevTools:
Press F12
Press Cmd/Ctrl + Shift + P
Type "Emulate CSS prefers-reduced-motion: reduce"
This allows you to quickly see how the website behaves with reduced motion without having to change your system settings.
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂