HTML | tabindex 属性介绍

简介

HTML tabindex 属性指定了元素在 tab 键顺序中的位置。通俗地说，当用户按下 tab 键时会控制浏览器焦点的转移，转移的过程称为 tab 键切换。而 tabindex 则确定哪些元素可以被选中并进行 tab 键切换。

语法

<tagname tabindex="x">

其中，tagname 表示 HTML 元素标签名称，而 x 则表示在 tabindex 序列中元素的位置。如果 tabindex 被省略，那么该元素将不会被包含在 tabindex 序列中。

值

• tabindex="1"：表示在 tabindex 序列中该元素是第一个，依此类推，该值可以是正整数。
• tabindex="0"：表示元素位于 tabindex 序列中，但它的顺序由浏览器自动决定，通常是按照元素在 HTML 代码中的出现顺序。
• tabindex="-1"：表示元素不参与 tabindex 序列，但可以通过程序 focus() 方法聚焦。

注意事项

• 制定 tab 键顺序时，应该优先考虑页面结构，而不是按照视觉展示顺序。
• 设置 tabindex 序列时，应该遵循自然顺序。例如，应该先创建主要导航菜单项和内容区域，而不是先创建小的图片和广告横幅。
• tabindex 序列中重复的值不被建议，因为不同浏览器对于值相同的元素的处理方式可能不同。
• 如果 tabindex 属性被赋予非法值（比如空字符串或负整数），则元素将被排除在 tabindex 序列之外。

示例代码

以下示例展示了如何设置 tabindex 属性：

上一篇文章<a href="#" tabindex="3" accesskey="u">↑</a>
主要内容区域<div tabindex="1">
    <p>好文章</p>
    <p>更多精彩内容</p>
</div>
页脚导航<a href="#" tabindex="2">关于我们</a>

结论

通过设置 tabindex 属性，开发者可以控制元素在 tab 键切换时的顺序和优先级，提高网站的可访问性。同时，在编写代码时应该遵循自然顺序，结构清晰且易于理解。