Angular 辅助功能并跳至导航 link

Question

我需要 link 才能跳过 angular 中的导航面板，移动到内容部分工作正常，但不符合 Tab 键顺序。问题是当用户激活跳到主要内容 link，页面移动到 'main' 锚点，但如果用户继续使用标签使用键盘导航，下一个项目仍然是下一个 link导航栏，这样不能解决问题。我怎样才能做到这一点，当页面移动到主要内容并且用户按下选项卡时，选项卡顺序从主要内容继续？

目前我有<a [routerLink]="" (click)="skipToMain('main')" > Move to main </a>

并且在ts文件中

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

也尝试过 this.viewportScroller.scrollToAnchor(id)

Answer 1

当您跳转到主要内容时，即在单击事件处理程序中，找到 main 元素并以编程方式设置焦点

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

Answer 2

<a [routerLink]="['./']" fragment="education">aaa</a>

Angular 辅助功能并跳至导航 link

Angular accessibility and skip to navigation link

accessibility

angular