Live Accessibility Overlay bởi Christopher Balogun

Accessibility tools usually hand you a wall of rule codes and contrast ratios. This one tells you what is wrong in the words you would actually use, shows you where it is on the page, and moves on to the next thing.

HOW IT WORKS

Click the icon on any page, or press Alt+Shift+A. You get a short list of problems in plain language — "This text is hard to read", "This image has no description", "Keyboard focus jumps backwards" — sorted by what to fix first, then down the page.

Open one and you get why it matters, who it affects, and how to fix it. For colour problems it shows the text colour, the background colour and the contrast score, then suggests the closest colour to your original that people can actually read, ready to copy.

Only the issue you are looking at is marked on the page, so a page with real problems never turns into a wall of boxes. Press Next to walk through the rest.

WHAT IT CHECKS

• Text contrast: measured with the standard WCAG formula, compositing translucent backgrounds and inherited opacity, with the correct thresholds for large text
• Headings: the full outline, flagging skipped levels, empty headings and a missing H1
• Image descriptions — missing alt text, filenames used as descriptions, and links that contain only an image and so announce as nothing at all
• Keyboard order: the route the Tab key takes, flagging positive tabindex, focus that jumps backwards, and off-screen controls that can still be reached

It also draws the keyboard path across the page on request, and shows the heading outline as a map you can click through.

BUILT WITH CARE ABOUT FALSE POSITIVES

Screen-reader-only text and disabled controls are excluded, because neither is a real problem and reporting them is what trains people to ignore a tool. Where text sits on a photograph or a gradient, it says the contrast cannot be measured rather than inventing a number.

It also tells you when it has finished reading the page, so a page still loading never hands you a partial result that looks complete.

FOR DEVELOPERS TOO

Every ratio, hex value, CSS selector and WCAG reference is one click away under "Technical details" — present when you want it, invisible when you do not.

The panel is itself fully keyboard navigable, respects prefers-reduced-motion, follows your light or dark theme, and its own palette is contrast-tested in both.

PRIVACY

Nothing is uploaded, ever. There are no analytics, no accounts, and no network requests of any kind. The extension holds no permission to read any site: it is injected only into the tab you invoke it on, only when you click the icon, and it cannot see a page you have not explicitly opened it on.

Automated checking catches roughly a third of real accessibility barriers. This will not tell you whether your alt text is any good, whether your reading order makes sense, or whether a form is understandable under stress. Those still need a person.