AccessReel

Batch full-page screenshots + WCAG 2.2 AA accessibility audit in one run. Built for QA engineers, accessibility auditors, and design teams.

Built with Codex and GPT-5.6 for OpenAI Build Week 2026.

What it does

Full-page capture via Chrome DevTools Protocol — not a viewport crop
Batch processing from pasted URLs or imported .txt / .csv / .xlsx / .tsv files
WCAG 2.2 AA audit via axe-core 4.9 injected directly into each captured page — returns structured violations with impact level, node count, and remediation links
GPT-5.6 visual audit analyzes each screenshot for accessibility failures automated rules miss: contrast baked into hero images, icon-only controls, cognitive accessibility issues
Color vision simulation gallery — 5 views per URL (Standard, Deuteranopia, Protanopia, Tritanopia, Achromatopsia) using Viénot/Brettel matrices, the same matrices Chrome DevTools uses
Downloadable HTML audit report with violation badges, impact severity color-coding, and links to axe documentation
Accordion gallery for color simulations — navigate directly to any URL without scrolling through all images
Results dashboard with real-time violation counts, sort, and filter

How Codex was used

Codex built the entire implementation from an accessibility-domain spec. Key sessions covered:

Manifest V3 scaffold and Chrome DevTools Protocol screenshot pipeline
Page stabilization for background-tab CDP capture: GSAP kill, CSS animation freeze, lazy image triggering, pharma ISI tray handling, dropdown guard
axe-core content script injection and violation extraction
Batch download system (PNG, JSON report, HTML report, simulation gallery)
SVG feColorMatrix color blindness simulation gallery with accordion layout
Results dashboard UI with real-time updates, sorting, filtering, and violation badges
File import (xlsx, csv, tsv, txt) via SheetJS
Dark-theme popup UI with Plus Jakarta Sans typography

How GPT-5.6 was used

Each captured screenshot is sent to api.openai.com/v1/chat/completions with a system prompt instructing GPT-5.6 to act as a WCAG 2.2 AA auditor and return only a structured JSON array:

[{
  "region": "Hero banner",
  "issue": "Text overlay on gradient background fails 4.5:1 contrast ratio",
  "severity": "Critical",
  "remediation": "Add a semi-opaque background behind the text"
}]

GPT findings merge with axe-core output in audit_report.html. axe-core catches approximately 57% of WCAG issues automatically. GPT-5.6 covers the visual and cognitive failures that rule-based tools miss.

Install

Clone or download this repository
Open chrome://extensions in Chrome
Enable Developer mode (toggle in top right)
Click Load unpacked
Select the accessreel/ folder
The AccessReel icon appears in your Chrome toolbar

Requires Chrome 109 or later. No Web Store installation needed.

Usage

Click the AccessReel toolbar icon
Paste URLs (one per line) or import a .txt, .csv, or .xlsx file
Set viewport width using the slider (375 Mobile → 1920 Desktop)
Configure format (PNG / JPEG / WEBP) and folder name
Optionally enable Run AI Audit and enter your OpenAI API key
Optionally enable Simulation Gallery
Click Start Audit and Capture Run
Files download to ~/Downloads/accessreel/

Output files

File	Description
`NNN_hostname.png`	Full-page screenshot per URL
`audit_report.html`	Visual WCAG report (open in browser)
`audit_report.json`	Structured violations data
`simulation_gallery.html`	Color vision simulations, accordion layout

Tech stack

Layer	Technology
Extension framework	Chrome Manifest V3
Screenshot capture	Chrome DevTools Protocol (debugger API)
Accessibility rules	axe-core 4.9 (injected content script)
AI visual audit	GPT-5.6 vision via OpenAI API
Color simulation	SVG feColorMatrix (Viénot/Brettel matrices)
File import	SheetJS (xlsx/csv)
Storage	chrome.storage.sync + chrome.storage.session

Permissions

Permission	Reason
`debugger`	CDP access for full-page capture beyond viewport
`downloads`	Save screenshots, JSON, HTML, and gallery files
`storage`	Persist settings and API key between sessions
`scripting`	Inject axe-core into captured pages
`tabs`	Open and manage capture tabs
`host_permissions <all_urls>`	Load any queued URL for capture

Privacy

AccessReel runs entirely on your machine. The only external network call is the OpenAI API request for GPT-5.6 vision analysis, which requires your own API key and is triggered only when you enable the AI audit. No URLs, screenshots, or audit results are sent to any other server. No analytics, no telemetry, no third-party scripts.

Dependencies (bundled — no npm install needed)

lib/axe.min.js — axe-core 4.9 (Mozilla Public License 2.0)
lib/xlsx.mini.min.js — SheetJS Community Edition (Apache 2.0)

Built by

Jerlyn O’Donnell — CPACC · IAAP · Adobe Community Expert
Founder, Design Lady LLC
Accessibility consulting · UX/Experience Design · Bronx, NY

AccessReel · OpenAI Build Week 2026 · Developer Tools track