如何直接制表到子元素并忽略父元素答案

【问题标题】：How to tab directly to child element and ignore parent如何直接制表到子元素并忽略父元素
【发布时间】：2020-10-23 13:32:02
【问题描述】：

目前我有一个这样的列表：

<div class="list">
  <div class="padding">
    <div class="clickable-item">item 1</div>
  </div>
  <div class="padding">
    <div class="clickable-item">item 2</div>
  </div>
</div>

我想用键盘一个接一个地切换到可点击的项目。

目前它正在通过“填充”元素进行切换。

有什么方法可以告诉浏览器忽略填充的父级并直接对子级进行标签？

【问题讨论】：

您要创建什么，语义非常重要，因此看起来应该是包含<button>s 的<ul>。目前它是如何处理任何事情的？默认情况下，您的示例中的任何内容都无法通过 tab 键访问，所以此示例中是否缺少一些 JavaScript？

标签： html css dom accessibility tabindex

【解决方案1】：

这里有几点需要考虑：

<div class="clickable-item" /> 并不表示它是可点击的项目。请参阅：Making a clickable <div> accessible through tab structure?，了解为什么使用div 并不总是最好的解决方案，而使用button 或a 标签更便于访问。
与 Anis R. 所说的不同，如果您想根据页面的顺序保持选项卡的逻辑流程，您需要在元素上使用 tabindex="0"。
如果您必须使用 div，请考虑在您的 div 上使用 <div class"clickable-item" role="button" /> 以表明它确实是可点击的。

【讨论】：

role=button 是对用户的承诺，您将实现按钮元素所具有的所有事件处理。

【解决方案2】：

您可以在所需元素上设置tabindex 属性。选项卡索引号决定了元素被访问的顺序。

编辑：正如 FullOnFlatWhite 和 Graham Ritchie 所提到的，通常最好使用零（非正数）的制表符索引，或者在您的 div 上使用 role="button"。

<div class="list">
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 1</div>
  </div>
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 2</div>
  </div>
</div>

【讨论】：

你永远不应该真正使用积极的tabindex，它会给逻辑标签顺序带来很多麻烦，因为tabindex > 0 的任何东西都将在文档标签顺序中排在第一位，在出现的任何内容之前在它之前的 DOM 中应该是可聚焦的。