如何循环标记列表项答案

【问题标题】：How to Tab List Items Cyclically如何循环标记列表项
【发布时间】：2016-06-29 20:48:53
【问题描述】：

我正在尝试在下拉菜单中使选项卡循环。

这是我的 JSFiddle：https://jsfiddle.net/Lc7saks3/

<nav id="primary_nav_wrap">
  <div>
    <ul>
      <li tabindex="0"><a href="#">Menu</a>
        <ul>
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
        </ul>
      </li>
    </ul>  
  </div>
  <br />
  <br />  
  <input type="text" />
</nav>

单击菜单元素，然后通过选项卡浏览选项。

目前，选项卡会通过下拉菜单中的 5 个选项，然后移动到输入元素。

我怎样才能使下拉选项再次出现标签，循环地，从选项 1 开始，一旦达到最后一个选项（选项 5）？

【问题讨论】：

标签： javascript html tabs navigation accessibility

【解决方案1】：

您需要在on the last item 时使用脚本listen for the Tab key，并在按下时立即move focus 回到第一项（或在到达最后一项时动态调整tabindex 的值）。

但是，不要这样做，因为它构成了键盘陷阱并且是 WCAG 2.0 项目 2.1.2 No Keyboard Trap 的失败。有一种冗长的技术可以处理这个问题，基本上是说不要做你想做的事情：G21: Ensuring that users are not trapped in content

最后，我建议您将tabindex 从li 中删除，因为它不是交互式/可操作控件，也没有tabindex 的位置。

【讨论】：