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

aria-keyshortcuts 必须作用在可聚焦的交互元素上
它不生效于普通 <div> 或文本节点,只对能接收键盘焦点并触发行为的元素起作用。否则屏幕阅读器会读出快捷键,但用户根本无法用键盘操作它。
<p>常见可用元素包括:</p>
<ul>
<li>
<code><button></button>、<a href></a>、<input>、<textarea></textarea>
role="button"、role="menuitem"、role="tab" 的元素(需同时加 tabindex="0")Tab 导航到,且有明确的激活逻辑(如监听 keydown)错误写法:<div aria-keyshortcuts="Ctrl+S">保存</div>——视觉可见、语义脱节、无法聚焦、不能触发。
键名必须严格符合 W3C Key Names 规范
大小写敏感,修饰键与主键之间只能用 + 连接,空格、逗号、中文符号都会导致解析失败。
正确示例:
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 不是快捷键执行机制,只是告诉屏幕阅读器“这个按钮通常用哪些键激活”。要真正响应快捷键,你还得自己监听 keydown 事件。
典型配合方式:
- 按钮上写
<button aria-keyshortcuts="Ctrl+S">保存</button> - JS 中监听全局或目标元素的
keydown,判断e.ctrlKey && e.key === 's',再调用保存逻辑 - 避免和
accesskey混用:后者仅跳转焦点,不触发动作;两者职责不同,不可互相替代
漏掉 JS 监听,等于给盲人一张写着“按 Ctrl+S”的说明书,但没装任何按钮开关。
视觉提示必须同步提供,否则快捷键不可发现
屏幕阅读器用户能听到快捷键,但 sighted 键盘用户看不见。纯靠 aria-keyshortcuts 会让所有人(包括他们自己下次换设备时)找不到它。
可靠做法:
- 在按钮文字中嵌入
<kbd>Ctrl+S</kbd>,例如:<button>保存<kbd>Ctrl+S</kbd></button> - 确保该
<kbd></kbd>内容包含在无障碍名称中(不靠title,因部分浏览器只鼠标悬停才显示) - 若需区分平台,可补充说明,如「保存Ctrl+S(macOS 上为 Meta+S)」
最常被忽略的一点:快捷键的可访问性 = 声明(aria-keyshortcuts) + 行为(keydown) + 可见性(视觉提示),三者缺一不可。











