Hover Inspection

Hover inspection is the core mode of Vesper Inspect. When active, moving your cursor over any element on the page reveals a tooltip panel showing that element's accessibility properties in real time.

Activating hover inspection

1. Click the Vesper Inspect icon in the Chrome toolbar.
2. In the popup, ensure the Hover Inspection toggle is on.
3. Move your cursor over any element on the page.

The tooltip appears near the cursor and updates as you move between elements. It repositions automatically to stay within the viewport.

What the tooltip shows

Accessible name

The computed accessible name of the element - this is what assistive technology will announce when the element receives focus or is encountered during reading. The accessible name is derived from (in order of priority):

• aria-labelledby - references another element's text
• aria-label - an explicit string override
• The element's visible text content
• An associated <label> element (for form inputs)
• alt text (for images)
• title attribute (fallback)

If no accessible name can be computed, the tooltip shows None - a flag that the element may need attention.

Role

The ARIA role of the element, either explicitly set via the role attribute or implicitly derived from the HTML element type. For example, a <button> has an implicit role of button; an <a href> has a role of link.

ARIA attributes

Any aria-* attributes present on the element, displayed as key-value pairs. This includes state attributes (aria-expanded, aria-selected, aria-checked), relationship attributes (aria-labelledby, aria-describedby), and property attributes (aria-required, aria-live).

Tab index

Whether the element is in the tab sequence and its position. Elements that are natively focusable (buttons, links, inputs) appear here automatically. Elements with tabindex="0" are included; elements with tabindex="-1" are noted as programmatically focusable but not in the tab sequence.

Color and contrast

For text elements, the tooltip shows:

• Foreground color (as a hex value)
• Background color (as a hex value)
• Computed contrast ratio
• Whether the ratio passes WCAG AA (4.5:1 for normal text, 3:1 for large text)

Font information

Shown when the hovered element contains direct text content:

• Font size (in pixels)
• Font weight
• Whether the text qualifies as large text under WCAG (18pt / 24px or larger, or 14pt / ~18.67px bold or larger)
• Font family

The large text classification is shown because it determines which contrast ratio threshold applies (3:1 for large text vs 4.5:1 for normal text).

Tips for effective use

• Hover over images to quickly check whether they have alt text and what it says.
• Hover over icon-only buttons to verify they have an accessible name via aria-label.
• Hover over form inputs to confirm they are correctly labeled.
• Hover over decorative elements to confirm they are hidden from assistive technology (aria-hidden="true").
• Check the contrast ratio on any text that looks borderline - especially placeholder text, disabled states, or text on colored backgrounds.