Chrome DevTools

A11y Barker

Accessibility visualizer for Chrome DevTools — see tab order, names, headings, and WCAG issues directly on the page you are inspecting.

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

What is A11y Barker?

A11y Barker is a free, open-source Chrome extension that adds a dedicated panel to Chrome DevTools. It helps developers and designers visualize accessibility on any webpage: where focus goes, what screen readers announce for controls, how headings are structured, and which elements fail common WCAG-aligned checks — without leaving the browser.

Overlays run in an isolated shadow DOM layer so page styles do not clash with highlights. For single-page apps, a MutationObserver keeps analysis in sync when the DOM or relevant attributes change.

Features

Overlay modes

Tab order, screen reader content, heading structure, aria-hidden regions, and issue highlights on the live page.

Static rules

Checks for missing alt text, empty controls, labels, tabindex, landmarks, headings, links, language, focus styles, contrast, label-in-name, and large images.

AI checks (optional)

With an Anthropic API key in config.js, optional Claude-powered heading and image-alt reviews after you run Sniff page.

Installation

A11y Barker is not distributed 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 choose Load unpacked and select the extension folder (the directory that contains manifest.json).
  4. Open DevTools on any tab — use the A11y Barker panel to sniff the page and toggle overlays.

Demo page

The Paw Pals demo is a fictional dog social network page built with intentional accessibility problems so you can see Barker’s overlays and rules in action. Use it to learn what the extension reports before you run it on your own sites.