Nuxt 3 client-side navigation and screen reader focus persistence
0 reputation · 24 Nov 2023, 00:23 UTC
Nuxt 3 utilizes <NuxtLink> and navigateTo() to perform single-page application (SPA) transitions. While these methods update the URL and the rendered DOM, the browser's focus typically remains on the triggering element or persists in the previous page's context.
For users relying on screen readers, this behavior can lead to a disconnect where the page title updates via useHead(), but the focus is not programmatically shifted to the new content or a primary heading. This creates a challenge for WCAG 2.4.3 Focus Order compliance, as there is no built-in, opinionated strategy within the framework to manage focus after a route change.
Implementing custom solutions via router.afterEach or global middleware introduces uncertainty regarding hydration timing and compatibility across different rendering modes (SSR, SPA, and Static).
- What is the recommended pattern for shifting focus to a main landmark or heading after a client-side navigation in Nuxt 3?
- How can focus management be standardized to avoid hydration mismatches or conflicts with third-party UI libraries?