如何将列表项列入表格? (意思是:在TAB
上使用:focus
键)。我需要了解障碍可访问性目的。
我添加了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/
答案 0 :(得分:7)
使用tabindex属性 - 通常仅用于在表单中的输入中导航等等 - 但它可用于确定对任何HTML元素的焦点顺序。我已经使用了您现有的文本区域和li,如果您从第一个文本区域开始并使用Tab键 - 您将能够看到焦点更改为我在tabindex代码中列出的时髦订单。此外,shift-tab按反向标签索引顺序移动项目:
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}
&#13;
<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>
&#13;
答案 1 :(得分:0)
实现此目的最简单的方法是将 <li tabindex="0">
与 JavaScript 函数结合使用,为焦点元素添加键盘行为。
tabindex="0"
将确保按自然流顺序访问选项卡。此处提供了针对 enter
和 space
键的可靠 JavaScript 解决方案:
https://karlgroves.com/2014/11/24/ridiculously-easy-trick-for-keyboard-accessibility