Tooltip Reference

This page is a complete reference for every field in the Vesper Inspect hover tooltip. Fields are shown conditionally based on the element type - not every field appears for every element.

Accessible Name

Always shown. The computed accessible name of the element - the text that assistive technology will announce when interacting with it.

Value	Meaning
A text string	The computed name. May come from element content, `aria-label`, `aria-labelledby`, `alt`, `title`, or an associated `<label>`.
None	No accessible name could be computed. For interactive elements this is usually a problem - buttons, links, and inputs require accessible names.
(hidden)	The element is hidden from assistive technology via `aria-hidden="true"` or `display: none`.

Role

Always shown. The ARIA role of the element, either explicit (role="button") or implicit (a <button> element has an implicit role of button).

Common implicit roles to know:

Element	Implicit role
`<a href>`	`link`
`<button>`	`button`
`<input type="text">`	`textbox`
`<input type="checkbox">`	`checkbox`
`<select>`	`combobox`
`<img>`	`img`
`<img alt="">`	`presentation`
`<nav>`	`navigation`
`<main>`	`main`
`<h1>`-`<h6>`	`heading`

ARIA Attributes

Shown when ARIA attributes are present. Displays all aria-* attributes on the element as key-value pairs. If no ARIA attributes are present, this row is hidden.

Link Destination

Shown for anchor elements (<a href>). Displays the raw href value of the link in monospace. Useful for confirming where a link goes without leaving the page - particularly when the link text alone is ambiguous or when checking that two links with the same text actually point to different URLs.

Tab Index

Shown for focusable elements.

Value	Meaning
In tab sequence (position N)	The element is reachable via `Tab` and is at the given position in the sequence.
Programmatic only (`tabindex="-1"`)	The element can receive focus via script but is not in the `Tab` sequence.
Not focusable	The element is neither natively focusable nor has a `tabindex` attribute.

Contrast Ratio

Shown for text elements. The computed contrast ratio between the text color and its background, along with a pass/fail indicator for WCAG AA.

Threshold	Applies to
4.5:1	Normal text (below 18pt / 24px, or below 14pt bold / ~18.67px bold)
3:1	Large text (18pt / 24px or larger, or 14pt bold / ~18.67px bold or larger)

Contrast detection works best on elements with a solid or near-solid background color. Text over complex gradients, patterns, or photographs may show an approximate value.

Font

Shown when the element has direct text content. Displays font size (px), weight, WCAG large-text classification, and font family.

The large-text badge is highlighted when the text meets WCAG's large text threshold - useful for quickly confirming which contrast ratio applies to a given text element.

Colors

Shown for text elements. The raw hex values for the computed foreground (text) color and background color. These match the values used to calculate the contrast ratio above.

aria-hidden

Shown when aria-hidden="true" is present on the element or any ancestor. Indicates the element is hidden from assistive technology. Displayed as a red error when the element is also keyboard-focusable - a screen reader user would focus the element by pressing Tab but hear nothing announced.

aria-describedby

Shown when aria-describedby is set. The referenced element IDs are resolved and their text content is displayed, providing the full description that assistive technology reads after the accessible name. If a referenced ID does not exist in the DOM, the row flags a broken reference.

ARIA State

Shown when any ARIA state attribute is present. Displays the current values of aria-expanded, aria-pressed, aria-checked, and aria-selected when set on the element. Useful for confirming that interactive widgets correctly reflect their current state to assistive technology.

Form Details

Shown for <input>, <select>, and <textarea> elements. Reports the following attributes when present:

Attribute	Meaning
`required`	The field must be completed before form submission.
`disabled`	The field is not interactive and will not be submitted.
`readonly`	The field is visible and selectable but cannot be edited.
`autocomplete`	The autocomplete token, e.g. `email`, `tel`, `name`. Missing `autocomplete` on `email`, `tel`, and `password` inputs is flagged amber - WCAG 1.3.5 (Identify Input Purpose) requires these fields to have a recognized autocomplete token.

Image File Size

Shown for <img> elements. Reports the file size of the image. Size is read from the browser's performance resource timing API - no additional network requests are made. Images over 1 MB are flagged amber with a note to consider optimizing before publishing. Large images affect page load time for all users, and particularly affect users on slow connections.