i3 - WCAG 2.1 AA Checker

Comprehensive WCAG 2.1 Level AA accessibility audit. Checks all A and AA success criteria and provides remediation guidance.

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 the focus order panel to scroll the page to that element. The panel shows each element's accessible name, element type, and any detected issues (such as missing accessible name or suspicious tabindex value). ── SCREEN READER PREVIEW ── The Screen Reader Preview simulates how a screen reader would read the page aloud, element by element, using the browser's built-in Web Speech API. Features: • Browse Mode — reads all meaningful content in DOM order, mimicking NVDA/JAWS default behaviour • Heading Mode — jumps between headings only, simulating the most common screen reader navigation pattern • Adjustable reading speed — Slow (0.8×), Normal (1.0×), and Fast (1.5×) • Play / Pause / Resume controls • Previous Element and Next Element navigation buttons • A progress bar and counter showing current position (e.g. "23 / 147 elements") • Live announcement display showing exactly what text is being read This tool helps catch issues that automated rules miss — such as verbose or confusing link text, missing landmark regions, or elements announced out of context. ── ISSUE VIEWER ── The Issue Viewer opens as a separate pop-out window showing all detected issues alongside the live page for side-by-side remediation work. Instead of switching between the panel and the page, you can keep the Issue Viewer docked beside your browser and work through issues one at a time. Each issue in the viewer includes the full WCAG reference, element selector, HTML snippet, and remediation guidance. Clicking an issue scrolls the live page to the affected element. ════════════════════════════════════════════ RESULTS & SCORING ════════════════════════════════════════════ ── ACCESSIBILITY SCORE ── Every scan produces a 0–100 compliance score based on the ratio of passing WCAG criteria to the total number of criteria checked. The score is colour-coded: • 90–100 → Excellent (green) • 70–89 → Fair (amber) • Below 70 → Poor (red) Scores are calculated consistently across single-page, multi-page, and crawl scans, enabling meaningful comparisons between pages and across time. ── AI SUMMARY ── After every scan, an AI-generated summary section provides 3–4 natural-language bullet points that contextualise the results for non-technical stakeholders: • Overall violation count broken down by severity • Passing criteria percentage and compliance rate • The most frequently failing WCAG criterion and recommended priority • Technology context (React, Angular, etc.) and accessibility implications This makes it easy to share scan results with product owners, clients, or leadership without requiring them to interpret raw issue lists. ── SCREENSHOTS ── During scans, the extension automatically captures: • A full-page screenshot of each scanned page • Per-element DOM snapshots showing each issue in its surrounding HTML context Screenshots are stored locally and also synced to the backend when reports are saved, enabling screenshot-backed report review in the web dashboard. ════════════════════════════════════════════ REPORT MANAGEMENT ════════════════════════════════════════════ ── SAVE REPORTS ── After any scan (single-page, multi-page, or crawl), click Save Report to name and save the results. Reports are: • Stored locally in the browser for offline access • Synced to the team dashboard in the background so they are visible to all authorised users immediately Multi-page reports are saved as a single grouped entry — all pages share a report group ID so they appear as one line item on the dashboard, not as many individual entries. ── WEB DASHBOARD ── The web dashboard at your organisation's URL provides a full-featured report management interface: All Reports / My Reports tabs: Switch between viewing all reports across the organisation (admin/manager) or just your own submissions (individual contributors). Filters: • Vertical (business unit) • Role of the person who saved the report • User name search • Date range (from / to) • Severity filter • Free-text search across report names, page URLs, and titles Report Table: Each report card shows: • Report name and page URL/domain • Saved By (name and avatar) • Role of the submitter • Project/application name • Report type (Single Page, Multi-Page, Site Crawl) • Date and time saved (IST) • Accessibility score with colour-coded badge • Number of pages (for grouped reports) Clicking a report opens the full detail view with the complete issue list, per-page breakdown, screenshots, and all WCAG criterion details. ── REPORT DETAIL VIEW ── The report detail panel shows: • Summary stats: total issues, errors, warnings, info items, and score • Per-page accordion cards for multi-page reports • Full issue list grouped by WCAG criterion • For each issue: title, description, resolution, element selector, HTML snippet, DOM snapshot, WCAG reference link • Page screenshot (if captured) ── ANNOTATIONS ── Any authorised team member can add text annotations (comments) to individual issues within a saved report. Annotations are stored centrally so the whole team can see notes, decisions, and context added by colleagues. Use cases: • "Confirmed — this is a known ARIA pattern our design system uses, flagging for redesign in Q3" • "False positive — this element is hidden from assistive technologies intentionally" • "Fixed in PR #482 — re-test after deploy" ── ISSUE ASSIGNMENTS ── Developers can self-assign individual issues from the dashboard. Assignments appear against the issue and are visible to managers and admins, enabling lightweight issue tracking without requiring an external task management tool. ════════════════════════════════════════════ TEAM & ACCESS MANAGEMENT ════════════════════════════════════════════ ── ROLE-BASED ACCESS CONTROL ── Six roles with granular permissions: • Viewer — read-only access to reports in their vertical • QA — can run scans, save and view reports • Developer — can run scans, save reports, and self-assign issues • Manager — full access within their vertical, can delete reports, manage projects • Admin — full access across all verticals, can manage users and approve registrations • Superadmin — unrestricted access, system-wide management ── VERTICALS & PROJECTS ── Reports are organised by Vertical (business unit or client) and Application (project). This allows large teams to keep their accessibility data structured and ensures users only see reports relevant to their work. Admins can create and manage verticals and applications from the dashboard's admin panel. ── USER MANAGEMENT ── New users who register are set to Pending Review status until an admin approves them. Admins can: • Approve or reject registrations • Edit user names, designations, and roles • Assign users to verticals and applications • Activate or deactivate accounts • Delete users ── REPORT VISIBILITY RULES ── • Admins and superadmins see all reports across the entire system • Users assigned to a vertical see all reports within that vertical • Users without a vertical assignment see only their own reports ════════════════════════════════════════════ WCAG 2.1 COVERAGE ════════════════════════════════════════════ The extension checks all 31 automated WCAG 2.1 Level A and AA success criteria: PERCEIVABLE 1.1.1 Non-text Content — Alt text for images, icons, and decorative elements 1.2.2 Captions (Prerecorded) — Captions on video content 1.3.1 Info and Relationships — Semantic structure, labels, headings, lists, tables 1.3.2 Meaningful Sequence — Logical reading order in the DOM 1.3.4 Orientation — No restriction to a single screen orientation 1.3.5 Identify Input Purpose — Autocomplete attributes on form inputs 1.4.1 Use of Color — Information not conveyed by colour alone 1.4.3 Contrast (Minimum) — 4.5:1 for normal text, 3:1 for large text 1.4.4 Resize Text — Text scalable to 200% without loss of content 1.4.5 Images of Text — Text used instead of images of text where possible 1.4.10 Reflow — Content reflows at 320px width without horizontal scroll 1.4.11 Non-text Contrast — 3:1 contrast for UI components and graphical objects 1.4.12 Text Spacing — Content remains readable with increased letter/word/line spacing 1.4.13 Content on Hover or Focus — Hover/focus content is dismissible, hoverable, and persistent OPERABLE 2.1.1 Keyboard — All functionality accessible by keyboard 2.1.4 Character Key Shortcuts — Single-character shortcuts can be turned off or remapped 2.4.1 Bypass Blocks — Skip navigation links present 2.4.2 Page Titled — Descriptive page title present 2.4.4 Link Purpose — Link text is meaningful in context 2.4.6 Headings and Labels — Descriptive headings and labels 2.4.7 Focus Visible — Keyboard focus indicator visible UNDERSTANDABLE 3.1.1 Language of Page — lang attribute set on html element 3.1.2 Language of Parts — lang attribute on content in a different language 3.2.2 On Input — No unexpected context changes on input 3.3.1 Error Identification — Form errors identified and described 3.3.2 Labels or Instructions — Labels provided for all form inputs 3.3.3 Error Suggestion — Suggestions provided when input errors are detected ROBUST 4.1.1 Parsing — Valid, well-formed HTML structure 4.1.2 Name, Role, Value — All UI components have accessible name, role, and state 4.1.3 Status Messages — Status messages programmatically determinable ════════════════════════════════════════════ TECHNICAL & SECURITY ════════════════════════════════════════════ • Manifest V3 — built to the latest Chrome extension security standard • Content Security Policy — scripts, styles, fonts, and connections locked to the extension's own origin and the backend API; no remote code execution • All authentication uses short-lived JWT tokens (8-hour expiry); no passwords stored in the extension • Scan data stored in chrome.storage.local — never sent to third parties • Backend API communication over HTTPS only • No analytics, no telemetry, no data sold or shared ════════════════════════════════════════════ REQUIRE