AI Auto-Remediation
Gemini Vision Alt Text (WCAG 1.1.1)
WCAG Success Criterion 1.1.1 requires that every non-text element on a page — images, icons, charts — has a text alternative (alt text) that screen readers can announce to blind users. In practice, most large websites have thousands of images without alt attributes. AccessiLens uses Google Gemini Vision — a multimodal AI model — to automatically generate contextually accurate, WCAG-compliant alt text and inject it into the DOM in real time.
How Gemini Vision alt text generation works
When a visitor loads your page, the AccessiLens widget scans the DOM for <img> elements with missing or empty alt attributes.
For each untagged image, AccessiLens passes the image's public URL to the Gemini Vision API. The model analyses the image and generates a descriptive alt attribute string.
The generated alt text is injected directly into the DOM before the screen reader's reading cursor reaches the element — ensuring a seamless, uninterrupted experience for blind users.
Contextually-aware alt text generation
Unlike generic image recognition models that output labels like 'a dog' or 'a chart', Gemini Vision analyses the surrounding DOM context — headings, captions, and adjacent text — to generate alt text that is relevant and meaningful within the content. This produces WCAG-compliant descriptions rather than bare object identifications.
Dynamic ARIA Patcher (WCAG 4.1.2)
WCAG 4.1.2 requires that all user interface components have a programmatically determinable name, role, and state — communicated via ARIA (Accessible Rich Internet Applications) attributes. Modern web applications built with JavaScript frameworks constantly modify the DOM — menus open, modals appear, cart items update — and each change can introduce new ARIA violations. AccessiLens uses a MutationObserver to watch the DOM continuously and patches ARIA violations the moment they appear, without any changes to your source code.
How the ARIA patcher works
A MutationObserver — a standard browser API that watches for DOM changes — is attached to your document root on page load.
When a new element is added to the DOM (e.g., a modal, a dropdown, or an async-loaded component), the patcher immediately evaluates it for ARIA violations.
Missing aria-label, aria-labelledby, role, aria-expanded, or aria-describedby attributes are injected with the correct values based on element type and context.
Zero source code modifications required
All ARIA remediations are applied live in the visitor's browser via JavaScript DOM manipulation. Your repository and build pipeline remain completely unchanged — there is no risk of breaking existing functionality or introducing regressions.