[译] 如何使用 HTML tabindex 属性

原文连接：How and when to use the tabindex attribute，by Ire Aderinokun（有删改）

tabindex 属性控制两件事情：

1. 元素是否能聚焦：经过键盘这类输入设备，或者经过 JS focus() 方法
2. 元素何时能聚焦：在用户经过键盘与页面交互时

聚焦顺序

HTML 默认有 6 个元素支持聚焦：

• 带 href 属性的 <a> 标签
• 带 href 属性的 <link> 标签
• <button>
• <input>（排除 type="hidden"）
• <select>
• <textarea>

这些元素默认都能使用键盘 Tab 键，以及 JS focus 方法聚焦。

document.querySelector("a").focus();
复制代码

试图非可聚焦元素上聚焦，不会起做用。

document.querySelector("div").focus(); // Will not work
复制代码

在使用 Tab 键聚焦元素时，聚焦顺序等于元素在源码文件中的出现顺序。 尽管默认行为涵盖了咱们所需的大多数交互需求。但在某些状况下，咱们可能有移除、添加聚焦，或者从新安排项目聚焦顺序的须要，这个时候就要 tabindex 来帮忙了。

如何使用 tabindex

tabindex 能够用在几乎全部的元素上，无论默认这些元素时候支持聚焦。tabindex 属性值必须是一个有效的整数——负值、0 和正值。

tabindex 负值

使用 tabindex 负值（好比 tabindex="-1"）的元素，就不能使用 Tab 键聚焦了。

<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<button type="button" tabindex="-1">I won’t be in focus :(</button>
<button type="button">I’ll be in focus last</button>
复制代码

效果：

负值取 -1 取 -9999 没有区别，但为了可读性和一致性考虑，仍是推荐一直使用 -1。

tabindex="0"

使用 tabindex="0" 的元素会插入到默认的聚焦顺序之中，聚焦顺序与在源码中出现的顺序有关。tabindex="0" 一般应用在不可聚焦的元素上，这些元素使用它以后，就好像本来就是可聚焦的同样。

<button type="button">Click me to start, then press the "tab" key</button>
<button type="button">I’ll be in focus first</button>
<div tabindex="0">I’m a DIV and will be in focus second</div>
<button type="button">I’ll be in focus last</button>
复制代码

效果：

tabindex 正值

使用 tabindex 正值的元素的聚焦位置会放在没有设置 tabindex 属性的元素前面，并且聚焦顺序是从小大到的（好比下面的两个，聚焦顺序就是 tabindex="1" -> tabindex="500"）

<button type="button" tabindex="1">I’m the first focusable item on the page</button>
<button type="button" tabindex="500">I’m the second</button>
复制代码

效果：

tabindex 与 JS 编程聚焦

使用了 tabindex 属性的元素均可以 JS 编程聚焦。咱们以使用了 tabindex 负值的 <div> 为例：

<div tabindex="-1">I'm a div</div>
复制代码

若是使用 Tab 键尝试访问，发现并不行。

但咱们可使用 focus() 方法聚焦元素。

<button type="button" onclick="document.getElementById('demo-div').focus();">
        Click me to focus the DIV
</button>
<div id="demo-div" tabindex="-1">I'm a div</div>
复制代码

效果：

什么时候使用 tabindex

tabindex 属性可能很是有用，但若是使用不正确，可能会形成破坏性后果。 下面给出了不一样 tabindex  值类型的使用场景。

什么时候使用 tabindex="-1"

前面已经介绍，tabindex 负值将把元素从焦点序列中删除，但可使用编程的方式对元素作聚焦。

模态框就是一个很好的说明例子。模态容器一般是不可聚焦的元素，像 <div> 或 <section> 这些元素，当模式窗口打开时，咱们会将焦点移到该窗口，以便屏幕阅读器读其内容。可是，咱们又不但愿模式容器接受 Tab 聚焦。这时就可使用一个 tabindex 负值来实现。

<div id="modal" tabindex="-1">
    <!-- Modal content -->
</div>

<script> function openModal() { document.getElementById("modal").focus(); // Other stuff to show modal } </script>
复制代码

什么时候使用 tabindex="0"

tabindex="0"  一般用来为不可聚焦元素添加可聚焦属性。

一个比较好的用例就是在使用自定义元素的时候。好比，咱们在建立一个自定义按钮元素，因为它不是 <button>，所以默认它是没法聚焦的。咱们可使用 tabindex 属性为它添加聚焦功能，就能像常规按钮同样会被安排焦点顺序了。

<my-custom-button tabindex="0">Click me!</my-custom-button>
复制代码

什么时候使用 tabindex 正值

几乎找不出使用 tabindex 正值的理由，实际上它被认为是反模式（anti-pattern）。若是发现须要使用正值来修改元素的聚焦顺序，那么你实际须要作的多是要修改 HTML 元素的源码顺序了。

（正文完）

---

广告时间（长期有效）

我有一位好朋友开了一间猫舍，在此帮她宣传一下。如今猫舍里养的都是布偶猫。若是你也是个爱猫人士而且有须要的话，不妨扫一扫她的【闲鱼】二维码。不买也没关系，看看也行。

（完）