使用 tabindex 改变Tab 键顺序

使用 tabindex原文 https://developers.google.cn/web/fundamentals/accessibility/focus/using-tabindex

在表单上使用该特性可提供体验。
Tab 键顺序将以大于 0 的最小值为起点，从小到大排序

    <h1 id="h" tabindex="0">hello2</h1>
    <button tabindex="2">第1个 btn</button>
    <button tabindex="3">第2个 btn</button>
    <button tabindex="-1">第3个 btn -1 从自然 Tab 键顺序中移除某个元素</button>
    <button tabindex="1" onClick="h.focus()">第4个 btn</button>

对焦点进行样式化 https://developers.google.cn/web/fundamentals/accessibility/accessible-styles

但是这样使用鼠标也会触发 :focus样式， 在 Firefox 中，您可以利用 :-moz-focusring CSS 伪类编写一个仅在通过键盘操作使元素具有焦点时应用的焦点样式
而且还是有bug

<style>
    :focus {
      background: #f48;
    }
</style>

转载于:https://www.cnblogs.com/ajanuw/p/8376968.html