时间戳

首页 > 解决方案 > 如何直接制表到子元素并忽略父元素

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

问题描述

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

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

使用键盘，我想一个接一个地点击可点击项目。

目前它正在通过“填充”元素进行选项卡。

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

标签： htmlcssdomaccessibilitytabindex

解决方案

这里有几点需要考虑：

  1. <div class="clickable-item" />并不表示它是可点击的项目。请参阅：使可单击的 <div> 可通过选项卡结构访问？关于为什么使用 adiv并不总是最好的解决方案，而使用 a buttonora标签对于可访问性更好。
  2. 与 Anis R. 所说的不同，如果您想根据页面的顺序保持选项卡的逻辑流程，您需要tabindex="0"在元素上使用。
  3. 如果您必须使用 div，请考虑<div class"clickable-item" role="button" />在您的 div 上使用，以表明它确实是可点击的。

推荐阅读