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.

How to

Starting your journey

1

Register for an AccessiLens account.

2

Add your first domain in the 'Sites' section.

3

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.

How to

Setup in 3 steps

1

Go to your 'Sites' dashboard and click 'Install Script'.

2

Copy the one-line JavaScript snippet.

3

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.

How to

Customizing your widget

1

Open 'Widget Settings' in your admin portal.

2

Choose your brand's primary color and icon style.

3

Select the default screen position (e.g., Bottom Right).

4

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.

Features

Reading

Optimize text consumption for every reader. Control the typography environment with precision.

How to

Using reading tools

1

Open the toolbar on your website and click the 'Text' icon.

2

Toggle Dyslexia Mode to replace all fonts with OpenDyslexic.

3

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.

How to

Activating visual aids

1

Select the 'Vision' tab in the accessibility toolbar.

2

Click on 'Text Lens' to activate the magnifying glass.

3

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.

How to

Filtering content

1

Navigate to the 'Palettes' tab in the widget.

2

Choose a filter like 'High Contrast' or 'Grayscale'.

3

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.

How to

Managing AI fixes

1

In your dashboard, enable 'AI Auto-Fix' for your site.

2

Our AI will automatically scan for missing alt-text and ARIA tags.

3

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.

How to

Using Profiles

1

Open the widget on the website.

2

Select one of the pre-configured disability profiles (e.g., Motor Impaired).

3

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.

How to

Generating your first report

1

Go to 'Reports' in your dashboard.

2

Select the domain you wish to audit.

3

Click 'Start Full Scan' and wait for result processing (approx. 60s).

4

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.

Integrations

Wordpress Plugin

The seamless way to manage accessibility on the world's most popular CMS. No code editing required.

How to

WordPress installation

1

Log in to your WordPress Admin.

2

Go to Plugins > Add New and search for 'AccessiLens'.

3

Install and Activate.

4

Paste your 'Site ID' from our dashboard into the plugin settings.

One-Click Install

Available directly through the WordPress Plugin Repository.

Sync Settings

Dashboard changes reflect instantly on your site without clearing cache.

Embedding

Add AccessiLens to any tech stack with zero dependencies. Standardized JS loading for all frameworks.

How to

Universal embedding

1

Copy your Site Script URL.

2

Add a <script> tag to your HTML template.

3

Set the 'defer' or 'async' attribute to ensure zero performance impact.

CDN Loading

Served via our global edge network for maximum performance.

Asynchronous Execution

Our script never blocks the main thread, ensuring zero impact on SEO or speed.

API Keys

Connect AccessiLens to your internal workflows and developer tools. Automate audits through CI/CD pipelines.

How to

Managing Site IDs

1

Go to 'Developer Settings' in your profile.

2

Click 'Generate New Key'.

3

Copy the key immediately (it won't be shown again).

4

Use it in your Authorization headers as 'Bearer [YOUR_KEY]'.

Site ID Management

Generate, rotate, and revoke Site IDs with fine-grained permissions.

Custom Webhooks

Receive alerts when a site falls below its target accessibility score.

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.

How to

Auto-remediated criteria

1

1.1.1 Non-text Content (Gemini Vision AI alt tags)

2

1.3.1 Info and Relationships (Landmark & Heading fixes)

3

2.1.1 Keyboard (tabindex and Enter/Space handlers)

4

2.4.1 Bypass Blocks (Skip to main content injection)

5

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.

How to

Auto-remediated criteria

1

1.3.5 Identify Input Purpose (autocomplete hints)

2

1.4.3 Contrast Minimum (Instant CSS override palettes)

3

1.4.4 Resize Text (Global magnification without clipping)

4

1.4.5 Images of Text (OCR via Gemini API)

5

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.

How to

Auto-remediated criteria

1

2.4.11 Focus Not Obscured (Ensuring tooltips/sticky headers don't block focus)

2

2.4.12 Focus Appearance (Enhanced contrast for focus rings)

3

3.2.6 Consistent Help (Ensuring support forms are easily locatable)

4

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.

How to

Legal Protection Steps

1

Generate an Accessibility Statement from the Dashboard.

2

Display the accessibility widget prominently on all pages.

3

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.

How to

Certification

1

Download your auto-generated VPAT 2.4 report.

2

Include the ACR (Accessibility Conformance Report) in your RFP responses.

3

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.