0

我有一个问题要问你。
我正在制作一个主页，其中有带有背景imgs的元素包装器，里面有cta。每个 wrapper 和 cta 都有自己的 tabindex（hp 中大约有 400 个 tabindex），它们都是有序的。
奇怪的是，当我使用 TAB 导航时，即使 tabindexs 的顺序正确，也是首先导航所有 div 包装器，然后在到达页脚后返回页面以导航 cta。
cta 是<div><objects><a tabindex="x"></object></div>，包装器是<div><a tabindex="x"><picture></a></div> 我遇到的问题是，我发现的每一条信息都是关于让浏览器忽略 tabindex，我需要相反的信息 :)
祝你有美好的一天。最大限度

4

1 回答 1

0

您无需tabindex在<a>. 浏览器将<a>按照 DOM 中元素的顺序遍历可聚焦的元素，例如 DOM。仅当您需要更改默认行为tabindex时才应添加 a 。通常不鼓励使用和以外的值。tabindex0-1

如果您希望包装器也可以通过键盘聚焦，请添加tabindex="0"到它们中。tabindex="0"将使元素键盘按顺序 DOM 顺序（就像 ）可聚焦（如果它还不像 div <a>）。

我不完全理解您的伪代码，但我认为 CTA 在可聚焦包装器内。在这种情况下，以下示例代码将让您按此顺序制表：包装器 1、链接 1、包装器 2、链接 2 等。

<div tabindex="0">
  <p>Content</p>
  <a href="#">Link</a>
</div>
<div tabindex="0">
  <p>Content</p>
  <a href="https://google.com">Link</a>
</div>

如果您或其他读者没有得到预期的结果，请注意两点：

  1. 要成为键盘焦点<a>标签需要有一个href这样它们是交互式的，否则它们将被跳过。
  2. 在 macOS 上，您需要打开键盘聚焦，否则链接将无法聚焦。请注意，每个浏览器的设置都不同。
于 2022-03-02T01:39:58.537 回答