Javascript 使不可聚焦的元素可聚焦于跳转链接，但不要'；t使用tabindex="；0“；

有时需要使非聚焦元素对屏幕阅读器聚焦

例如：当创建跳转到ID的跳转链接（如

）时，特定元素也必须获得焦点，这样不仅视口会滚动到元素，而且焦点也会设置在那里。否则，只有键盘的用户在尝试切换到下一个元素时会“跳回”文档的开头（期望切换从

#target

对象开始）

这里需要

tabindex=“0”

，它可以正常工作。不太好的事情是，在其他用例中（例如，在整个页面中使用tab键时），这很烦人（您通常不想聚焦不可聚焦的元素）

一种解决方法是：创建一个javascript，在页面加载时

• 扫描整个文档以查找指向ID的链接
• 在激活时向每个链接添加对函数的调用

  addVolatileTabindex

  • 当链接被激活时，

    addVolatileTabindex

    向目标元素添加一个

    tabindex=“0”

    ，然后将其聚焦
  • 当焦点从目标元素丢失时，它还会添加对

    removeVolatileTabindex

    的调用
  • 调用

    removeVolatileTabBindex

    时，将再次删除

    tabindex=“0”

这样，

tabindex=“0”

只在真正需要时才存在，否则就不存在了

---

是否已经有了解决方案？或者有其他方法来实现这一点吗？

使用

tabindex=“-1”

此外，一旦用户关闭选项卡（在模糊上），您可以删除tabindex，这样即使用户单击，焦点也不会转到元素。

啊，您是对的，这样更好。但我仍然必须使用JavaScript设置焦点，对吗？这就是webaim.org所做的。第一个选项卡将显示“跳到主要内容”链接。选择它时，焦点将移动到适当的区域，调用focus（），并删除tabindex。他们也有一个很好的黄色法丁，所以很明显你在哪里。当您在进入主区域后进行TAB时，TAB将移动到该主区域中的下一个可聚焦对象，这与您尝试实现的行为相同。我想你可能想看一个例子。回答得好。我不明白（或不记得）在哪种情况下，当使用tabindex=“-1”时，设置焦点需要Javascript。某些浏览器中是否存在任何错误？我无法复制它。@adam，如果您发布了一个关于tabindex的单独问题，可能会更容易，因为此评论区域的回复字符有限，从技术上讲，仅用于对发布的答案进行评论，而不用于回答其他问题。尽管如此，听起来您可能不熟悉tabindex。该属性允许元素接收焦点。它实际上不会将焦点移动到元素。如果将tabindex设置为0，则可以使用TAB键访问元素。如果将其设置为-1，则必须使用javascript将焦点放在元素上。（续）您可以尝试一个简单的示例。做一个和一个。当您单击按钮时，让它将焦点发送到。它不起作用，因为a不接受焦点。但是如果你把它改成，那么它就会工作。-1只允许元素接收焦点。您可以使用tabindex='0'再试一次，现在可以使用TAB键访问。（旁注：如果没有焦点指示器，您可能不会注意到是否会获得焦点。添加div:focus{outline:#00FF00 solid 4px}以使焦点指示器更明显）。