HTML – 如何使列表项“Tabbable”(使用Tab键：专注于他们)

如何使列表项可以列表？ (意思是：使用TAB键：专注于它们).我需要了解障碍可访问性目的.

我添加了2个文本字段,以便为TAB提供参考点;如果你从textarea中选择它进入下一个,然后跳过所有列表项.

HTML：

<textarea></textarea>
<textarea></textarea>
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

CSS：

li {
  display: block;
  height: 100px;
  margin: 0 auto;
  width: 95%;
}
a:active,a:focus,li:active,li:focus {border: 5px solid orange}

li:nth-of-type(1) {background-color: red}
li:nth-of-type(2) {background-color: yellow}
li:nth-of-type(3) {background-color: blue}
li:nth-of-type(4) {background-color: green}

jsfiddle：https://jsfiddle.net/h815zLnp/

解决方法

使用tabindex属性 – 通常仅用于在表单中的输入中导航等等 – 但它可用于确定对任何HTML元素的焦点顺序.我已经使用了您现有的文本区域和li,如果您从第一个文本区域开始并使用Tab键 – 您将能够看到焦点更改为我在tabindex代码中列出的时髦订单.此外,shift-tab按反向标签索引顺序移动项目：

li {
  display: block;
  height: 100px;
  margin: 0 auto;
  width: 95%;
}

a:active,li:focus {border: 5px solid orange}

li:nth-of-type(1) {background-color: red}
li:nth-of-type(2) {background-color: yellow}
li:nth-of-type(3) {background-color: blue}
li:nth-of-type(4) {background-color: green}

<textarea  tabindex="1"></textarea>
<textarea  tabindex="3"></textarea>
<ul>
  <li tabindex="2"></li>
  <li tabindex="5"></li>
  <li tabindex="4"></li>
  <li tabindex="6"></li>
</ul>