WICK-AG-Lens: Accessibility Inspector

Visual accessibility inspector for Web Developers and QA.

WICK-AG-Lens WICK-AG-Lens is a professional DevTools inspector that brings visual precision and tactical efficiency to web accessibility testing. Built for maximum speed, security, and privacy with pure JavaScript and zero external dependencies, all checks run locally inside your Chrome DevTools panel without transmitting data or impacting page performance. Accessibility testing shouldn't mean digging through sterile console logs, hunting for hidden DOM nodes, or guessing which element a screen reader is failing on. WICK-AG-Lens bridges the gap between code and user experience by drawing highly visible bounding boxes and color-coded badges directly over target elements on your live page. Seeing a button without a label visually highlighted exactly where it sits in the layout immediately tells you how to fix it. THE FEATURES THAT SET IT APART • Strict WCAG Criteria Filtering: Not every project targets the same compliance standard. Dynamically filter your audits by specific WCAG Versions (2.0, 2.1, 2.2) and Conformance Levels (A, AA, AAA). The UI instantly adapts to hide irrelevant audits, so you only see exactly what you are testing for. • Separation of Concerns (40 Audits): Say goodbye to testing noise. The 40 independent audits are strictly divided into actionable "Violations & Warnings" and "Informative & Structure" checks. Hunt real bugs ruthlessly, or explore semantic architecture without the clutter. • Show, Don't Just Tell: Instantly see accessibility violations directly on your page layout. Click any badge to open an on-page info panel explaining the issue, why it matters to users with disabilities, and the exact CSS selector. • Precision Element Locator: Lost a hidden element in a massive DOM? Open the View Elements modal and click the crosshair tool. The extension instantly scrolls the hard-to-find element into view and marks it with a highly visible pulsating ring. • Zero-Friction Reporting: QA engineers and testers spend half their lives writing bug tickets. WICK-AG-Lens includes a one-click reporting feature that instantly copies formatted text reports of all active audits and findings to your clipboard. Paste directly into Jira, GitHub, or Slack, and move on. COMPLETE AUDIT LIBRARY (40 AUDITS) TAB 1: VIOLATIONS & WARNINGS Isolates critical accessibility barriers, strict WCAG failures, and severe UI anti-patterns. [Group: Keyboard Navigation] • Unfocusable Clickables: Flags div/span elements with click handlers lacking tabindex and role attributes. • Disabled Focus Outlines: Heuristically detects interactive elements hiding CSS focus rings without fallbacks. • Tabindex Violations: Flags elements with tabindex > 0 that disrupt natural DOM navigation order. • Accesskey Attributes: Identifies hardcoded accesskeys that conflict with browser and screen reader shortcuts. [Group: Images & Media] • Missing Alt Text: Flags tags completely lacking an alt attribute. • Uncaptioned Video: Identifies elements lacking track captions or subtitles. • Redundant Alt Text: Flags image alt text containing redundant words like "image of" or "photo of". [Group: Forms & Controls] • Unlabeled Form Inputs: Flags inputs, selects, and textareas lacking associated labels, aria-labels, or wrappers. • Empty Buttons: Highlights buttons with no text content, ARIA labels, or child image alt text. • Placeholder as Label: Identifies form controls relying solely on disappearing placeholder text for identification. [Group: Links & Navigation] • Empty Links: Flags anchor tags lacking readable text, ARIA labels, or child image descriptions. • Suspicious Link Targets: Highlights links acting as fake buttons (href="#" or javascript:) without proper ARIA roles. • Generic Link Text: Flags ambiguous link text like "Click Here" or "Read More" using exact word boundaries. • Unwarned New Window Links: Identifies target="_blank" links lacking accessible warnings about opening new tabs. [Group: ARIA & Semantics] • Focusable in Aria-Hidden: Traps active focusable controls inside aria-hidden subtrees ("ghost focus"). • Invalid ARIA State: Highlights elements explicitly marked with aria-invalid="true". • Prohibited Author Names: Flags presentation/none roles that improperly attempt to define ARIA labels. [Group: Structure & Document] • Auto-playing Media: Flags audio or video elements configured to auto-play upon page load. • Heading Hierarchy Errors: Highlights skipped heading levels (e.g., H1 to H3) and fake heading classes. [Group: Visual & Contrast] • Text Color Contrast: Dynamically evaluates foreground and background contrast against WCAG AA/AAA thresholds based on font size and weight, flagging image overlays for manual check. TAB 2: INFORMATIVE & STRUCTURE Provides exploratory mapping of page architecture, focus routes, and valid semantic structures. [Group: Keyboard Navigation] • Tabindex (Comparison): Visualizes and color-codes all tabindex values (0, -1, >0) across the layout. • Display Focus Order: Traces and numbers the sequential TAB key navigation path across focusable elements. [Group: Images & Media] • Display Image Alternatives: Visually overlays and prints the alt text descriptions for all images on the page. • Captioned Video: Highlights video elements that correctly implement text track captions. • Iframe Context & Titles: Extracts and displays title descriptions and visibility states from embedded iframes. [Group: Forms & Controls] • Form Field Descriptions: Highlights supplemental instructions linked via aria-describedby or title attributes. • Fieldsets & Captions: Visualizes fieldset containers and legend titles used for grouping complex form controls. • Touch Target Sizes: Computes pixel dimensions of interactive controls to identify undersized targets (<24px, 24-43px, 44px+). [Group: Links & Navigation] • Warned New Window Links: Highlights target="_blank" links that properly communicate new window behavior. [Group: ARIA & Semantics] • Accessible Name Resolution: Computes and prints the resolved accessible name. • ARIA Roles & Attributes: Maps and displays all explicit role definitions throughout the DOM. • ARIA Live Regions: Visualizes dynamic content update containers (aria-live polite and assertive). • Required Fields: Highlights mandatory form fields enforced via HTML5 required or aria-required attributes. • Aria-Expanded State: Maps expandable and collapsible widgets, color-coded by true/false state. • Aria-Controls: Visualizes elements establishing remote control over other DOM containers. • Aria-Owns: Highlights parent/child relationships established outside the standard DOM hierarchy. [Group: Structure & Document] • Valid Heading Order: Maps the logical structural outline of standard H1 through H6 headings. • Landmark Regions: Highlights native HTML5 and ARIA landmark containers (main, nav, header, footer, etc.). • Table & Grid Structure: Visualizes native tables, headers, captions, and custom ARIA data grids. • Lists and List Items: Maps semantic unordered (ul), ordered (ol), and description (dl) list structures. • Language Definitions: Maps the root HTML language tag and mid-page inline language shifts. BUILT FOR THE MODERN WEB • Shadow DOM & Iframe Piercing: The modern web is a messy place. WICK-AG-Lens utilizes custom deep bottom-up traversal logic to seamlessly pierce open Web Components and fully traverse the internal DOM of same-origin iframes. You are no longer left blind when inspecting complex widgets. • Smart Color Contrast Heuristics: Contrast ratios are calculated using computed DOM styles. The algorithm dynamically calculates required passing thresholds based on the font-size and font-weight of the text, and intelligently flags elements layered over complex background images or CSS gradients for manual review. • Ghost Focus Trap Detection: Dynamically detects and highlights elements that receive keyboard focus but are hidden from Assistive Technologies via aria-hidden attributes, preventing severe screen reader mismatches. WHO IS THIS FOR? • Web Developers wanting to catch accessibility bugs before pushing code. • QA Engineers who need to generate clear, actionable accessibility tickets. • Accessibility Professionals auditing complex applications and semantic structures. ENTERPRISE-GRADE PRIVACY Because WICK-AG-Lens operates entirely locally within your browser's DevTools, it never tracks your data, never sends telemetry, and requires no external API calls. It is completely safe to use on internal corporate networks, localhost development environments, and sensitive client applications. HOW TO USE IT 1. Install the extension. 2. Open Chrome Developer Tools (F12 or Ctrl+Shift+I / Cmd+Option+I). 3. Navigate to the "WICK-AG-Lens" tab in the DevTools menu. 4. Toggle your WCAG filters, activate your audits, and watch the accessibility barriers light up on your page.