阅读 436

[译] 如何使用 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>
复制代码

效果:

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

(正文完)


广告时间(长期有效)

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

(完)