web中的tabindex
in 前端 with 0 comment

web中的tabindex

in 前端 with 0 comment

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

tabindex的作用

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

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

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

<!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="-1" 时,当前元素无法通过Tab键切换获取焦点。但仍能通过JS获取到焦点。

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

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

如以下这个Demo,获取的顺序则为:谷歌 -> 必应 -> 搜狗 -> 360(百度因为tabindex="-1",所以不会被获取到)。

<!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属性的元素

<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

参考文档

HTML tabindex 属性
使用tabindex的正确姿势

Comments are closed.