如何使列表项可以列表? (意思是:使用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}
解决方法
使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。