Overview
Vesper Inspect is a Chrome extension that lets you inspect the accessibility attributes of any element on a web page by hovering over it. It surfaces the information you need during development and QA - accessible name, role, ARIA attributes, tab order, color values, and more - in a compact tooltip, without switching to DevTools.
What Vesper Inspect shows you
When you hover over an element, Vesper Inspect displays a tooltip containing:
- Accessible name - the name exposed to assistive technology, computed from the element's content, label, or ARIA attributes
- Role - the ARIA role, either explicit or implicit from the HTML element type
- ARIA attributes - any
aria-*attributes present on the element - Tab order position - whether and where the element appears in the keyboard tab sequence
- Color and contrast - foreground color, background color, and contrast ratio for text elements
- Font information - font size, weight, whether the text qualifies as large text under WCAG, and font family (shown when the element contains direct text)
Installation
- Open Chrome and go to the Chrome Web Store (opens in a new tab).
- Search for Vesper Inspect and click Add to Chrome.
- Confirm the permissions prompt. Vesper Inspect requires access to page content on all sites you choose to inspect.
After installation, the Vesper Inspect icon appears in your Chrome toolbar. Pin it for easy access.
Activating Vesper Inspect
- Navigate to any web page you want to inspect.
- Click the Vesper Inspect icon in the Chrome toolbar. The icon badge shows ON when the inspector is active.
- Move your cursor over elements on the page - the accessibility tooltip appears as you hover.
Click the toolbar icon again to turn the inspector off. Vesper Inspect remembers its on/off state across page navigations within the same browser session.
Current version
Vesper Inspect is currently in alpha (v0.2.x). It is stable for daily use but some features are still in development. If you encounter unexpected behavior, please let us know.