flamethrower icon indicating copy to clipboard operation
flamethrower copied to clipboard

Route Announcements

Open Tropix126 opened this issue 2 years ago • 0 comments

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.

image image

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.

SvelteKit's implementation Next Docs

Tropix126 avatar Aug 16 '22 23:08 Tropix126