原文链接 https://ronghuaxueleng.github.io/2016/08/22/css-%E8%AF%B4%E8%AF%B4-tabindex-%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。
tabindex 属性用于管理键盘焦点，决定元素是否能被选中，以及按下 tab 键过程中被选中的顺序，使用得当能够极大的提高应用的易用性，然而，不恰当地使用时可以键盘用户对应用的可用性。到底如何使用？设置为 0 会有什么效果？设置为 -1 会有什么效果？本文将为你揭晓。
<!--more-->
要理解为什么 tabindex 属性对可用性有如此大的影响，有必要知道一些键盘交互的方式。键盘用户通常会使用 tab 键将光标从一个可获取焦点的元素有序地移动到下一个元素。
像链接和 form 表单元素默认都是可获取焦点的，他们的默认焦点顺序取决于他们在源代码中出现的顺序。
<label for="username">Username:</label>
<input type="text" id="username">
<label for="password">Password:</label>
<input type="password" id="password">
<input type="submit" value="Log in">
按下 tab 键时将依次选中用户名输入框、密码输入框和登录按钮，这三个元素默认就是可获取焦点的，并且焦点顺序与其在源码中的顺序一致。也就是说，对此并不需要显示设置 tabindex 属性，浏览器将有效地处理它们。
tabindex=0
当 tabindex 设置为 0 时，元素的 tab 键序与其在源码中的顺序一致。默认情况下，如果元素本身是可获取焦点的就没有必要设置 tabindex 属性。但，如果你想让一个不能获取焦点的元素，比如 <span> 或 <div>，也被包含在 tab 键序列表中，那么设置 tabindex = 0 就可以使这些元素按其在源码中的顺序出现在 tab 键序中。
值得一提的是，那些可获取焦点的元素使用起来比较方便，例如，当你使用 <button> 或 <input type="checkbox">，键盘焦点和交互由浏览器自动处理。当你使用其他元素来构建自定义组件时，你需要人为地提供键盘焦点和交互支持。
tabindex=-1
当 tabindex 被设置为像 -1 一样的负数时，该元素就变成可由代码获取焦点，但其本身并不在 tab 键序列表中。也就是说，在按下 tab 键时，该元素不能获取到焦点，但是可以通过代码来获取到焦点。
请看下面例子，表单返回错误汇总信息时，将通过代码使其获取到焦点，并将其放置在表单的顶部，这样屏幕阅读器或屏幕放大器用户就能得到提示，以便他们能够纠正错误，同时对于键盘用户，这个元素并不会出现在 tab 键序中。
<div role="group" id="errorSummary" aria-labelledby="errorSummaryHeading" tabindex="-1">
<h2 id="errorSummaryHeading">Your information contains three errors</h2>
<ul>
...
</ul>
</div>
tabindex=1+
当 tabindex 设置为一个正数时，情况就复杂了。它可以使一个元素不按页面顺序来获取焦点。
<label for="username">Username:</label>
<input type="text" id="username" tabindex="3">
<label for="password">Password:</label>
<input type="password" id="password" tabindex="1">
<input type="submit" value="Log in" tabindex="2">
在上面例子中，视觉预期的 tab 顺序是：用户名输入框，密码输入框，最后是登陆按钮。然而，这里设置的 tabindex 属性，将使其变得不可预期，焦点移动顺序分别是：密码输入框，登陆按钮，最后才是用户名输入框。
当你意识到密码输入框是表单中第一个能获取到焦点的元素时，事情也许已经变糟。不管在密码输入框之前有多少个可获取焦点的元素，tabindex=1 就意味着它将是页面上第一个可获得焦点的元素，而与视觉样式和源码顺序无关。
总结
tabindex 属性很常用，它可以改善或破坏键盘用户对页面的可用性。使用该属性时，请谨记：
tabindex=0可以使一个元素按自然顺序出现在 tab 键序中，同时，尽量使用默认可获取焦点的元素。tabindex=-1可以使一个元素可由代码获取到焦点，但其本身并不在 tab 键序中。- 避免设置
tabindex=1+。