如何在 Web 应用程序上直观地指示自定义键盘快捷键
How to visually indicate custom keyboard shortcuts on web apps
虽然有 WebAIM guideline on keyboard accessibility，但我无法找到关于如何向有视力的人传达自定义键盘快捷键的存在的任何指南 - 甚至建议。
对于像我这样的屏幕 reader 用户，这很简单：
<input type="submit" aria-keyshortcuts="Alt+S" value="Send" />
然后屏幕 reader 会显示“发送按钮 Alt 加 S”，键盘快捷键对于盲文显示器用户来说也很明显。
然而，不能或不想使用鼠标的视力正常的用户需要一个简单的指示器，指示给定控件上可以使用哪些键盘快捷键，以便他们拥有类似的用户体验，而不必搜索单独文档中的键盘快捷键列表。 （这样的列表当然很重要，但它们不应该是唯一有视力的用户知道他们可以使用哪些键盘快捷键的方式。）
你能为我提供如何直观地指示可用键盘快捷键的资源或建议吗？
aria-keyshortcuts 的指南说：
Authors SHOULD provide a way to expose keyboard shortcuts so that all users may discover them, such as through the use of a tooltip.
这基本上就是您要问的问题。您知道应该将信息传达给所有用户，但是 如何 传达该信息？如规范中所建议的，工具提示是一种可能性，但 仅 如果该工具提示也对键盘用户公开。目前，工具提示（title 属性）仅在鼠标悬停在 Firefox 和 Chrome（不确定 Safari）时显示。说出您对 Internet Explorer 的看法，但 IE 会在键盘获得焦点时显示工具提示，因此这是一个很棒的功能。该功能也被带入了 Edge。
因此您可以使用工具提示，但仍需要另一种方式向所有用户传达该信息。如果 space 允许，我经常会在页面上看到键盘提示作为文本。理想情况下，提示位于它适用的元素附近，但如果有多个快捷键，那么列出所有键的部分可能是更好的选择。为该部分设置适当的 <h#> 元素，以便更容易通过屏幕找到 reader。
注意 使用快捷键的 accesskey 属性会自动由屏幕 readers 宣布，所以你不需要 aria-keyshortcuts.但是该属性只允许一个简单的字母，并且仍然存在无法将其传达给有视力的键盘用户的问题。浏览器 应该 自动为带有 accesskey 的元素显示工具提示，但遗憾的是它们不会。
此答案中提出了另一种选择，How to display a specific shortcut key in HTML?。查看 CSS 解决方案（link 应直接转到该答案）但不要在 CSS 中引用 accesskey，而是引用 aria-keyshortcuts。 （忽略该答案的 javascript 部分。）
虽然有 WebAIM guideline on keyboard accessibility，但我无法找到关于如何向有视力的人传达自定义键盘快捷键的存在的任何指南 - 甚至建议。
对于像我这样的屏幕 reader 用户，这很简单：
<input type="submit" aria-keyshortcuts="Alt+S" value="Send" />
然后屏幕 reader 会显示“发送按钮 Alt 加 S”，键盘快捷键对于盲文显示器用户来说也很明显。
然而，不能或不想使用鼠标的视力正常的用户需要一个简单的指示器，指示给定控件上可以使用哪些键盘快捷键，以便他们拥有类似的用户体验，而不必搜索单独文档中的键盘快捷键列表。 （这样的列表当然很重要，但它们不应该是唯一有视力的用户知道他们可以使用哪些键盘快捷键的方式。）
你能为我提供如何直观地指示可用键盘快捷键的资源或建议吗？
aria-keyshortcuts 的指南说：
Authors SHOULD provide a way to expose keyboard shortcuts so that all users may discover them, such as through the use of a tooltip.
这基本上就是您要问的问题。您知道应该将信息传达给所有用户，但是 如何 传达该信息？如规范中所建议的，工具提示是一种可能性，但 仅 如果该工具提示也对键盘用户公开。目前，工具提示（title 属性）仅在鼠标悬停在 Firefox 和 Chrome（不确定 Safari）时显示。说出您对 Internet Explorer 的看法，但 IE 会在键盘获得焦点时显示工具提示，因此这是一个很棒的功能。该功能也被带入了 Edge。
因此您可以使用工具提示，但仍需要另一种方式向所有用户传达该信息。如果 space 允许，我经常会在页面上看到键盘提示作为文本。理想情况下，提示位于它适用的元素附近，但如果有多个快捷键，那么列出所有键的部分可能是更好的选择。为该部分设置适当的 <h#> 元素，以便更容易通过屏幕找到 reader。
注意 使用快捷键的 accesskey 属性会自动由屏幕 readers 宣布，所以你不需要 aria-keyshortcuts.但是该属性只允许一个简单的字母，并且仍然存在无法将其传达给有视力的键盘用户的问题。浏览器 应该 自动为带有 accesskey 的元素显示工具提示，但遗憾的是它们不会。
此答案中提出了另一种选择，How to display a specific shortcut key in HTML?。查看 CSS 解决方案（link 应直接转到该答案）但不要在 CSS 中引用 accesskey，而是引用 aria-keyshortcuts。 （忽略该答案的 javascript 部分。）