Overview
This comprehensive guide will walk you through integrating the Accesstive accessibility platform with your Contentful-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
This is the most common method for integrating Accesstive with Contentful-powered sites and works with any front-end framework (React, Next.js, Vue, etc.).
Step-by-Step Instructions:
- Access Your Front-End Codebase: Open your project files connected to Contentful content delivery.
- Locate Your Layout or Template File: Find the main HTML template file (e.g., index.html, _document.js, or layout file in your framework).
- Add 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 Changes: Commit or save your changes in your code editor.
- Deploy: Push your changes to your hosting platform (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 code was placed before the closing </body> tag
- Check that the code is included in your deployed build
- Ensure your site has been redeployed after adding the code
- Clear your browser cache and reload the page
Script Loading Issues
- Check the browser console for any 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 performant:
Metric | Impact | Details |
| Load Time | Minimal | Async loading prevents blocking |
| File Size | ~45KB | Compressed and optimized |
| Performance Score | < 1% impact | Based on Google PageSpeed |
Get Started Today
Ready to make your Contentful-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.