javascript - 使不可聚焦元素可聚焦于跳转链接，但不使用 tabindex ="0"

Question

有时需要使不可聚焦的元素对于屏幕阅读器来说是可聚焦的。

示例:创建类似 <a href="#target">Skip to content</a> 的跳转链接时跳转到 ID 时，特定元素也获得焦点很重要，因此不仅视口(viewport)滚动到该元素，而且焦点也设置在那里。否则，当仅使用键盘的用户尝试跳到下一个元素时，他就会“跳”回文档的开头(预计跳位将从 #target 对象开始)。

这里tabindex="0"是需要的，它按预期工作。不太好的事情是，在其他用例中(例如，在整个页面中按 Tab 键时)，这很烦人(您通常不想聚焦不可聚焦的元素)。

一种解决方法可能是:创建一个 JavaScript，在页面加载时...

• 扫描整个文档以查找针对 ID 的链接
• 添加对函数的调用 addVolatileTabindex激活时指向每个链接
  • 激活链接后，addVolatileTabindex添加 tabindex="0"到目标元素，然后将其聚焦
  • 它还添加了对 removeVolatileTabindex 的调用当焦点从目标元素丢失时
  • 当 removeVolatileTabindex称为 tabindex="0"再次被删除

这边，tabindex="0"仅在真正需要时才存在，否则就不存在。

是否已经有解决方案？或者还有其他方法可以实现这一目标吗？

Answer 1

也使用 tabindex="-1" ，一旦用户关闭(模糊)，您就可以删除 tabindex，这样焦点就永远不会转到该元素 - 即使用户单击它.