Question

我想知道是否有替代tabindex的CSS。

<button tabindex="1">ONE</button>
<button tabindex="3">TWO</button>
<button tabindex="2">THREE</button>

备选nav-index已被删除。

以下功能存在风险，可能会在CR期间被删除：

定向焦点导航：向上导航，导航向右，导航向下，向左导航属性。

Answer 1

页面上项目的顺序是确定标签索引顺序的唯一方法。这是我多年前做的事情，当时我不得不支持网站的非JavaScript版本。你可以用css做什么然后在视觉上重新定位项目，现在你有使用flex和order的优势。

<style type="text/css">
.myFlexWrapper{
   display:flex; 
   /* I advise using sass and autoprefixer to poly fill all the other browsers*/
}

.myFlexWrapper button:nth-child(1){
  order:30; /* will display this button visually last but retain the tabindex as 1 because it's the first item.*/
}
.myFlexWrapper button:nth-child(2){
  order:10;/* will display this button visually first but retain the tabindex as 2 because it's the second item.*/
}
.myFlexWrapper button:nth-child(3){
  order:20;/* will display this button visually second but retain the tabindex as 3 because it's the third item.*/
}
</style>

<div class="myFlexWrapper">
   <button>ONE</button>
   <button>TWO</button>
   <button>THREE</button>
</div>

Answer 2

我们可以通过遵循CSS来简单地防止tab事件：

按钮：焦点{ 显示：无 }

这将防止按钮上的Tab事件

CSS替代tabindex

2 个答案: