Getting Started
Introduction
Welcome to AccessiLens, the next generation of web accessibility. Our mission is to bridge the gap between complex WCAG requirements and practical, real-world web experiences. By leveraging Google Gemini's advanced multimodal models, we don't just find errors—we understand them and fix them in real-time.
Starting your journey
Register for an AccessiLens account.
Add your first domain in the 'Sites' section.
Familiarize yourself with the dashboard audit scores.
What is WCAG 2.1 AA?
The Web Content Accessibility Guidelines (WCAG) define how to make web content more accessible to people with disabilities.
The Mission
Our goal is to remove digital barriers instantly without requiring extensive code changes from developers.
How it Works
A lightweight script analyzes your DOM on load and injects fixes client-side before the user even interacts.
Quickstart
Installation is designed to be frictionless. Whether you use WordPress, Shopify, Next.js, or a custom CMS, the process is exactly the same: one line of code.
Setup in 3 steps
Go to your 'Sites' dashboard and click 'Install Script'.
Copy the one-line JavaScript snippet.
Paste it immediately before the closing </body> tag of your website footer.
Copy the Script
Navigate to your dashboard and copy your unique <script> tag.
Placement
Paste the tag directly before the closing </body> tag in your global footer or main layout file.
Verification
Refresh your site; you should see the AccessiLens floating widget appear immediately.
Toolbar
The AccessiLens toolbar is the control center for your visitors. It sits unobtrusively in a corner and unfolds into a powerful suite of accessibility tools.
Customizing your widget
Open 'Widget Settings' in your admin portal.
Choose your brand's primary color and icon style.
Select the default screen position (e.g., Bottom Right).
Pick which accessibility features to enable for your visitors.
Branded Styles
Customize colors, icons, and positions from your admin dashboard.
Keyboard Shortcuts
Users can trigger the toolbar using Alt + A (or customizable shortcuts).
User Persistence
Settings are saved per browser, ensuring a consistent experience on every return visit.
Integrations
WordPress
AccessiLens provides a dedicated WordPress plugin for easy installation without touching code.
Install via Plugin
Download the official AccessiLens WordPress plugin ZIP file.
In your WordPress admin, go to Plugins > Add New > Upload Plugin.
Upload the ZIP file and click Install Now.
Activate the plugin, go to the AccessiLens settings tab, and paste your Site ID.
No coding required
The plugin handles injecting the script across all your WordPress pages automatically.
Shopify
Integrate the accessibility widget into your Shopify store to protect your ecommerce business.
Install in theme.liquid
Log into your Shopify Store Admin dashboard.
Go to Online Store > Themes.
Click the three dots on your current theme and select Edit Code.
Open theme.liquid and paste the widget script directly above the closing </head> tag.
Global coverage
Adding it to theme.liquid ensures the widget appears on product pages, collections, and checkout.
Wix
Wix allows you to add custom tracking and accessibility scripts globally.
Add Custom Code
Go to Settings in your Wix dashboard.
Scroll down to Advanced and click on Custom Code.
Click + Add Custom Code at the top right.
Paste the snippet, name it 'AccessiLens', and set 'Add Code to' to Body - end.
Click Apply and publish your site.
Premium feature
Note that Wix requires a premium plan to add custom code.
Squarespace
Inject the AccessiLens script into your Squarespace footer.
Code Injection
Go to Settings in your Squarespace sidebar.
Click Advanced, then select Code Injection.
Paste the snippet into the Footer section.
Click Save at the top left.
Business plan
Code injection is available on Squarespace Business and Commerce plans.
Weebly
Easily add the accessibility widget to your Weebly site settings.
SEO Footer Code
Go to Settings at the top of your editor.
Click on SEO in the left sidebar.
Scroll down to Footer Code.
Paste the snippet and click Save, then Publish.
Instant deployment
The script will load asynchronously without slowing down your Weebly site.
Framer
Enhance your Framer sites with full accessibility compliance.
Site Settings
Open your Site Settings in the Framer dashboard.
Go to the General tab and scroll down to Custom Code.
Paste the snippet into the End of <body> tag section.
Save and publish your changes.
Framer Plans
Custom code injection requires a Mini, Basic, or Pro Framer site plan.
BigCommerce
Add the AccessiLens widget via the BigCommerce Script Manager.
Script Manager
Go to Storefront › Script Manager in your dashboard.
Click Create a Script.
Name it 'AccessiLens', set Location to Footer, and Category to Essential.
Set Script Type to Script, paste the snippet, and click Save.
Storefront protection
Protects all storefront pages including product listings and cart.
HubSpot CMS
Add the accessibility script to your HubSpot pages globally.
Site Footer HTML
Click the Settings icon in your main navigation bar.
Navigate to Website > Pages.
Choose the domain you want to edit.
Paste the snippet into the Site footer HTML section.
Click Save.
Domain specific
Make sure you select the correct domain if you manage multiple HubSpot sites.
React / Next.js
Install the AccessiLens provider in your modern JavaScript framework.
NPM Package
Install the package via npm install @accessilens/react.
Import the Provider component in your root layout (e.g., layout.tsx or App.js).
Wrap your application and pass your Site ID as a prop.
Deploy your application.
SSR Compatible
The React package safely handles hydration and server-side rendering.
Custom HTML
For custom codebases, the installation is a simple script tag.
Global Footer
Locate your global footer file (e.g., footer.php, index.html).
Paste the snippet directly before the closing </body> tag.
Deploy your changes to production.
Performance
Our script uses the 'defer' attribute to guarantee zero impact on LCP and load times.
Features
Reading
Optimize text consumption for every reader. Control the typography environment with precision.
Using reading tools
Open the toolbar on your website and click the 'Text' icon.
Toggle Dyslexia Mode to replace all fonts with OpenDyslexic.
Adjust line leading and letter spacing using the Matrix sliders.
Font Matrix
Adjust sizes, line height, and letter spacing dynamically.
Dyslexia Mode
Instantly switch all text to 'OpenDyslexic' for better readability.
Bionic Reading
Guide eyes through text with artificial fixation points (bolded starts).
Vision
Crucial tools for users with low vision or light sensitivity. These tools create a focused visual environment.
Activating visual aids
Select the 'Vision' tab in the accessibility toolbar.
Click on 'Text Lens' to activate the magnifying glass.
Move your mouse to center the magnifying area over small text blocks.
Text Lens
A draggable magnifying glass for precise reading of fine print.
Reading Mask
Dim the rest of the page to focus on a single horizontal reading line.
Cursor Matrix
Oversized, high-contrast cursors in various sizes and colors.
Colors
Ensure visual clarity and comfort with advanced filter layers. Ideal for color-blind users or those with light sensitivity.
Filtering content
Navigate to the 'Palettes' tab in the widget.
Choose a filter like 'High Contrast' or 'Grayscale'.
Try 'Neural Palettes' like Sepia to reduce eye strain during night browsing.
Contrast Modes
Choose between High Contrast, Inverted, or Grayscale modes.
Neural Palettes
Apply scientifically tuned themes like Sepia (warmth) or Ocean (low-blue light).
AI
Auto-remediation powered by next-generation machine learning. We use Google Gemini to understand visual content.
Managing AI fixes
In your dashboard, enable 'AI Auto-Fix' for your site.
Our AI will automatically scan for missing alt-text and ARIA tags.
View fixed violations in the 'Site History' tab.
Image Descriptions (Vision AI)
Automatically generates descriptive labels for images missing alt tags using Google Gemini's multimodal vision model.
Hover Read (TTS AI)
Instantly convert on-screen text to speech simply by hovering your cursor over paragraphs.
Auto-ARIA
Injects missing ARIA roles and landmarks by analyzing element context in real-time.
Accessibility Profiles
Bundled tool configurations tailored for specific disabilities like Motor Impairment, Blindness, ADHD, and Epilepsy.
Using Profiles
Open the widget on the website.
Select one of the pre-configured disability profiles (e.g., Motor Impaired).
The widget will automatically activate all relevant features like Voice Nav and Keyboard Focus simultaneously.
Motor Impaired Profile
Activates Large Cursor, Link Highlights, and Voice Navigation.
Blind Profile
Enables Screen Reader (Voice Nav) and AI Image Descriptions.
One-Click Activation
Instantly applies a combination of tools designed for specific user needs without manual configuration.
Compliance Reports
PDF Audit Report
Generate professional, client-ready compliance documents directly from your dashboard. Ideal for legal verification.
Generating your first report
Go to 'Reports' in your dashboard.
Select the domain you wish to audit.
Click 'Start Full Scan' and wait for result processing (approx. 60s).
Click 'Download PDF' to save your compliance certificate.
Deep Scan
Crawl up to 50 pages of your domain to find deep-seated accessibility flaws.
Scorecards
Get an overall percentage score based on WCAG 2.1 compliance metrics.
Remediation Guide
Step-by-step instructions for developers to fix manual errors discovered in the audit.
Compliance Mapping
WCAG 2.1 Level A
AccessiLens automatically detects and patches foundational A-level criteria instantly inside the browser, minimizing ADA lawsuit exposure without hard-coding.
Auto-remediated criteria
1.1.1 Non-text Content (Gemini Vision AI alt tags)
1.3.1 Info and Relationships (Landmark & Heading fixes)
2.1.1 Keyboard (tabindex and Enter/Space handlers)
2.4.1 Bypass Blocks (Skip to main content injection)
3.1.1 Language of Page (lang attribute injection)
2.1.2 No Keyboard Trap
Global Escape listener prevents users from being locked inside dynamically rendered modals.
3.3.2 Labels or Instructions
Dynamically maps text nodes to form inputs via generated aria-labelledby attributes.
WCAG 2.1 Level AA
Strict legal compliance under Section 508 and EN 301 549 requires Level AA. Our engine applies advanced contrast overrides, focus states, and logical validations.
Auto-remediated criteria
1.3.5 Identify Input Purpose (autocomplete hints)
1.4.3 Contrast Minimum (Instant CSS override palettes)
1.4.4 Resize Text (Global magnification without clipping)
1.4.5 Images of Text (OCR via Gemini API)
2.4.7 Focus Visible (Enforced high-contrast focus rings)
3.1.2 Language of Parts
Live neural translation re-renders content blocks into 50+ languages instantly managing language tagging.
3.3.3 Error Suggestion
Forces native HTML5 form validation for assistive technology to announce naturally.
WCAG 2.2 Level AA
The latest WCAG standard focusing heavily on cognitive accessibility, mobile usability, and focus appearance. AccessiLens automatically applies these newer success criteria.
Auto-remediated criteria
2.4.11 Focus Not Obscured (Ensuring tooltips/sticky headers don't block focus)
2.4.12 Focus Appearance (Enhanced contrast for focus rings)
3.2.6 Consistent Help (Ensuring support forms are easily locatable)
3.3.8 Accessible Authentication (Removing cognitive tests for login)
Dragging Movements
Provides alternative button-based controls for any drag-and-drop interfaces.
Target Size
Dynamically expands tap targets on mobile devices to meet the minimum 24x24 CSS pixel requirement.
ADA Title III
Title III of the Americans with Disabilities Act prohibits discrimination on the basis of disability in places of public accommodation. Our widget and audit reports provide full legal mitigation against DOJ enforcement and demand letters.
Legal Protection Steps
Generate an Accessibility Statement from the Dashboard.
Display the accessibility widget prominently on all pages.
Maintain an ongoing manual audit certification (VPAT).
Litigation Support
AccessiLens provides documented proof of remediation efforts in the event of a legal challenge.
Section 508 & European EAA EN 301 549
AccessiLens guarantees adherence to US Federal procurement standards (Section 508) and the European Accessibility Act (EAA), ensuring your platform is ready for government and international enterprise contracts.
Certification
Download your auto-generated VPAT 2.4 report.
Include the ACR (Accessibility Conformance Report) in your RFP responses.
Use our API to monitor compliance continuously across your global domains.
Enterprise Ready
Full mapping to EN 301 549 standards required for all public sector technology across the EU.
Still need assistance?
Our specialized support team is available 24/7 to help you with complex custom integrations.