aria-keyshortcuts仅声明快捷键语义,不触发行为;必须作用于可聚焦交互元素(如button、role="button"且tabindex="0"),键名须符合w3c规范(如ctrl+s),并配合keydown监听与视觉提示才能实现完整功能。

aria-keyshortcuts 必须写在可聚焦的交互元素上
它不会在 <div> 或纯文本节点上起作用。屏幕阅读器会读出快捷键,但用户按下去毫无反应——因为元素根本无法获得键盘焦点,也没有激活逻辑。
<p>只对以下元素有效:</p>
<ul>
<li>
<code><button></button>、<input>、<textarea></textarea>
role="button"、role="menuitem" 或 role="tab" 的元素,且必须显式加 tabindex="0"
keydown 触发行为错误示例:<div aria-keyshortcuts="Ctrl+S">保存</div>——语义和行为完全脱节。
键名必须严格符合 W3C Key Names 规范
大小写敏感,修饰键与主键之间只能用 + 连接。空格、逗号、中文符号、别名(如 Cmd)都会导致解析失败或辅助技术不识别。
正确写法:
aria-keyshortcuts="Ctrl+S"aria-keyshortcuts="Alt+F4"-
aria-keyshortcuts="Escape"(不是Esc) -
aria-keyshortcuts="Meta+Shift+T"(Mac 上用Meta,不用Cmd)
错误写法:aria-keyshortcuts="ctrl+s"、aria-keyshortcuts="Ctrl S"、aria-keyshortcuts="Cmd+S"。
它只声明语义,不触发任何行为
aria-keyshortcuts 不是快捷键执行机制,只是告诉屏幕阅读器“这个按钮通常用哪些键激活”。没配 JS 监听,就等于贴了张说明书,但没装开关。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须手动监听并响应:
- 在目标元素或 document 上监听
keydown - 判断
e.ctrlKey && e.key === 's'(注意大小写) - 调用对应逻辑,通常还需
e.preventDefault()阻止浏览器默认行为(如Ctrl+S保存页面)
典型配合:<button aria-keyshortcuts="Ctrl+S">保存</button> + JS 中监听并执行保存函数。
视觉提示必须同步提供,否则快捷键不可发现
仅靠 aria-keyshortcuts, sighted 键盘用户完全看不到快捷键存在;屏幕阅读器用户下次换设备也可能找不到它。
可靠做法:
- 在按钮文字中嵌入
<kbd>Ctrl</kbd> + <kbd>S</kbd>(不能写成<kbd>Ctrl+S</kbd>) - 确保该
<kbd></kbd>内容属于无障碍名称的一部分(不要只靠title,因部分浏览器仅鼠标悬停才显示) - 若需区分平台,可补充说明,如「保存
<kbd>Ctrl</kbd> + <kbd>S</kbd>>>(macOS 上为 <code><kbd>Meta</kbd> + <kbd>S</kbd>>>)」</code>
最容易被忽略的是:快捷键的可访问性 = 声明(aria-keyshortcuts) + 行为(<code>keydown 监听) + 可见性(<kbd></kbd> 视觉提示),三者缺一不可。










