HTML5提升键盘导航体验技巧

必须同步补全 ARIA 语义：

<div tabindex="0" role="button" aria-expanded="false" aria-haspopup="listbox">
  选择城市
</div>

• role="button" 告诉辅助技术这是个按钮
• aria-expanded 动态反映展开状态（JS 中需同步更新）
• aria-haspopup 暗示有子菜单，触发后应把焦点移入列表

漏掉任一属性，键盘用户可能无法理解操作意图，或操作后焦点丢失。

键盘事件监听为什么不能只绑 keydown

很多开发者监听 keydown 处理回车/空格触发点击，但忽略了一个关键问题：某些键盘组合（如 Shift+Tab、Ctrl+Tab）会绕过你的监听，直接由浏览器接管。更严重的是，keydown 会捕获所有按键，包括输入法上屏前的拼音键——导致中文输入被意外中断。

正确做法是：

• 对按钮类交互，优先用 click 事件（它天然兼容空格/回车触发）
• 若必须监听键盘，用 keypress 或 keyup，并检查 event.key 是否为 "Enter" 或 " "（空格）
• 务必加 if (event.isComposing) return 阻止输入法干扰

焦点管理在动态内容中容易被忽略的点

单页应用里，路由切换、弹窗打开、列表筛选后，焦点常常“消失”——用户按 Tab 从上一页残留位置继续走，而不是落到新内容起点。这不是 bug，是没做主动焦点管理。

典型场景和对策：

• 模态框打开：用 element.focus() 聚焦第一个可交互项，同时用 inert 或 aria-hidden="true" 隐藏背景区域（防止焦点逃逸）
• 列表刷新后：如果用户之前聚焦在第 3 条，刷新后第 3 条已不存在，焦点不应卡死，而应回退到列表容器并设 tabindex="-1"，再 .focus()
• SPA 路由跳转：监听 popstate 后，聚焦到 main 区域或 h1，别让用户从顶部重新 tab 十几次

焦点不可见、不可预测，是键盘导航最隐蔽的失败点——它不报错，但会让真实用户彻底卡住。

理论要掌握，实操不能落！以上关于《HTML5提升键盘导航体验技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！