🔍 Chrome Extension · Manifest V3

A11y Table Checker

The most advanced accessibility engine for HTML tables. Detects WCAG violations, maps header associations, simulates screen readers, and provides one-click fixes — all inside your browser.

♿ WCAG 2.1 AA ✅ 20+ Checks 🧠 Smart Header Mapping ⚡ Live DOM Watching 📤 4 Export Formats 🔧 One-Click Fixes

📦 Install Extension ⚡ Quick Start ✨ All Features

Overview

What is A11y Table Checker?

A11y Table Checker is a professional Chrome extension that automatically audits every HTML table on any webpage for accessibility compliance. It runs a comprehensive suite of WCAG 2.1 checks, visualizes header relationships, simulates how screen readers interpret your tables, and generates detailed reports — all without leaving your browser.

🔍

Automatic Detection

Instantly finds and analyzes all tables on any page, including dynamically injected tables via MutationObserver.

♿

WCAG 2.1 Compliance

Checks against WCAG 2.1 Success Criteria 1.3.1, 4.1.1, 4.1.2, 2.4.3 and more with detailed fix guidance.

🧠

Header Mapping Engine

Resolves complex header associations using scope, headers/id, and positional inference — exactly as screen readers do.

🎯

Visual Overlays

Color-coded highlights show column headers (blue), row headers (green), hierarchy (purple), and active cells (orange).

🔧

One-Click Fixes

Preview and apply accessibility fixes directly in the DOM. Revert any change instantly with the undo button.

📤

Rich Exports

Export full reports as JSON, CSV, styled HTML, or WCAG-structured JSON for integration with CI/CD pipelines.

Installation

Install the Extension

A11y Table Checker is a Chrome extension loaded in developer mode. No build step required — just load the folder directly into Chrome.

Download or clone the extension folder

Obtain the a11y-table-checker folder containing manifest.json, js/, popup/, sidepanel/, and background.js.

Open Chrome Extensions page

Navigate to chrome://extensions in your Chrome browser address bar.

Enable Developer Mode

Toggle the Developer mode switch in the top-right corner of the Extensions page.

Load Unpacked Extension

Click Load unpacked and select the a11y-table-checker folder. The extension icon will appear in your toolbar.

Pin the extension (optional)

Click the puzzle piece icon in Chrome toolbar → click the pin icon next to A11y Table Checker for quick access.

Requirements

🌐

Chrome 116+

Requires Manifest V3 support and Side Panel API.

🔒

No Server Needed

Fully client-side. No data leaves your browser.

📁

~150 KB Total

Lightweight — no external dependencies or frameworks.

Quick Start

Using the Extension

Once installed, A11y Table Checker works on any webpage with HTML tables. Here's how to get your first accessibility report in under 30 seconds.

Navigate to any page with tables

Visit any webpage that contains HTML <table> elements — a government site, data dashboard, or your own web app.

Click the A11y Table Checker icon

Click the 🔍 extension icon in your Chrome toolbar. The popup shows the current status and table/issue counts.

Toggle the extension ON

Flip the Extension Active toggle. The extension immediately scans all tables, injects the analysis panel, and highlights issues.

Review the in-page panel

A floating panel appears on the page showing each table's accessibility score, issue list, and fix suggestions. Hover over table cells to see header associations.

Open the Side Panel for deep analysis

Click Open Side Panel in the popup for the full analysis view — matrix visualization, screen reader simulation, enterprise grid detection, and export options.

Export your report

Use the export buttons to download results as JSON, CSV, HTML report, or WCAG-structured JSON for your team or CI pipeline.

Features

All Features

A11y Table Checker is packed with professional-grade accessibility tools. Every feature is designed to help developers, QA engineers, and accessibility auditors find and fix table issues fast.

🔍

Automatic Table Discovery & Matrix Parsing

Scans every <table> on the page and builds a precise 2D matrix that correctly handles rowspan and colspan merges. Phantom cells are tracked so the logical grid always matches the visual layout.

🧠

Smart Header Association Engine

Resolves header-to-data-cell associations using three strategies in priority order: explicit headers/id attributes, scope attributes, and positional inference. Detects multi-level (complex) header hierarchies and reports ambiguous associations.

♿

WCAG 2.1 Audit Engine (20+ Checks)

Runs a comprehensive battery of checks covering missing captions, empty headers, broken headers references, duplicate IDs, invalid ARIA roles, merged cell ambiguity, deprecated attributes, positive tabindex, and more — each mapped to a specific WCAG success criterion.

📊

Accessibility Score (0–100)

Each table receives a weighted accessibility score from 0 to 100. Scores are color-coded: green (80+), yellow (50–79), red (below 50). Score dimensions break down structural, semantic, ARIA, and keyboard accessibility sub-scores.

🎨

Visual Overlay & SVG Highlights

Hover over any table cell to see animated SVG connection lines linking it to its associated headers. Color coding: ■ Blue = column headers, ■ Green = row headers, ■ Purple = hierarchy, ■ Orange = active cell. Highlights clear on mouse-out.

🔧

One-Click Fix Engine with Live Preview

For every detected issue, the fix engine generates a concrete HTML fix suggestion. Click Preview Fix to apply it live in the DOM and see the result instantly. Click Revert to undo. Click Apply to make it permanent and trigger a re-analysis.

🖥️

Screen Reader Simulation

Simulates how JAWS, NVDA, and VoiceOver would announce each cell — generating the full announcement string including header chain, cell content, and position. Helps developers understand the actual screen reader experience without needing assistive technology installed.

🏢

Enterprise Grid Detection

Detects non-native table grids from popular frameworks: AG Grid, PrimeNG DataTable, Kendo Grid, MUI DataGrid, Handsontable, and DataTables.net. Audits ARIA grid roles, aria-rowcount, aria-colcount, and virtual scrolling accessibility.

⚡

Live DOM Watching (MutationObserver)

Automatically re-analyzes tables when the DOM changes — new tables added, tables removed, or accessibility attributes modified. Debounced at 800ms to avoid performance issues on high-frequency updates. Toggle Live Watch mode from the side panel.

🗂️

Table Classification

Automatically classifies each table as: data, layout, complex (multi-level headers), pivot (both row and column headers), or irregular (partial spans). Classification drives which checks are applied and which fixes are suggested.

⌨️

Keyboard Navigation Analysis

Analyzes whether tables support proper keyboard navigation patterns — Tab order, arrow key navigation for grid roles, focus management, and skip links. Reports missing tabindex patterns and positive tabindex misuse.

📤

4 Export Formats

Export audit results as: JSON (machine-readable), CSV (spreadsheet-friendly), HTML Report (self-contained styled report with sidebar navigation), or WCAG JSON (grouped by WCAG success criterion for compliance reporting).

🔲

Chrome Side Panel Integration

Opens a persistent Chrome Side Panel alongside the page for deep analysis without covering page content. The side panel receives live cell hover data, shows the full matrix, and updates in real-time as you interact with the page.

Architecture

Module Architecture

The extension is built as a collection of independent, focused modules. Each module exposes a clean API on the window object and is loaded as a content script in dependency order.

File	Window API	Responsibility
parser.js	window.A11yParser	Builds the 2D table matrix, handles rowspan/colspan phantom cells, provides debug output.
header-mapping.js	window.A11yHeaderMapping	Low-level header resolution — scope-based and headers/id-based association lookup.
mapping.js	window.A11yMapping	High-level header mapping orchestrator. Detects layout tables, resolves full header chains, detects complexity.
relationship-engine.js	window.A11yRelationship	Builds header chains, heatmap data, breadcrumb trails, and table structure classification.
wcag-rules.js	window.A11yWCAG	Structured WCAG rule definitions. Each rule has an ID, WCAG criterion, severity, and check function.
audit.js	window.A11yAudit	Orchestrates all WCAG checks, normalizes results, calculates accessibility score, detects table type.
table-classifier.js	window.A11yClassifier	Classifies tables by type (data/layout/complex/pivot/irregular) with confidence scores and signal detection.
accessibility-scorer.js	window.A11yScorer	Calculates multi-dimensional accessibility scores with per-dimension breakdowns.
sr-simulator.js	window.A11ySRSimulator	Simulates JAWS/NVDA/VoiceOver cell announcements including full header chain narration.
keyboard-nav.js	window.A11yKeyboardNav	Analyzes keyboard navigation patterns, tab order, focus management, and ARIA grid key handling.
aria-grid.js	window.A11yARIAGrid	Audits ARIA grid/treegrid roles, aria-rowcount/colcount, aria-sort, and interactive cell patterns.
overlay.js	window.A11yOverlay	Manages hover highlights, tooltip display, and cell interaction events. Single tooltip instance.
overlay-svg.js	window.A11ySVGOverlay	Draws animated SVG connection lines between cells and their headers with color-coded strokes.
fix-engine.js	window.A11yFixEngine	Generates fix suggestions, previews fixes live in the DOM, applies fixes, and reverts changes.
site-scanner.js	window.A11ySiteScanner	Full-page scan producing a site-level accessibility summary across all tables.
export.js	window.A11yExport	Generates and downloads JSON, CSV, HTML, and WCAG-structured reports.
enterprise-grid.js	window.A11yEnterpriseGrid	Detects and audits AG Grid, PrimeNG, Kendo, MUI DataGrid, Handsontable, DataTables grids.
virtualization.js	window.A11yVirtualization	Detects virtual scrolling containers and audits their ARIA attributes for accessibility.
panel.js	window.A11yPanel	Renders the in-page floating analysis panel with issue lists, score display, and fix controls.
content.js	window.A11yContent	Main orchestrator — initializes all modules, handles Chrome messages, manages enable/disable lifecycle.

Load Order

// Content scripts load in this order (manifest.json)
parser.js → header-mapping.js → mapping.js → relationship-engine.js
→ wcag-rules.js → sr-simulator.js → table-classifier.js → accessibility-scorer.js
→ audit.js → keyboard-nav.js → aria-grid.js → overlay.js → overlay-svg.js
→ fix-engine.js → site-scanner.js → export.js → enterprise-grid.js
→ virtualization.js → panel.js → content.js (orchestrator, last)

WCAG Checks

WCAG 2.1 Audit Checks

Every check is mapped to a specific WCAG 2.1 Success Criterion. Errors block compliance; warnings are best-practice violations; info items are advisory notices.

Rule ID	WCAG SC	Severity	Description
missing-caption	1.3.1	Error	Data table has no `<caption>` element to identify its purpose.
empty-caption	1.3.1	Warning	Caption element is present but contains no text content.
missing-th	1.3.1	Error	Data table has no header cells (`<th>`) to define column or row headers.
empty-th	1.3.1	Error	A `<th>` element has no text content, making it useless for screen readers.
missing-scope	1.3.1	Warning	Header cell in a complex table lacks a `scope` attribute (col/row/colgroup/rowgroup).
invalid-scope	1.3.1	Error	The `scope` attribute has an invalid value (must be col, row, colgroup, or rowgroup).
broken-headers-ref	1.3.1	Error	A `headers` attribute references an ID that does not exist in the document.
duplicate-id	4.1.1	Error	Multiple elements share the same `id` value, breaking `headers` associations.
missing-id-for-headers	1.3.1	Error	A `<th>` used in a `headers` attribute chain has no `id` attribute.
layout-table-with-th	1.3.1	Warning	A table identified as a layout table contains `<th>` elements, which is misleading.
layout-table-missing-role	1.3.1	Info	Layout table should have `role="presentation"` or `role="none"` to hide it from screen readers.
merged-cell-no-headers	1.3.1	Warning	A cell with `rowspan` or `colspan` > 1 has no explicit `headers` attribute in a complex table.
ambiguous-headers	1.3.1	Warning	A data cell maps to multiple headers of the same type (e.g., two column headers), creating ambiguity.
positive-tabindex	2.4.3	Warning	A table cell or element uses a positive `tabindex` value, disrupting natural tab order.
invalid-aria-role	4.1.2	Error	An element inside the table has an invalid or inappropriate ARIA role value.
missing-aria-label	4.1.2	Warning	An element with `role="grid"` or `role="treegrid"` has no accessible name.
deprecated-summary	1.3.1	Info	The `summary` attribute is deprecated in HTML5. Use `<caption>` or `aria-describedby` instead.
nested-table	1.3.1	Warning	A table is nested inside another table, which can confuse screen reader navigation.
missing-rowgroup	1.3.1	Info	Table lacks `<thead>` / `<tbody>` grouping elements for semantic structure.
aria-hidden-header	1.3.1	Error	A header cell has `aria-hidden="true"`, making it invisible to screen readers.

Export & Reports

Export & Report Formats

Generate and download accessibility reports in four formats. All exports are triggered from the Side Panel export buttons and include full audit data for every table on the page.

📄

JSON Export

Machine-readable full audit dump. Includes table matrix, header mappings, all issues with WCAG references, accessibility scores, and fix suggestions. Ideal for CI/CD integration.

📊

CSV Export

Spreadsheet-friendly format. One row per issue with columns: Table Index, Rule ID, Severity, WCAG SC, Element, Description, Fix Suggestion. Opens directly in Excel or Google Sheets.

🌐

HTML Report

Self-contained styled HTML file with sidebar navigation, issue tables, score cards, and color-coded severity badges. Share with stakeholders — no server required to view.

♿

WCAG JSON

Issues grouped by WCAG Success Criterion. Each criterion entry lists all violations, affected elements, and remediation guidance. Structured for compliance reporting and auditing tools.

JSON Export Structure

// JSON export schema
{
  "exportedAt": "2025-01-15T10:30:00Z",
  "url": "https://example.com/data",
  "summary": {
    "totalTables": 3,
    "totalIssues": 12,
    "errors": 5, "warnings": 6, "info": 1,
    "averageScore": 67
  },
  "tables": [{
    "index": 0,
    "type": "complex",
    "score": 72,
    "issues": [{ "ruleId": "missing-caption", "wcag": "1.3.1", "severity": "error" }],
    "headerMap": { /* cell → header associations */ }
  }]
}

Keyboard Shortcuts

A11y Table Checker is fully keyboard accessible. All panels, overlays, and controls can be operated without a mouse.

Toggle extension on/offAltShiftA

Close overlay / panel / tooltipEsc

Navigate to next tableAlt→

Navigate to previous tableAlt←

Move cell focus right (grid mode)→

Move cell focus left (grid mode)←

Move cell focus down (grid mode)↓

Move cell focus up (grid mode)↑

Jump to first cell in rowHome

Jump to last cell in rowEnd

Jump to first cell in columnCtrlHome

Jump to last cell in columnCtrlEnd

Activate focused fix buttonEnter

Tab through panel controlsTab

Open Side PanelAltShiftS

Export JSON reportAltShiftE

Note: Arrow key navigation is only active when a table cell has focus and the extension is enabled. Tab navigation works throughout the floating panel and side panel at all times.

Pricing

Free & Pro Plans

A11y Table Checker is free for individual use. Every new install includes a 7-day free trial with full Pro access — no credit card required. Upgrade to Pro to keep advanced reporting, dimensional score breakdowns, fix playbooks, and VPAT compliance exports — powered by ConformPilot.

Free

$0 / forever

Full WCAG audit engine, visual overlays, and basic exports — no account required.

✅20+ WCAG 2.1 checks
✅Smart header association engine
✅Visual overlays & SVG highlights
✅Accessibility score (0–100)
✅Screen reader simulation
✅JSON export
✅CSV export
✅Enterprise grid detection
✅Live DOM watching
🔒Dimensional score breakdown
🔒Fix playbooks (multi-strategy)
🔒HTML report export
🔒WCAG-structured export
🔒VPAT 2.4 report export
🔒ConformPilot branding on reports

Install Free

⭐ Pro

$9 / month

Everything in Free, plus professional compliance reports, fix playbooks, and VPAT exports for enterprise accessibility audits.

✅Everything in Free
⭐5-dimension score breakdown
⭐Fix playbooks — multi-strategy options
⭐Styled HTML report export
⭐WCAG-structured JSON export
⭐VPAT 2.4 compliance report
⭐ConformPilot branding on all reports
⭐Licence key — use on any machine
⭐Priority support

Upgrade to Pro →

Full Feature Comparison

Feature	Free	⭐ Pro
Core Audit Engine
20+ WCAG 2.1 checks	✓	✓
Smart header association (scope / headers/id / positional)	✓	✓
Table classification (data / layout / complex / pivot)	✓	✓
Accessibility score (0–100)	✓	✓
5-dimension score breakdown	—	✓
Visualisation & Interaction
Visual overlays & SVG header connection lines	✓	✓
Screen reader simulation (JAWS / NVDA / VoiceOver)	✓	✓
Live DOM watching (MutationObserver)	✓	✓
Enterprise grid detection (AG Grid, MUI, Kendo…)	✓	✓
Fix Engine
Single-strategy fix suggestions	✓	✓
Live DOM preview & revert	✓	✓
Fix playbooks (multi-strategy options per issue)	—	✓
Export & Reports
JSON export	✓	✓
CSV export	✓	✓
Styled HTML report	—	✓
WCAG-structured JSON export	—	✓
VPAT 2.4 compliance report	—	✓
ConformPilot branding on reports	—	✓

⭐ Already have a Pro licence?

Enter your licence key in the extension popup to unlock all Pro features instantly. Your key is validated securely against api.conformpilot.com and cached locally for 24 hours — no repeated network calls.

📦 Install Extension 🌐 Get a Pro Key →

FAQ

Frequently Asked Questions

Common questions about installing, using, and understanding A11y Table Checker.

Does the extension work on all websites?▼

Yes. The extension injects into any HTTP/HTTPS page. It works on static sites, SPAs (React, Angular, Vue), and server-rendered pages. For pages that load tables dynamically, the MutationObserver automatically detects and analyzes new tables as they appear.

Does it send any data to external servers?▼

No. A11y Table Checker is 100% client-side. All analysis runs locally in your browser. No page content, table data, or audit results are ever transmitted to any server. The extension has no network permissions beyond accessing the active tab.

Why does the extension show 0 tables on some pages?▼

Some pages use CSS Grid or Flexbox for visual table layouts instead of actual HTML <table> elements. The extension only analyzes semantic HTML tables. For framework-based grids (AG Grid, MUI DataGrid, etc.), use the Enterprise Grid detection feature in the Side Panel.

What does the accessibility score mean?▼

The score (0–100) is a weighted composite of four dimensions: structural integrity (headers, caption, rowgroups), semantic correctness (scope, headers/id associations), ARIA usage (roles, labels, properties), and keyboard accessibility (tabindex, focus management). A score of 80+ is considered good; below 50 indicates critical issues that block screen reader users.

Can I use the fix engine on production sites?▼

The fix engine modifies the live DOM in your browser only — it does not edit source files. Changes are temporary and reset on page reload. Use the Preview Fix feature to verify the fix looks correct, then copy the suggested HTML from the fix panel and apply it to your actual source code.

How do I audit a page that requires login?▼

Simply log in to the page normally in Chrome, then enable the extension. Since it runs as a content script in your existing browser session, it has full access to the authenticated page content — no special configuration needed.

Why is my layout table flagged as having issues?▼

If a table is used purely for layout (not data), it should have role="presentation" or role="none" so screen readers skip it. If it contains <th> elements, those will also be flagged since layout tables should not have semantic header cells. The fix engine will suggest adding the appropriate role attribute.

Does the extension support Chrome on Mac and Linux?▼

Yes. The extension is a standard Chrome Manifest V3 extension and works on Chrome 116+ on Windows, macOS, and Linux. It also works on Chromium-based browsers like Edge and Brave that support the Side Panel API.

How do I report a false positive or missing check?▼

Open the browser DevTools console while the extension is active and look for any A11y-prefixed log messages. You can also export the full JSON report which includes the raw table matrix and header map — this data helps diagnose why a particular check fired or was skipped.