HTML5在原有HTML规范的基础上，新增和优化了多个用于提升键盘导航体验的属性与规范，让开发者可以更便捷地实现符合无障碍访问要求的键盘操作逻辑，覆盖常规交互、快捷操作等多个场景。
HTML5增强键盘导航的核心属性
tabindex属性
tabindex是控制元素是否可被Tab键聚焦以及聚焦顺序的核心属性，HTML5对其行为做了更明确的规范。默认情况下，只有表单元素、链接等交互元素可被Tab键聚焦，普通元素如<div>、<span>默认不可聚焦。
tabindex的取值分为三类：
- 负值：元素可被聚焦，但不会出现在Tab键的导航顺序中，常用于需要自定义聚焦逻辑的场景
- 0：元素可被聚焦，且会按照元素在文档中的出现顺序加入Tab导航序列
- 正整数：元素会被加入Tab导航序列，数值越小的元素越先被聚焦，相同数值则按文档顺序排序
下面是一个设置tabindex的示例：
<!-- 普通div默认不可被Tab聚焦，设置tabindex=0后可以被聚焦 --> <div tabindex="0" class="custom-btn">自定义按钮</div> <!-- 设置tabindex=-1，可通过JS调用focus()方法聚焦，但不会出现在Tab序列中 --> <div tabindex="-1" id="hidden-focus">隐藏聚焦元素</div> <!-- 设置tabindex=1，会优先于其他默认Tab序列元素被聚焦 --> <button tabindex="1">优先聚焦按钮</button>
accesskey属性
accesskey用于为元素设置快捷键，用户按下对应的组合键即可快速聚焦或触发该元素的默认行为，不同操作系统的组合键规则不同，通常是Alt+快捷键（Windows）、Ctrl+Option+快捷键（Mac）。
该属性适用于高频操作的按钮、链接等元素，示例代码如下：
<!-- 设置accesskey为s，按下Alt+s即可快速聚焦搜索框 --> <input type="text" accesskey="s" placeholder="搜索内容" /> <!-- 设置accesskey为h，按下对应组合键可快速跳转首页 --> <a href="/index.html" accesskey="h">首页</a>
配合ARIA规范完善键盘导航
HTML5本身的无障碍相关属性有限，通常需要配合WAI-ARIA规范来补充键盘导航的语义信息，让屏幕阅读器等辅助工具能正确识别元素的角色和状态。
常用的ARIA属性包括：
role：定义元素的角色，比如role="button"表示当前元素是一个按钮，键盘用户按下Enter或Space键时会触发点击事件aria-label：为元素提供可访问的名称，当元素没有可见文本时，辅助工具会读取该属性内容aria-hidden：标记元素对辅助技术不可见，避免干扰键盘导航顺序
结合ARIA的键盘导航示例：
<!-- 自定义按钮配合ARIA属性，让辅助工具识别为按钮，支持Enter/Space触发 -->
<div
tabindex="0"
role="button"
aria-label="提交表单"
onclick="submitForm()"
onkeydown="if(event.key === 'Enter' || event.key === ' ') { submitForm(); event.preventDefault(); }"
>
提交
</div>
键盘导航的注意事项
在使用HTML5属性增强键盘导航时，需要注意以下几点：
- 不要滥用正整数的tabindex，避免打乱默认的文档流导航顺序，除非有明确的业务需求
- accesskey的快捷键要避免和系统、浏览器的默认快捷键冲突，建议选择不常用的字母
- 所有可交互元素都需要有明确的聚焦状态样式，通过
:focus伪类设置，让用户知道当前聚焦位置 - 自定义组件需要补充对应的键盘事件逻辑，比如菜单组件需要支持方向键切换选项
聚焦样式的设置示例：
/* 为所有可聚焦元素设置明显的聚焦样式 */
[tabindex]:focus,
button:focus,
input:focus,
a:focus {
outline: 2px solid #0056b3;
outline-offset: 2px;
}
常见场景实现示例
下面是一个支持键盘导航的横向菜单实现，支持Tab键聚焦、左右方向键切换选项：
<nav class="menu" aria-label="主导航">
<ul role="menubar">
<li role="none">
<a href="/home" role="menuitem" tabindex="0">首页</a>
</li>
<li role="none">
<a href="/product" role="menuitem" tabindex="-1">产品</a>
</li>
<li role="none">
<a href="/about" role="menuitem" tabindex="-1">关于我们</a>
</li>
</ul>
</nav>
<script>
const menuItems = document.querySelectorAll('[role="menuitem"]');
menuItems.forEach((item, index) => {
item.addEventListener('keydown', (e) => {
let targetIndex = -1;
if (e.key === 'ArrowRight') {
targetIndex = (index + 1) % menuItems.length;
} else if (e.key === 'ArrowLeft') {
targetIndex = (index - 1 + menuItems.length) % menuItems.length;
}
if (targetIndex !== -1) {
menuItems[targetIndex].tabIndex = 0;
menuItems[index].tabIndex = -1;
menuItems[targetIndex].focus();
e.preventDefault();
}
});
});
</script>