使用 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>