Getting Started
Introduction
Welcome to AccessiLens. Our product helps make your website usable for everyone — including people with visual impairments, motor difficulties, dyslexia, ADHD, and other disabilities. We automate web accessibility compliance so you can focus on your business. You simply add a small script tag to your website, and AccessiLens does the rest automatically.
Getting started in 3 steps
Create a free AccessiLens account at accessilens-ai.com.
Add your website in the 'Sites' section of your dashboard.
Copy and paste the AccessiLens script tag onto your website — we'll guide you through this.
What is web accessibility?
Web accessibility (often abbreviated as 'a11y') means designing and building websites that can be used by people with disabilities. This includes blind users who rely on screen readers (software that reads the page aloud), keyboard-only users who cannot use a mouse, and people with cognitive or visual impairments. Accessibility compliance is also a legal requirement in many countries under laws such as the ADA, WCAG, and EAA.
Why does WCAG compliance matter?
WCAG — the Web Content Accessibility Guidelines — is the internationally recognised standard for web accessibility. Published by the W3C, it defines specific success criteria your website must meet to be considered accessible. Most countries' accessibility laws reference WCAG 2.1 Level AA as the minimum required standard. AccessiLens automates compliance with these criteria.
How AccessiLens works
Once installed, AccessiLens loads a lightweight JavaScript widget on your website. It uses DOM analysis (reading the structure of your page) and Google Gemini AI to detect accessibility violations, apply ARIA patches, generate alt text for images, and surface a user-facing toolbar — all without requiring changes to your source code.
Quickstart
Getting AccessiLens on your website takes less than five minutes. Whether you built your site using WordPress, Shopify, or a custom-coded stack, the process is the same: one script tag added to your global page template.
Install in 3 simple steps
Log into your AccessiLens dashboard and go to the 'Sites' section.
Click 'Get Installation Code' next to your website. Your unique script tag will appear — copy it.
Open your website's global layout or footer template, and paste the script tag just before the closing </body> tag. Save and publish.
Finding your Site ID
Your unique Site ID is embedded in your script tag. You will find it in your AccessiLens dashboard under 'Sites'. This ID ties the widget to your subscription and enables your site-specific settings and analytics.
Script placement — why </body>?
The closing </body> tag marks the very end of your HTML document. Placing the AccessiLens script here — with the defer attribute — ensures it loads after your page content, so it has zero impact on your Largest Contentful Paint (LCP) score or Core Web Vitals performance.
Verifying the installation
After publishing, reload your website. You should see the AccessiLens floating widget button — usually in the bottom-right corner. If you open it and the accessibility toolbar appears, the installation is confirmed. You can also verify using your dashboard's 'Live Preview' feature.
The Accessibility Toolbar
The AccessiLens widget is a floating accessibility toolbar that appears on your website for all visitors. Users who need accessibility adjustments — such as larger text, high contrast mode, or a screen reader-optimised layout — can activate these tools without any technical knowledge. The toolbar itself is engineered to strict WCAG 2.2 AAA standards.
Customising the widget
Log into your AccessiLens dashboard and go to 'Widget Settings'.
Choose your brand colour, which is applied to the widget icon and toolbar accent.
Select the default screen position (e.g., Bottom Right or Bottom Left).
Enable or disable specific accessibility features you want available to your users.
Keyboard trigger and Skip-Links
The toolbar is heavily optimized for keyboard-only and screen reader users. The widget dynamically injects a hidden 'Skip to Accessibility Menu' link at the absolute top of the DOM so blind users can discover it instantly. Users can also open it by pressing a custom shortcut (e.g., Alt + A).
Strict Focus Traps & Escape Navigation
When opened, the toolbar behaves as a true ARIA dialog. Keyboard focus is strictly trapped inside the menu to prevent users from accidentally tabbing back into the background website. Pressing the Escape key instantly closes the toolbar and returns focus exactly to the trigger button.
Zero-Friction Cognitive States
Active states never rely purely on color changes (which fail WCAG criteria for color-blind users). Instead, active tools dynamically spawn high-contrast checkmarks (✓) to ensure absolute state clarity. Medical jargon is stripped in favor of plain language, and a 'Reset All' button is always visible.