flamethrower
flamethrower copied to clipboard
Route Announcements
Many client-side routers, including SvelteKit and Next's routers have a visually hidden "announcer" element that declares new routes to assistive technologies when the page is navigated. This is acomplished through the aria-live="assertive"
state.
From looking at existing implementations, the announcer simply populates it's innerHTML with name of any new page title after navigation is completed.
The Next.js route announcer looks for the page name to announce by first inspecting document.title, then the
<h1>
element, and finally the URL pathname. For the most accessible user experience, ensure that each page in your application has a unique and descriptive title.