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

问题描述

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

<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>

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

当前，它是在“ padding”元素之间切换。

有什么方法可以告诉浏览器忽略填充后的父项，而直接将选项卡指向子项吗？

解决方法

这里有几件事要考虑：

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

,

您可以在所需元素上设置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>