WICK-AG-Lens: Accessibility Inspector

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 …