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:

Installation

  1. Open Chrome and go to the Chrome Web Store (opens in a new tab).
  2. Search for Vesper Inspect and click Add to Chrome.
  3. 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

  1. Navigate to any web page you want to inspect.
  2. Click the Vesper Inspect icon in the Chrome toolbar to open the popup.
  3. Toggle Hover Inspection on.
  4. Move your cursor over elements on the page - the accessibility tooltip appears as you hover.

Vesper Inspect remains active as you navigate the page. Toggle it off in the popup when you are done.

Keyboard navigation mode

Vesper Inspect also includes a keyboard navigation mode that highlights focusable elements and their tab order. See Keyboard Navigation Mode for details.

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.