锚链接和选项卡聚焦

Question

我遇到了多个锚点链接和带有选项卡按钮的键盘导航的问题。

我有 4 个彼此相邻的链接，它们都链接到页面上不同的锚链接。当我在第一个链接上按回车键时，它会将我带到第一个锚点，正如它应该的那样，但是，当我再次按 Tab 时，页面返回到我单击第一个链接的链接行，然后焦点转移到我的 4 个链接行中的第二个链接。当我尝试通过键盘导航时，页面不断上下摆动，这非常烦人。

我希望的行为是，当我第一次按回车键后再次按 Tab 键时，焦点会转移到屏幕上最近的超链接，而不是与我在顶部单击的第一个链接相邻的链接。页面。

此页面具有我想要的锚点/超链接：https://www.sjsu.edu/president/from-the-president/100-days/index.php

这是我可以轻松实现的目标吗？

我尝试调整锚点的放置位置和一些脚本，但无法得到我需要的结果。

Answer 1

因此您有“页面内”链接。链接会带您进一步浏览页面，而不是带您进入新页面。

该链接的目标是哪种 HTML 元素？如果它不是交互式元素，例如标题 (

)、段落 (

) 或列表 (

)，则某些浏览器只会将页面滚动到目标元素，但实际上不会移动 (键盘）焦点在那里。因此，您的注意力仍然集中在您按 enter 的链接上。因此，当您再次按 tab 时，键盘焦点将从第一个链接移动到第二个链接。由于第一个 enter 视觉上滚动了页面，因此下一个 tab 会将页面滚动回第二个链接。

您可以通过将

tabindex="-1"

放在目标元素上来解决此问题。

<a href="#alpha">first</a>
<a href="#beta">second</a>
<a href="#gamma">third</a>
...
<h2 id="alpha" tabindex="-1">important stuff</h2>
...
<a href="http://example.com">some other link</a>

在上面的示例中，在“第一个”链接上按 enter 将滚动页面（如有必要）并将焦点移至 。当我按

tab 时，焦点应该移动到“其他一些链接”而不是“第二个”链接。