Angular accessibility and skip to navigation link

Question

I need to have link for skipping navigation panel in angular, the moving to content part is working fine but tab order is not following. Problem is when user activates the skip to main content link, Page moves to 'main' anchor, but if user continues to navigate with keyboard using tab, the next item is still next link in the navigation bar, so that doesn't solve the problem. How can i make it so when page moves to main content and user presses tab the tab order continues from the main content?

Currently i have <a [routerLink]="" (click)="skipToMain('main')" > Move to main </a>

And in ts file

skipToMain(id) {
  this.router.navigate([], {fragment:id}
}

Also tried with this.viewportScroller.scrollToAnchor(id)

Ritesh Jagga Ritesh Jagga · Accepted Answer · 2021-07-13T08:29:59

When you are skipping to main content i.e. in the click event handler, find the main element and set focus programmatically

let element = document.querySelector('[role="main"]')`
element.setAttribute('tabindex','-1') // You can set tabindex in HTML too than in JS
element.focus()

Angular accessibility and skip to navigation link

2 Answers