Javascript 跳到母版页中的内容集焦点在容器上

我目前正在开发一个网站，试图让键盘用户更容易访问。我在母版页中实现了“跳到主内容”模式，我遇到了一个小的可用性问题

这是我使用的链接：

<a class="skip-main" href="#main">Skip to main content</a>

这是母版页中的#主容器，它只是一个包含内容的容器

<div id="main" tabindex="-1"> <!-- Actual content --> </div>

当我点击指向主要内容的链接时，焦点被设置在容器上，但是这对键盘用户来说毫无意义。需要另一个选项卡才能转到实际页面内容

我知道我可以通过将#main标记移动到内容来解决这个问题，但这并不是这个网站的真正选项，它需要在母版页内完成

---

所以基本上我的问题是，有人知道直接跳过主容器到内容的方法吗。非常感谢

当

tabindex

设置为

负整数

如

-1

时，它将成为

编程焦点

，但它

不包括在选项卡顺序中

。换句话说，使用tab键浏览内容的人无法访问它，但可以通过脚本将重点放在它上

例如，将焦点移动到表单返回的错误摘要。摘要通常位于表单的开头，因此

您希望引起屏幕阅读器/放大镜用户的注意，并
将所有仅键盘用户定位在表单的开头，以便他们可以开始更正任何错误。不过，您不希望错误摘要本身包含在页面的选项卡顺序中

资料来源：

因此，您可能只需要使用tabindex的正值来解决问题