使非焦点元素可用于跳转链接，但不要使用tabindex =“0”

Question

有时候需要让非焦点元素专注于屏幕阅读器。

示例：当创建跳转到ID的<a href="#target">Skip to content</a>等跳转链接时，特定元素也获得焦点非常重要，因此不仅视口会滚动到元素，还会设置焦点那里。否则，只有键盘用户一旦尝试选择标签到下一个元素，就会“跳转”回文档的开头（期望标签从#target对象开始）。

这里需要tabindex="0"，这可以按预期工作。不太好的是，在其他用例中（例如，当在整个页面中进行制表时），这很烦人（您通常不想关注不可聚焦的元素）。

解决方法的排序可能是：在页面加载时创建一个javascript ...

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

这样，tabindex="0"仅在真正需要的时候出现，否则就不存在。

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

Answer 1

同样使用tabindex="-1"，您可以在用户选中（模糊）时删除tabindex，即使用户点击它也不会转到该元素 -