应优先使用语义化 或 作为导航项；若必须用非可聚焦元素，需添加 tabindex="0" 并监听 Enter/Space；accesskey 仅限核心入口且需视觉提示；横向导航需 JS 拦截方向键并配合 role="menubar" 和 role="menuitem"；务必提供可见焦点样式与 aria-current 等状态属性。
用 tabindex 让导航项可聚焦
默认情况下，<a></a> 链接天然支持 Tab 键跳转，但如果你的横向导航用了 <div>、<code><span></span> 或带 role="navigation" 的容器包裹非链接元素（比如用 JS 控制的菜单项），它们就不会被键盘访问。关键不是“加快捷键”，而是先让元素能被聚焦。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用语义化
<a href></a>或<button></button>作为导航项，避免用<div onclick> <li>若必须用非可聚焦元素（如 <code><span></span>），需手动添加tabindex="0"，并监听Enter和Space事件触发跳转 - 不要用
tabindex="-1"除非你明确只用 JS 聚焦（比如下拉菜单展开后自动聚焦第一项） - 只给核心入口设
accesskey，比如首页：<a href="/" accesskey="1">首页</a> - 避免用常见系统快捷键：别用
accesskey="t"（Chrome 新建标签页）、"s"（保存）、"r"（刷新） - 务必配合视觉提示，例如在链接旁加括号标注：
<a href="/about" accesskey="a">关于<span aria-hidden="true"> (Alt+A)</span></a> - 注意 Safari 对
accesskey支持较弱，且不触发 focus，可能需额外element.focus() - 给导航容器加
role="menubar"，每个项加role="menuitem"，并确保有tabindex="-1"（初始不可 tab 进入，由 JS 控制焦点流） - 监听容器的
keydown，对ArrowLeft/ArrowRight阻止默认行为，然后用focus()移动到相邻项 - 注意循环逻辑：右键到末尾时应回到开头，左键到开头时跳到末尾
- 别忘了处理
Home/End键，以及Escape关闭下拉子菜单（如果存在） - 禁用
outline: none前，必须提供等效的outline或box-shadow替代样式，且满足 WCAG 2.1 对对比度（≥3:1）和尺寸要求 - 用
:focus-visible精准控制：只在键盘操作时显示焦点框，鼠标点击时不出现（避免干扰） - 如果导航是 JS 渲染的（比如 React 组件），确保首次加载后，DOM 已就绪再绑定键盘事件，否则
querySelectorAll可能取不到元素 - 移动端 Safari 不触发
accesskey，也不支持ArrowLeft/Right导航，这类逻辑需降级为仅桌面端启用
用 accesskey 实现字母级快捷跳转
accesskey 是原生 HTML 属性，能让用户按 Alt+字母（Windows/Linux）或 Ctrl+Option+字母（macOS）直接跳到对应元素。但它有明显限制，不建议给所有导航项都配 —— 容易冲突、难记忆、屏幕阅读器支持不稳定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
用键盘方向键实现横向导航流切换
仅靠 Tab 键会把焦点顺序和 DOM 顺序强绑定，横向导航常需“左/右键在同级菜单项间切换”，这得靠 JS 拦截 keydown 事件实现。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
立即学习“前端免费学习笔记（深入）”；
绕不开的可访问性陷阱：焦点管理与视觉反馈
加了快捷键却看不到焦点在哪，等于没加。很多团队只加了 accesskey 或方向键逻辑，但忽略焦点样式重置或隐藏了浏览器默认 outline，导致键盘用户完全迷失。
实操建议：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写几行键盘事件，而是让每次焦点移动都有确定的起点、路径和终点，并且不破坏屏幕阅读器的读取顺序。一个没设 aria-current="page" 的当前页导航项，或一个没加 aria-expanded 的下拉开关，都会让快捷键变成“有去无回”的黑洞。
