Angular 可访问性并跳至导航链接

Question

我需要有用于以角度跳过导航面板的链接，移动到内容部分工作正常，但不遵循选项卡顺序。问题是当用户激活跳到主要内容链接时，页面移动到“主”锚点，但如果用户继续使用选项卡使用键盘导航，下一项仍然是导航栏中的下一个链接，因此这并不能解决问题问题。我怎样才能做到当页面移动到主要内容并且用户按下选项卡时选项卡顺序从主要内容继续？

目前我有

<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>