应优先使用语义化 或 作为导航项；若必须用非可聚焦元素，需添加 tabindex="0" 并监听 Enter/Space；accesskey 仅限核心入口且需视觉提示；横向导航需 JS 拦截方向键并配合 role="menubar" 和 role="menuitem"；务必提供可见焦点样式与 aria-current 等状态属性。

用 tabindex 让导航项可聚焦

默认情况下，@#@#@#@#@#@#@#@#@#@0

避免用常见系统快捷键：别用 accesskey="t"（Chrome 新建标签页）、"s"（保存）、"r"（刷新）

务必配合视觉提示，例如在链接旁加括号标注：@#@#@#@#@#@#@#@#@#@1

注意 Safari 对 accesskey 支持较弱，且不触发 focus，可能需额外 element.focus()

用键盘方向键实现横向导航流切换

仅靠 Tab 键会把焦点顺序和 DOM 顺序强绑定，横向导航常需“左/右键在同级菜单项间切换”，这得靠 JS 拦截 keydown 事件实现。

实操建议：

• 给导航容器加 role="menubar"，每个项加 role="menuitem"，并确保有 tabindex="-1"（初始不可 tab 进入，由 JS 控制焦点流）
• 监听容器的 keydown，对 ArrowLeft/ArrowRight 阻止默认行为，然后用 focus() 移动到相邻项
• 注意循环逻辑：右键到末尾时应回到开头，左键到开头时跳到末尾
• 别忘了处理 Home/End 键，以及 Escape 关闭下拉子菜单（如果存在）

绕不开的可访问性陷阱：焦点管理与视觉反馈

加了快捷键却看不到焦点在哪，等于没加。很多团队只加了 accesskey 或方向键逻辑，但忽略焦点样式重置或隐藏了浏览器默认 outline，导致键盘用户完全迷失。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

实操建议：

• 禁用 outline: none 前，必须提供等效的 outline 或 box-shadow 替代样式，且满足 WCAG 2.1 对对比度（≥3:1）和尺寸要求
• 用 :focus-visible 精准控制：只在键盘操作时显示焦点框，鼠标点击时不出现（避免干扰）
• 如果导航是 JS 渲染的（比如 React 组件），确保首次加载后，DOM 已就绪再绑定键盘事件，否则 querySelectorAll 可能取不到元素
• 移动端 Safari 不触发 accesskey，也不支持 ArrowLeft/Right 导航，这类逻辑需降级为仅桌面端启用

真正难的不是写几行键盘事件，而是让每次焦点移动都有确定的起点、路径和终点，并且不破坏屏幕阅读器的读取顺序。一个没设 aria-current="page" 的当前页导航项，或一个没加 aria-expanded 的下拉开关，都会让快捷键变成“有去无回”的黑洞。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！