Overview
This comprehensive guide will walk you through integrating the Accesstive accessibility platform with your Storyblok-powered website. Accesstive helps make your site more inclusive and compliant with accessibility standards through AI-powered tools and monitoring.
What is Accesstive?
Accesstive is an all-in-one accessibility platform that helps websites become inclusive, compliant, and user-friendly. It combines powerful tools like an accessibility assistant widget, AI-based live audits, monitoring, and an intelligent assistant. Designed for businesses, developers, and agencies, Accesstive makes accessibility simple, scalable, and smart.
Key Features
- Access Assistant: Screen-reader and keyboard navigation adjustments
- 40+ Accessibility Features: Font resize, colour contrast, text magnifier, and more
- Access Monitor: Regular scans and analyses
- WCAG Compliance: Addresses common accessibility barriers
- Custom Branding: Fully customizable to match your site design
- Access AI Audit: Real-time scanning with one-click AI fixes
- Access Accy: AI-powered accessibility chatbot
Installation Methods
Most Storyblok projects are headless and use a front-end framework like Next.js, Nuxt.js, Vue, or React. You can integrate Accesstive by adding the script to your layout template.
Step-by-Step Instructions:
- Access Your Front-End Project
Open your project files in your preferred code editor. - Locate Your Main Layout File
Find the global layout template (e.g., App.vue, _app.js, default.vue, or index.html) where global scripts are loaded. - Insert the Script Snippet
Paste the following code snippet before the closing </body> tag:
<script async src="https://cdn.accesstive.com/assistance.js" type="module"></script>- Save Your Changes
Commit or save your changes locally. - Deploy Your Site
Push the updated code to your hosting provider (e.g., Vercel, Netlify, AWS).
Pro Tip
The script loads asynchronously, ensuring it won’t impact your site’s loading speed or performance.
Accesstive Configuration
Once installed, you can configure your Accesstive settings through the Accesstive dashboard:
- Widget Customisation: Match your brand colours and styling
- Feature Selection: Choose which accessibility features to display
- Positioning: Set widget placement and behaviour
- Analytics: Monitor usage and accessibility improvements
Preview and Testing
After installation, you should see the Accesstive widget appear on your website. Here’s how to test it:
- Widget Visibility: Look for the accessibility icon (usually in the bottom corner)
- Feature Testing: Click the widget and try different accessibility options
- Cross-Browser Testing: Verify functionality across different browsers
- Mobile Testing: Check widget responsiveness on mobile devices
Troubleshooting Common Issues
Widget Not Appearing
- Verify the script was added to the correct layout or template file
- Ensure the code changes were deployed successfully
- Clear your browser cache and reload the page
Script Loading Issues
- Check the browser console for JavaScript errors
- Verify the script URL is correct and accessible
- Ensure no other scripts are conflicting
Performance Considerations
Accesstive is designed to be lightweight and performance:
Metric | Impact | Details |
| Load Time | Minimal | Async loading prevents blocking |
| File Size | ~45KB | Compressed and optimised |
| Performance Score | < 1% impact | Based on Google PageSpeed |
Get Started Today
Ready to make your Storyblok-powered website more accessible? Sign up for Accesstive today and start a free trial for creating a more inclusive web experience for all your visitors.