logo 有点东西

web中的tabindex

最近在看cocos creator，在网易云课堂刷到一个《Cocos Creator [零基础]入门教程》。其中制作者看到了tabindex属性并表示不知道是干啥用的，那这次就来说说tabindex属性

tabindex的作用

访问者可以通过键盘的Tab键切换网页中可交互元素的焦点，实现特殊群体的无障碍访问或不使用鼠标完成页面间的访问。

比如一个独臂残障用户可能在切换鼠标和键盘间存在困难。如果网站的可访问性好，这位用户仅仅需要操作键盘就能完成整个网站间的访问；又或者台式机用户的鼠标出了故障，通过网页中的tabindex属性，他依然能够很好的通过键盘浏览网站。

下面的demo展示了用户可以在不使用鼠标的情况下，仅通过键盘的Tab + Enter键来实现访问对应网站：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tabindex示例</title>
</head>
<body>
<a href="http://www.baidu.com" tabindex="0">百度</a>
<a href="http://www.sougou.com" tabindex="3">搜狗</a>
<a href="http://www.google.com" tabindex="2">谷歌</a>
</body>
</html>

tabindex的可取值

tabindex有三种类型可选：

  • tabindex小于0

当 tabindex=”-1” 时，当前元素无法通过Tab键切换获取焦点。但仍能通过JS获取到焦点。

  • tabindex等于0

当 tabindx=”0” 时，优先级最高。如果多个元素的tabindex都等于0。则以先入先出的原则切换焦点（越先注册越先被获取到）

  • tabindex大于0

当tabindex > 0时，越小的值越先获取到焦点。

如以下这个Demo，获取的顺序则为：谷歌 -> 必应 -> 搜狗 -> 360（百度因为tabindex=”-1”，所以不会被获取到）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tabindex示例</title>
</head>
<body>
<a href="http://www.baidu.com" tabindex="-1">百度</a>
<a href="http://www.sougou.com" tabindex="3">搜狗</a>
<a href="http://www.google.com" tabindex="1">谷歌</a>
<a href="http://www.360.com" tabindex="4">360</a>
<a href="http://www.bing.com" tabindex="2">必应</a>
</body>
</html>

支持tabindex属性的元素

, ,