Skip to main contentSkip to Accessibility Menu

Features

Reading Tools

Many people find standard website text difficult to read. Text may be too small, too tightly spaced, or displayed in a font that causes visual stress. The AccessiLens reading tools allow your visitors to adjust typography — font size, line height, letter spacing — to suit their individual needs. These tools directly support WCAG 2.1 SC 1.4.4 (Resize Text) and SC 1.4.12 (Text Spacing).

How to

How to use the reading tools

1

Your visitor clicks the AccessiLens widget button on your website to open the toolbar.

2

They click the 'Text' icon to access the typography settings.

3

From here, they can increase font size, adjust line height (the vertical spacing between lines), or switch to a dyslexia-friendly font.

Font size and text spacing (WCAG 1.4.12)

Visitors can increase the size of all text and widen the gaps between letters (letter-spacing) and lines (line-height). WCAG 1.4.12 requires that text remains readable when these values are overridden — AccessiLens applies these changes without breaking your layout.

Dyslexia Mode (OpenDyslexic font)

Switching on Dyslexia Mode replaces all fonts on the page with 'OpenDyslexic' — a font specifically designed to reduce character confusion for users with dyslexia. The typeface weights letters at the bottom, using bottom-heaviness to establish clear visual orientation and prevent letter reversal confusion.

Bionic Reading

Bionic Reading bolds the first few letters of each word to create artificial fixation points. The brain fills in the rest of the word from context, which can significantly increase reading speed and reduce cognitive load. It is particularly effective for users with ADHD or reading-based processing difficulties.

Vision Assistance

For visitors with low vision, photophobia (light sensitivity), or vestibular disorders, standard screen content can be difficult or painful to view. AccessiLens provides a suite of visual accommodation tools that operate entirely client-side — they modify the CSS rendering in the visitor's browser without altering any server-side content.

How to

How to activate visual aids

1

Your visitor opens the AccessiLens toolbar and selects the 'Vision' section.

2

They can click 'Text Lens' to activate a draggable magnification window (similar to a screen magnifier).

3

They can activate the 'Reading Mask' — a screen overlay that dims everything except a horizontal focus strip, isolating one line of text at a time.

Text Lens (screen magnification)

The Text Lens renders a movable magnification viewport — similar to OS-level screen magnifiers like Windows Magnifier or macOS Zoom. Visitors hover it over any part of your page to see that area enlarged, which is particularly useful for small print and fine-detail images that fall below WCAG 1.4.4's visible threshold.

Reading Mask

The Reading Mask applies a semi-transparent overlay to the entire page, leaving only a narrow horizontal strip readable. This strip tracks the user's scroll position. It is a well-established assistive technique for users with Irlen Syndrome, scotopic sensitivity, or attention difficulties who are overwhelmed by a full page of text.

Custom cursor (Cursor Matrix)

Visitors can switch to an oversized, high-contrast cursor with a colour of their choice. A large visible cursor directly supports WCAG 2.5.3 and helps users with motor impairments or low vision who frequently lose the standard system cursor on screen.

Colour & Contrast

Colour blindness (colour vision deficiency) affects approximately 1 in 12 men and 1 in 200 women worldwide. AccessiLens provides real-time CSS colour filters that visitors can apply to your website to address contrast deficiencies and light sensitivity — without altering the experience for other users. These tools support WCAG 2.1 SC 1.4.3 (Contrast Minimum) and SC 1.4.11 (Non-text Contrast).

How to

How visitors apply colour filters

1

Your visitor opens the toolbar and selects the 'Colours' or 'Palettes' section.

2

They choose a colour mode — for example, 'High Contrast', 'Dark Mode', 'Grayscale', or 'Protanopia' (red-green colour blindness filter).

3

The CSS filter is applied instantly to the entire page and persists across navigation via localStorage.

High Contrast mode (WCAG 1.4.3)

High Contrast mode overrides your CSS colour palette to maximise contrast ratios between text and background. WCAG 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. AccessiLens's High Contrast palette guarantees ratios exceeding 7:1, meeting the enhanced WCAG AAA threshold.

Neural Palettes (Sepia, Ocean)

Scientifically-tuned colour filters like 'Sepia' apply warm amber tones that reduce blue-light wavelength exposure, which is linked to digital eye strain and disrupted circadian rhythms. These palettes are especially useful for users who experience migraines, vestibular disorders, or photophobia.

AI-Powered Accessibility

AccessiLens uses Google Gemini — a multimodal AI model — to solve accessibility violations that rule-based systems cannot address. Unlike automated checkers that only flag issues, our AI engine understands semantic context and generates real remediations. It writes WCAG-compliant alt text for images, injects missing ARIA attributes, and enables text-to-speech — all in real time, directly in the visitor's browser.

How to

How to enable AI features

1

Log into your AccessiLens dashboard and go to your site settings.

2

Enable 'AI Auto-Fix' to activate Gemini Vision alt text generation and ARIA patching.

3

The AI will immediately begin processing your page on each visitor load.

4

Review all AI-generated fixes in the 'Site History' tab of your dashboard.

Gemini Vision alt text (WCAG 1.1.1)

WCAG Success Criterion 1.1.1 requires that all non-text content (images, icons, charts) has a text alternative — called alt text — that can be read by a screen reader. When alt text is missing from an <img> tag, AccessiLens sends the image to Gemini Vision, which analyses the image and writes a descriptive, contextually relevant alt attribute and injects it directly into the DOM before the screen reader reaches the element.

Hover Read (TTS — Text-to-Speech)

With Hover Read enabled, hovering over any text element triggers real-time text-to-speech synthesis, reading the content aloud via the Web Speech API. This is invaluable for users with low vision, dyslexia, or cognitive processing difficulties who absorb spoken language more effectively than written text.

Auto-ARIA (WCAG 4.1.2)

WCAG 4.1.2 requires that all UI components have programmatically determinable names, roles, and states — defined using ARIA (Accessible Rich Internet Applications) attributes. AccessiLens automatically detects elements with missing or invalid ARIA labels, roles, and landmark attributes, and injects the correct values at runtime without modifying your source code.

Accessibility Profiles

AccessiLens includes pre-configured accessibility profiles — curated bundles of tools mapped to common disability categories. Rather than requiring users to configure individual settings, a single profile click activates all relevant remediations simultaneously. Profiles are defined by the W3C's Personalisation Task Force and align with the WCAG 2.1 requirements for each disability group.

How to

How profiles work

1

Your visitor opens the AccessiLens toolbar on your website.

2

They scroll to the 'Profiles' section.

3

They select the profile that best describes their situation — for example, 'Motor Impaired', 'Blind', 'ADHD', or 'Epilepsy Safe'.

4

All relevant accessibility tools activate simultaneously. The visitor can then fine-tune individual settings if needed.

Motor Impaired profile

Activates the large custom cursor (Cursor Matrix), focus ring enhancement (WCAG 2.4.7), link and button highlighting, and keyboard shortcut navigation — all tools that reduce the precision required for pointer-based interaction.

Blind / Screen Reader profile

Optimised to work alongside AT (assistive technology) screen readers such as NVDA, JAWS, and VoiceOver. This profile activates Gemini Vision alt text generation, Auto-ARIA patching (WCAG 4.1.2), and landmark injection — structuring the DOM so screen readers can navigate it logically.

One-click WCAG compliance bundle

Each profile represents a validated combination of WCAG success criteria remediations. Rather than asking users to understand the technical specification, the profile system gives them an intuitive entry point — designed in accordance with COGA (Cognitive and Learning Disabilities Accessibility) task force guidance.