i3 - WCAG 2.1 AA Checker

i3 WCAG 2.1 AA Checker — Enterprise Accessibility Auditing for Modern Teams ════════════════════════════════════════════ OVERVIEW ════════════════════════════════════════════ The i3 WCAG 2.1 AA Checker is a comprehensive browser-based accessibility auditing tool built for developers, QA engineers, designers, project managers, and accessibility professionals. It enables fast, reliable, and repeatable compliance checks against all WCAG 2.1 Level A and AA success criteria — directly inside your browser, without switching tools or copying URLs into external services. Designed for enterprise accessibility programmes, the extension integrates with a centralised web dashboard for team collaboration, report history, role-based access control, and cross-vertical reporting. Whether you're auditing a single landing page, running a full multi-page session across a web application, or automatically crawling an entire site, i3 WCAG 2.1 AA Checker gives your team everything needed to discover, document, assign, and resolve accessibility barriers — all in one place. ════════════════════════════════════════════ SCANNING MODES ════════════════════════════════════════════ ── SINGLE-PAGE SCAN ── Click the extension icon to open the accessibility panel, then click Scan. The tool injects a lightweight audit engine into the active tab and checks every element in the DOM against all applicable WCAG 2.1 A and AA success criteria. Results appear in seconds. Each issue includes: • The WCAG criterion number and level (A or AA) • Principle (Perceivable / Operable / Understandable / Robust) • Severity rating: Error (critical barrier), Warning (serious/moderate risk), or Info (minor/best practice) • A plain-English title and full description of the violation • Step-by-step remediation guidance • The CSS selector and XPath of the offending element • The raw HTML snippet of the element • A live DOM snapshot showing the element in context • A direct link to the relevant WCAG success criterion on W3C Issues are organised by WCAG principle tabs (Perceivable, Operable, Understandable, Robust) and can be filtered by level (A / AA) and severity. A real-time search bar lets you find specific criteria or keywords instantly. A Passed Criteria tab shows every WCAG criterion that the page passed, so you can report on what's working as well as what needs fixing. ── MULTI-PAGE SESSION SCAN ── For web applications where multiple pages need to be tested together, Multi-Page Session mode lets you build up a consolidated report one page at a time without losing context between pages. How it works: 1. Click "Scan Multiple Pages" — the current page is scanned immediately. 2. Navigate your browser to the next page you want to audit. 3. Click "Scan Next Page" — it is added to the session. 4. Repeat for as many pages as needed. 5. Click "Stop & View Results" to see the consolidated multi-page report. The results view shows: • Total pages scanned, total issues, passing pages, and failing pages • Per-page cards with expandable issue lists, WCAG criterion groupings, and optional screenshots • An AI-generated summary with 3–4 natural-language bullet points highlighting the most impactful findings, most recurring criteria, and overall compliance rate All pages in a session are saved together as a single grouped report on the dashboard, making it easy to track a complete application audit rather than individual page snapshots. ── AUTO-CRAWL & SITE DASHBOARD ── The Auto-Crawl mode is built for site-wide accessibility audits. Instead of manually navigating page by page, Auto-Crawl discovers and audits multiple pages automatically. Three crawl modes: • Crawl Links — Starting from the current page, the crawler discovers all same-domain links up to a configurable depth (1–5 levels) and scans each one sequentially. • Fetch Sitemap — Automatically retrieves the site's XML sitemap and extracts all URLs for scanning. • Paste URLs — Manually enter or paste a list of URLs (one per line) to scan in batch. During the crawl, a live progress panel shows: • Current page being scanned with its URL • Pages completed vs. total • A progress bar • Live results feed with pass/fail status per page as they complete After the crawl finishes, results are presented in the Site Dashboard — a full-featured visual analytics view: Heatmap Tab: A colour-coded grid (red → yellow → green) showing every scanned page's compliance score at a glance. Click any cell to jump to that page's detail card. Pages with the most issues appear red; fully compliant pages appear green. Patterns Tab: A ranked list of the WCAG criteria that fail most frequently across the site. Each entry shows the criterion number, level, full name, affected page count, and a proportional bar chart. This helps teams prioritise which template-level or component-level issues to fix first for maximum site-wide impact. Pages Tab: Expandable cards for every scanned page, each showing its compliance score, issue count, and full issue breakdown. Cards can be sorted by score (ascending/descending) or issue count. An AI-generated summary at the top of the Site Dashboard provides a plain-language overview of the entire crawl — overall compliance percentage, worst-performing page, most recurring criterion, and recommended next steps. ════════════════════════════════════════════ ACCESSIBILITY TESTING TOOLS ════════════════════════════════════════════ ── FOCUS ORDER VISUALISER ── The Focus Order Visualiser overlays numbered badges on every focusable element on the page, showing the exact keyboard navigation sequence a keyboard-only user or screen reader user would follow. Two sections are displayed: • Natural Tab Order — elements reachable via normal Tab key presses, numbered in DOM order • Forced Tab Order — elements with a positive tabindex value that override the natural order (these are highlighted with a warning badge, as they typically indicate an accessibility anti-pattern) Click any item in…