Angular: single-page web app accessibility, putting the user in the right place after...

I'm working on an Angular application and focusing on accessibility. At the top of the page are "skip to main navigation" and "skip to main content" links. It's been my idea, with support from at least a few resources on the Web, that when a user clicks a link or button that switches to another view, the best experience is provided by setting the focus to the start of the main content, not to the top of the page. So I've arranged for that to happen:

this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
const topOfContent = <HTMLElement>document.querySelector('#topofcontent');
if (topOfContent) {
topOfContent.focus();
}
});


This, however, sends the user to the top of the main content even on first arrival to the site via an external link or entry of the URL into the browser's address field. I'm trying to figure out how to have my cake and eat it to: Have the site's skip-links and then its banner and navigation recited when a user arrives at the site, but from then on to take the user to the top of the main content upon navigation within the site. Am I wanting the right thing and, if so, how are people making this happen?

UPDATE 1: Should I also have a scrollTo?

UPDATE 2: One idea that came to me, but I don't know if it's a good strategy: add a flag to the app component set initially to false, and modify the code above so that as long as the flag is false, end-of-route navigation should be to top-of-page. When it's true, from then on end-of-route navigation should be to top-of-content. Set it to true the first time the user uses the "skip to main content" link.

Continue reading...