使用 role="menuitem" 构建可键盘导航的菜单列表项时，需要结合 ARIA（Accessible Rich Internet Applications）标准和 HTML、CSS、JavaScript 来实现无障碍和键盘导航功能。以下是一个基本的实现思路和示例代码：✅ 1. HTML 结构

• 时间：2026-05-19 23:18:28 191浏览 收藏

• tabindex="0" 让容器可被 Tab 键聚焦（第一次进入菜单）
• tabindex="-1" 允许 JS 用 .focus() 控制焦点，但阻止自然 Tab 流
• 所有 menuitem 初始状态必须只有一个有 tabindex="0"（通常是第一个），其余为 -1；焦点切换时动态更新

必须手写方向键焦点管理逻辑

浏览器不会帮你做上下切换。你需要监听容器的 keydown，识别方向键后计算下一个索引，并调用 .focus()：

const menu = document.querySelector('[role="menu"]');
const items = menu.querySelectorAll('[role="menuitem"]');
<p>menu.addEventListener('keydown', (e) => {
const currentIndex = Array.from(items).indexOf(document.activeElement);
let nextIndex;</p><p>if (e.key === 'ArrowDown') {
nextIndex = (currentIndex + 1) % items.length;
} else if (e.key === 'ArrowUp') {
nextIndex = (currentIndex - 1 + items.length) % items.length;
} else if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
document.activeElement.click(); // 触发点击逻辑
return;
} else {
return;
}</p><p>items[nextIndex].focus();
});</p>

关键点：

• 用 Array.from(items) 转换 NodeList，避免 indexOf 失效
• 模运算（% items.length）实现循环切换
• e.preventDefault() 阻止空格键滚动页面
• 不要依赖 click() 模拟——确保每个 menuitem 有真实的 click 事件监听器

容易被忽略的可访问性细节

很多实现漏掉这几点，导致屏幕阅读器体验断裂或键盘用户迷失：

• 菜单展开/收起时，需用 aria-expanded="true/false" 同步更新（如果它是下拉菜单的一部分）
• 若菜单项含子菜单（role="menuitempopup"），必须用 aria-haspopup="menu" 和 aria-controls 关联
• 焦点进入菜单后，应禁用页面其他可聚焦元素（用 inert 或 aria-hidden 配合管理）
• ESC 键必须关闭菜单并把焦点移回触发按钮（如果有的话）
• 移动端 Safari 对 role="menu" 支持弱，建议 fallback 到原生 <select> 或简化交互

最常被跳过的其实是焦点返回逻辑：用户按 ESC 退出菜单后，焦点没回到原来的位置，等于切断了键盘流。这个细节一漏，整个菜单就变成「进得去、出不来」的陷阱。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~