Free & Open Source Chrome DevTools WCAG 2

A11yBarker

See tab order, screen reader names, heading structure, and WCAG issues directly on the page you are inspecting.

View on GitHub Try the Paw Pals demo
A11yBarker DevTools panel scanning a page, listing accessibility issues such as missing alt text and color contrast.
About

What is A11yBarker?

A11yBarker adds a panel to Chrome DevTools that visualizes accessibility on any webpage: where focus goes, what screen readers announce, how headings are structured, and which elements fail WCAG checks.

Overlays run in an isolated shadow DOM so page styles never clash with highlights. A MutationObserver keeps analysis in sync when the DOM changes in single-page apps.

Features

What it does?

Mode Description
Tab order Numbers each focusable element in keyboard navigation order with screen reader content inline.
Heading structure Labels every h1–h6 on the page; a collapsible tree panel shows the full hierarchy.
aria-hidden Outlines elements hidden from assistive technologies with a dashed border.
Issues overlay Highlights elements with WCAG violations directly on the page, independent of other overlays.
AI checks Optional Claude-powered alt text and heading structure review. Requires an Anthropic API key in config.js.

Static rule checks

  • A Missing image alt (1.1.1)
  • A Empty button or link (4.1.2)
  • A Missing input label (1.3.1)
  • A Positive tabindex (2.4.3)
  • A Duplicate landmark (1.3.1)
  • A Heading hierarchy skip (1.3.1)
  • A Ambiguous link text (2.4.4)
  • A Missing page language (3.1.1)
  • AA Focus outline removed (2.4.7)
  • AA Color contrast (1.4.3)
  • AA Label in name (2.5.3)
  • BP Large image (>1 MB)
Installation

Get started

A11yBarker is not on the Chrome Web Store. Install it as an unpacked extension:

  1. Clone or download the repository.
  2. Open chrome://extensions in Chrome or a Chromium-based browser.
  3. Enable Developer mode, then click Load unpacked and select the folder containing manifest.json.
  4. Open DevTools on any tab. Find the A11yBarker panel and click Sniff page.
Demo

See it in action

Load Paw Pals in Chrome, open DevTools, and click Sniff page. You should see 50+ issues: missing alt text, contrast failures, unlabelled inputs, ambiguous links, and more.

Paw Pals is a fictional dog social network built with intentional accessibility problems, so you can see every overlay and rule in action before you run it on your own work.

AI check sample pages

Not sure what good alt text or heading structure looks like? These pages show real examples with expected AI verdicts, useful for testing the AI check feature or understanding what it flags.