[译] 如何使用 HTML tabindex 属性

zhangbao90s
4,139 阅读4分钟

原文链接：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>

效果：

GIF.gif

负值取 -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>

效果：

GIF.gif

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>

效果：

GIF.gif

tabindex 与 JS 编程聚焦

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

<div tabindex="-1">I'm a div</div>

如果使用 Tab 键尝试访问，发现并不行。

GIF.gif

但我们可以使用 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>

效果：

GIF.gif

何时使用 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 元素的源码顺序了。

（正文完）

广告时间（长期有效）

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

（完）

avatar
文章
阅读
粉丝