HTML 使用 tabindex 控制 Tab 键按键顺序

HTML About 653 words

格式

number从1开始。

<element tabindex="number">

防止 Tab 键选中

将tabindex设置为-1将不会被Tab键选中。

可配合aria-hidden="true"不暴露给辅助阅读。

<a href="" tabindex="-1">链接三</a>

完整案例

Tab键按键顺序如下：

链接二
链接一
链接四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <a href="" tabindex="2">链接一</a>
</p>
<p>
    <a href="" tabindex="1">链接二</a>
</p>
<p>
    <a href="" tabindex="-1">链接三</a>
</p>
<p>
    <a href="" tabindex="3">链接四</a>
</p>
</body>
</html>

Views: 1,298 · Posted: 2022-09-08

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓