https://www.cnblogs.com/yilian/archive/2011/05/23/aria.html https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex

正常情况下，只有a链接（要有href属性）和form元素可以被键盘访问，比如使用tab键来进行focus
如果我们想要除a链接和form元素也可以被键盘访问，则可以使用tabindex属性
tabindex有三个值：0，-1，X（X=1~32767）

  • tabindex=0：该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。
  • tabindex=-1：该元素用tab键获取不到焦点，但是可以通过js获取，这样就便于我们通过js设置上下左右键的响应事件来focus，在widget内部可以用到。
  • tabindex>=1：该元素可以用tab键获取焦点，而且优先级大于tabindex=0；不过在tabindex>=1时，数字越小，越先定位到

在IE中，tabindex范围在1到32767之间（包括32767）
在FF， Chrome无限制，不过一旦超出32768，顺序跟tabindex=0时一样。

测试

  1. <div tabindex="0">1</div>
  2. <div tabindex="1">2</div>
  3. <div tabindex="2">3</div>

实际效果：
image.png
刷新浏览器，让浏览器不聚焦，直接使用键盘的tab键，顺序是：
2-3-1
如果刷新浏览器后，先鼠标进入浏览器点一下，再使用tab键，则先定位1，然后2和3都没有focus