首先要告诉大家的是tabindex并不是一个新属性（或者说新特性），但了解tabindex的真正作用或者说正确使用的人还是不多。最近在项目中就碰到一个问题，在部分安卓机上显式给div元素设置了tabindex='-8'这样的值，结果开启“旁白”的设备无法获得所需要的焦点。这到底是什么呢？我也一脸蒙逼，因为在我的理解范围中，tabindex的使用只有不显式设置值、显式设置其值为0、显式设置其值为负正整数或者显式设置其值为正整数。那么问题来了，如果要增强Web的可访问性，我们在实际的操作中应该怎么来设置（或者说正确使用）HTML的tabindex属性。今天和大家一起聊聊tabindex，如果感兴趣的话，请继续往下阅读。

tabindex是什么

从字面上来讲，tabindex就是一个组合词，其拆分出来就是tab和index，其中tab指的是键盘上的tab键（如果是Mac电脑的是➜|键），而index就相当于JavaScript数组中的每个项的索引号。

简单形象的描述即是：

tabindex是用户操作tab（➜|）的顺序，同时在操作该键所获得的元素。

你可以先体验一下，打开任意一个Web页面或者Web应用程序（比如小站），然后一直按tab键，你可以看到今次获得焦点的元素，如下图所示：

如果从专业的角度来描述的话，tabindex是HTML的一个全局属性，所谓的全局属性是指：

HTML标签元素都可以用的属性，比如说id、class等属性都是HTML的全局属性。

而且tabindex属性是一个与键盘访问行为息息相关的属性，或者说是用户体验息息相关的属性。平常我们可能感觉不到它的价值，但是一旦你的鼠标坏了或者说只能通过键盘来操作；或者说面对其他的使用场景，比如说电视机、投影仪上访问Web页面或Web应用程序时（这种场景下只能使用遥控器），那么tabindex的作用就立杆见影了。另外就是喜欢使用快捷键的同学，tabindex的优势也能显现出来。

也就是说，tabindex属性是用于管理键盘焦点，决定元素是否能被选中，以及按下tab键过程中被选中的顺序，使用得当能够极大的提高Web页面或应用程序的易用性。如果应用不好（不恰当地使用时）会直接影响键盘用户对应用的可用性。要想更好的理解tabindex属性对应用的操作性是否有利还是不利，就很有必要了解一下焦点管理相关的知识。

Web中的焦点

既然tabindex是用来管理Web中元素的焦点，那么我们就有必要先了解一些关于焦点（聚焦）相关的知识点。

焦点是什么

对于依赖于焦点注意力的人来说，焦点决定了元素选中与否的区别，犹如决定白天和晚上的区别。如果是在Web中，焦点是指页面上交互元素之间发生的事情。这里所指的交互元素是指像<a>（链接元素）、button（按钮元素）和表单控件等元素。并且在Web页面或Web应用程序中，焦点决定在任何给定时刻页面中键盘事件的去向。例如，如果你在聚焦某休文本输入框（input）后开始键入内容，该输入字段将接收键盘事件并显示你键入的字符。它获得焦点期间，还会接收来自剪貼板的粘贴输入。

在Web页面或应用程序中，可获得焦点的元素有很多，详细的清单可以查看Focusable Elements，相关的测试用例可以查看What Elements Are Focusable?。

在一个Web页面或Web应用程序中，在任何给定的时间都有一个元素具有焦点。当前聚焦项通用使用聚焦环（outline样式）标示出来，对于该样式取决于浏览器，也取决一起CSSer给可聚焦元素定义的样式。如下图所示：

刚才提到过，在Web页面或应用程序中，任何给定的时间都有一个元素可以获得焦点。如果页面刚加载，这个焦点可能是document，但是一旦你开始点击页面或按下键盘的tab键，这个焦点元素可能是前面提到的交互元素之一（也就是Focusable Elements的某一个）。除此之外，也可以通过document.activeElement找到当前获得焦点的元素。

另外，我们无法确定自己产品的用户群体都可以正常的操作鼠标（或者说鼠标属于正常可操作的情况）。换句话说，一些用户几乎是依赖于键盘或其他输入设备来操作计算机（和你的产品做有效的交互操作），甚至有些高级用户习惯了键盘的操作。对于这些用户群体而言，焦点就显得尤其重要，因为这是他们到达所有屏幕元素的主要途径（好比天黑回家，总是喜欢有路灯能照亮回的的路）。因此，Web AIM提供了一份检查清单，所有页面功能应该都能使用键盘来操作。

什么是可聚焦的

在Focusable Elements列出了Web页面或应用程序中可获得焦点的元素。表格清单中的元素都是属于具备内置的交互式HTML元素，也称得上是隐式可聚焦元素。同样意味着，它们是自动插入到tab键顺序中，并且内置了键盘事件处理，不需要开发者进行人为的干预。

言外之意，除了Focusable Elements所列清单元素之外的Web元素不属于不可聚焦元素。对于这些元素而言，用户操作tab键是无法获得焦点。因此用户也就无法和这些元素进行交互，特别是对于有障碍的人士。

焦点对谁有益

对于默认可获得焦点的元素在聚焦时样式上有别于不能聚焦的元素（一般是指:focus状态下outline默认样式），这样做的好处是可以帮助用户确定目前可交互的元素在页面上的位置。它们显示当前正在填充哪个表单字段，或者将要按下哪个按钮，如果是移动端上的话，告诉用户正在读哪个元素。

在PC端上，可能很多用户是使用鼠标，可以通过光标来指定所需要的元素（确定知道要操作元素位置），但并不是每个人都能用鼠标来操作（在移动端甚至是没有鼠标可操作）。

不能使用鼠标的用户并不仅仅是指有障碍性的用户（也就是大家所说的残疾人士），也有可能是你可能正在做别的事情，影响你正常操作鼠标（比如你正抱着婴儿在操作）。

不过，受益的不只是键盘用户。对于那些注意力持续时间有限或有短期记忆问题的人，焦点提示光环（outline对应的样式）是有用的。

该不该删除元素聚焦样式

虽然聚焦样式对于部分用户群体是有益的，但这个样式效果并不是每个人都喜欢，有些人会觉得它们的样式（UI风格）很丑。也因为这个原因，很多开发者会选择删除元素聚焦样式，这样一刀切的做法对于键盘用户来说是有害的，这就是好比，开发者删除了鼠标光标对鼠标用户一样有害。

所以我们不应该像下面这样做，这样会删除浏览器的默认的outline（聚焦元素的光环效果）：

:focus {
    outline: none; /* 请不要这样做，这是不友好的一种做法 */
}

即使用box-shadow来模拟一outline的光环效果，也最好将outline的颜色设置为transparent，因为box-shadow在高对比度模式下表现不好。

如果你想满足设计的需求，让聚焦元素光环效果能适合自己的主题风格，可以通过CSS来完成。不过对于不同元素的:focus可以设置不同的效果。比如a、input或button等，可以在:focus下指定对应的样式。另外，我们还可以借助一些伪类选择器提供更适合场景的样式，比如:focus-visible、:focus-within或者伪元素::before/::after。

有关于聚焦元素的焦点光环更多的介绍还可以参阅下面这些教程：

• Keyboard-Only Focus Styles
• Just use :focus styles, damnit
• Why you should use focus styles
• If it’s interactive, it needs a focus style
• Avoid Default Browser Focus Styles
• 可访问的样式