如何解决如何直接制表到子元素并忽略父元素
<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>
当前,它是在“ padding”元素之间切换。
有什么方法可以告诉浏览器忽略填充后的父项,而直接将选项卡指向子项吗?
解决方法
这里有几件事要考虑:
-
<div class="clickable-item" />
并不表示它是可点击的项目。请参阅:Making a clickable <div> accessible through tab structure?,以了解为什么使用div
并不总是最好的解决方案,而使用button
或a
标签更易于访问。 - 与Anis R.所说的不同,如果要保持基于页面顺序的制表逻辑流,则要在元素上使用
tabindex="0"
。 - 如果必须使用div,请考虑在div上使用
<div class"clickable-item" role="button" />
,以表明它确实是可点击的。
您可以在所需元素上设置tabindex
属性。标签索引号确定元素的访问顺序。
编辑:如FullOnFlatWhite和Graham Ritchie所提到的,通常最好使用制表索引为零(不是正数),或者在div上使用role="button"
。
<div class="list">
<div class="padding">
<div class="clickable-item" tabindex="0">item 1</div>
</div>
<div class="padding">
<div class="clickable-item" tabindex="0">item 2</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。