VSkipLink first DOM node vs inside VAppBar for keyboard-only navigation

Improving keyboard-only navigation in a single-page Vuetify 3 app with VApp, VAppBar and VNavigationDrawer. The goal is a reliable skip link that is reachable early in tab order without breaking visual consistency with app chrome.

VSkipLink placed as the first DOM node guarantees it is reachable before VAppBar or drawer content, aligning with bypass blocks guidance. It is visually hidden until focus and its visibility can be affected by app layout transitions.

VSkipLink rendered inside VAppBar keeps the skip target visually consistent with app chrome and allows styling with Vuetify theme. It moves the link later in DOM order, which can change initial Tab focus when drawers or dialogs are present.

Assumes Vuetify 3 component API and Vue 3 composition style. Accessibility behavior is version-sensitive and depends on browser and screen reader pairing.

Does placing VSkipLink as the first focusable element guarantee reachability before VNavigationDrawer and VDialog overlays in Vuetify 3? Does rendering VSkipLink inside VAppBar change tab order during layout transitions? Which placement best balances bypass blocks guidance with visual consistency in a user-facing workflow?