Presence of live region may be confusing for screen reader users

Describe the problem

We got some feedback in https://github.com/sveltejs/svelte/issues/8508 from a screen reader user who was confused why the page's title appeared at the bottom of the page.

Error when switching pages: When switching back and forth from the homepage to any pages like about or contact, I always have the phenomenon that the title is displayed at the bottom of the page when browsing with a screen reader. That is, when switching between pages, the title will display in the footer, not elsewhere. This is not the case with vue and react. Specifically, when I visit the website svelte.dev or any other website written in svelte or sveltekit including my website, I have the same situation, when I switch from the homepage to the blog page, it shows the title Its blog is • Svelte at the bottom of the footer. I tried switching to another site and got the same result. This causes discomfort to screen reader users and makes them lose the completeness of the website. I think, need to fix it.

Presumably this is SvelteKit's live region for route announcements, e.g.

<div id="svelte-announcer" aria-live="assertive" aria-atomic="true" style="position: absolute; left: 0px; top: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); overflow: hidden; white-space: nowrap; width: 1px; height: 1px;">FAQ • Svelte</div>

For those coming to this issue without prior experience with SvelteKit route announcements, here's a snippet from the docs explaining what they are and how they work:

In traditional server-rendered applications, every navigation (e.g. clicking on an tag) triggers a full page reload. When this happens, screen readers and other assistive technology will read out the new page's title so that users understand that the page has changed.

Since navigation between pages in SvelteKit happens without reloading the page (known as client-side routing), SvelteKit injects a live region onto the page that will read out the new page name after each navigation. This determines the page name to announce by inspecting the <title> element.

This live region is invisible to sighted users, but is exposed to screen readers and other assistive technology. By updating it on navigation, the new route title is read out to those users. However, it's still present in the DOM, so an assistive technology user could encounter it and be confused by its presence.

Describe the proposed solution

I'm honestly not sure of a solve for this. We need the live region for route announcements, so removing it is not an option without figuring out an alternative way to announce the navigation.

Potentially some additional text clarifying the purpose of the region would help, but then we'd have to provide a way to localize that text (and additional text for screen readers to read out is not always a good thing).

Alternatives considered

If we are able to determine that the existing solution is acceptable (ideally by talking to other assistive technology users), then this issue can be closed.

Importance

nice to have

Additional Information

The route announcement in a live region method was part of the recommendation in Marcy Sutton's research on accessible client-side routing for Gatsby: https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing

Next.js also does something similar: https://nextjs.org/docs/accessibility#route-announcements

So we aren't out-of-line with other frameworks' solutions - though that doesn't mean we're in the clear.

Start by reviewing SvelteKit's route-announcement live region and the accessibility documentation linked in the issue. Investigate whether screen reader users can encounter the hidden region after navigation, then determine whether the current behavior is acceptable or what alternative announcement approach should be evaluated. Done means reaching that accessibility decision with supporting assistive-technology feedback.