Chrome Extension

See what
the page is hiding.

Enable Vesper Inspect and hover over elements as you browse your site to instantly surface their accessibility attributes in a clean overlay - no DevTools interaction or experience required.

Install from Chrome Web Store Read the docs

Chrome Extension · Manifest V3 · What's new

Requires Google Chrome

What the tooltip shows

Every hover surfaces a consistent set of accessibility data for the element under your cursor. The tooltip header changes color - green, amber, or red - based on the worst issue found.

Element Tag name, element ID, and first three CSS classes.
ARIA label The aria-label attribute value, or "none" if not set.
Accessible name The computed accessible name, resolved using ACCNAME-1.2 priority order: aria-labelledby → aria-label → text content → title. Green if found, red if missing on an interactive element.
Role Explicit ARIA role, or the implicit semantic role with a label indicating it was derived from the element's tag.
Alt text Images only. Red if the alt attribute is missing entirely, amber if it is empty (decorative), green if present.
Title attr The title attribute value, or "none".
Tab order Green if the element is reachable by keyboard (including via a focusable ancestor). Red if not.
File size Images only. Reads from the browser performance timeline - no additional network requests.
Font For elements with direct text content: font size, weight, WCAG large-text classification, and font family.

How it works

Mouse mode

The tooltip follows your cursor as you hover over elements. Offset 16px, flips automatically to avoid viewport edges. Default mode.

Tab mode

The tooltip is fixed in the top-right corner and updates as you tab through the page with the keyboard. Useful for keyboard navigation testing.

Keyboard shortcut

Toggle the inspector on or off with ⌥⇧I on Mac. Reassignable in Chrome extension shortcuts.

Ready to start inspecting?

Read the documentation to learn how to install and use Vesper Inspect effectively.

Read the docs