Keyboard Accessibility

Vesper Inspect surfaces keyboard accessibility information directly in the hover tooltip as you inspect elements. This lets you spot keyboard focus and reachability problems without running a separate scan or switching to a browser DevTools panel.

Tab order and keyboard reachability

For every element you hover, the tooltip shows whether it is reachable by keyboard:

Ancestor context is included. If you hover an image that is a child of a link, the tooltip reports the keyboard reachability of the link - the element that actually receives focus.

Tabindex

When an element has an explicit tabindex attribute, the tooltip shows its value:

Heading level and skip detection

Heading elements (<h1> through <h6>) show their explicit level in the Role row. If a heading skips a level relative to the previous heading on the page - for example an <h4> immediately following an <h2> - the row is flagged red. Heading level skips break the logical document outline and create a confusing experience for screen reader users who navigate by heading.

Link destination

For anchor elements, the tooltip shows the raw href value. This lets you confirm where a link actually goes without leaving the page - useful when link text alone is ambiguous or when checking that visually identical links point to different destinations.

aria-hidden on interactive elements

When an element has aria-hidden="true" (or is inside an ancestor with aria-hidden="true") and is also keyboard-focusable, the tooltip flags it as a red error. A sighted keyboard user can reach and activate the element, but a screen reader user will hear nothing announced when it receives focus.

Focus traps and aria-hidden
An interactive element that is aria-hidden but still in the tab sequence creates a focus trap for screen reader users. Either remove aria-hidden from interactive elements, or ensure they are also removed from the tab sequence with tabindex="-1".

Keyboard shortcut

You can toggle Vesper Inspect on and off with Option+Shift+I on macOS without clicking the toolbar icon. The shortcut can be reassigned at chrome://extensions/shortcuts.