tabIndex-bootstrap中Get到的

网页键盘的无障碍访问性

其实加了这个，可以控制Tab键切换的顺序，聚焦等

这个属性，任何标签都可以添加，没有兼容性限制，属性值的范围：0-32767

当一个元素设置tabindex属性值为-1的时候，元素会变得focusable，所谓focusable指的是元素可以被鼠标或者JS focus，在Chrome浏览器下表现为会有outline发光效果，IE浏览器下是虚框，同时能够响应focus事件。但是，却不能被键盘focus。

这种鼠标可以focus，但是键盘却不能focus的状态，只要tabindex属性值为负值，因此，tabindex="-2"和tabindex="-1"没有任何本质区别，既然如此，那就没有必要冒险在玩类似tabindex="-2"的新花样，万一哪天浏览器认为这种用法是不合法的呢？在JavaScript中，字符串和数组都有indexOf方法，当无法匹配的时候返回的值就是-1，对吧，足够了，并没有-2之类的返回值，和tabindex的路数其实是一致的。

tabIndex=0和tabIndex=1 是1最先被聚焦（focus），tabindex属性的键盘索引顺序其实是从数值1开始的，不是0，1索引顺序是最靠前的。也就是说哪怕你在页面的最底部、文档流的最后一个元素设置了tabindex="1"，当按下Tab键的时候，首先focus就是这最后一个元素。

元素设置tabindex="-1"，鼠标和JS可以focus，但键盘不能focus；tabindex="0"和tabindex="-1"的唯一区别就是键盘也能focus，索引的顺序没有任何的变化。或者你可以这么理解，<div>设置了tabindex="0"，从键盘访问的角度来讲，相对于<div>元素变成了<button>元素。

因此，实际上，我们是可以使用<div>或者<span>元素模拟按钮的，但是千万不能忘记设置tabindex属性，如下示意：

<div class="button" tabindex="0" role="button">按钮</div>  既然要用DIV模拟按钮，就应该加这个，让用户无障碍访问

Question1:
　　tabIndex值被设置为一样的？ 此时，focus顺序是根据DOM元素在文档中的位置决定的，越靠前越外层的元素索引顺序更高,也就最后越后被focus

场景一：hover <div>显示下拉键盘支持

这是网页中非常常见的一种交互，当我们内容比较静态的时候，常常直接使用CSS :hover伪类实现内容的显隐效果，通常，我们都会使用一个大大的<div>元素包在外面，从功能上讲，似乎满足了我们的需求，但实际上，对键盘以及其它辅助设备的访问却不友好，因为默认隐藏的下拉内容只能通过鼠标操作显示，键盘永远显示不出来，自然屏幕阅读器等辅助设备也不能读取，此时，就轮到tabindex属性来提高我们站点的可访问性了。就是给<div>加一个tabindex="0"，对吧，小手一抖，体验就有，皆大欢喜，何乐不为！然后再加个:focus伪类显示下拉内容就好了！都是举手之劳的事情。

场景二：对网站模块进行自定义的键盘支持

设置tabindex="-1"然后使用JS进行focus  

div.setAttribute('tabindex', '-1');
div.focus();

由于设置了tabindex="-1"的元素鼠标点击可以focus并outline轮廓显示，因此，这里的tabindex="-1"并不是默认就有，而是按下对应的快捷键后临时动态添加的。

场景三：临时改变页面索引起始位置

当我们点击按钮并显示一个弹框的时候，Tab键的索引起始位置应该是从弹框元素开始的，但是如果我们不做任何处理，索引起始位置还是弹框背后的页面，此时想要通过Tab键一个一个索引到弹框元素，估计天都已经黑了，很显然，为了达到完美的键盘交互体验，我们就需要额外做点事情。bootstrap中的模态框就采用了这个，加了tabIndex，出现的弹窗，可以用ESC按钮关闭弹窗，友好

1. 给弹框容器元素设置tabindex="-1"；
2. 弹框显示的时候容器元素DOM.focus()使其获取焦点；
3. 容器元素CSS设置outline:none；