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)
📌 Please note: Further improvements are already in the works, including additional accessible templates, further accessibility optimizations in the editor, and ongoing enhancements to 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 are automatically reduced or disabled. These include, for example:
Scroll animations
Fade-in effects
Number and statistics animations
Slider effects
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.
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.
💡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! 🙂