如何將鍵盤快捷鍵功能添加到 HTML 按鈕

Question

好吧，我想知道如何將鍵盤快捷鍵功能添加到 HTML 按鈕。 例如，如果您希望為網頁添加書簽，您的鍵盤快捷方式為CTRL+ D for chrome 和 safari 但我希望將相同的功能放在按鈕中，以便當用戶單擊它時，它會將該頁面添加為書簽而不是顯示警告消息像在這段代碼中一樣使用CTRL + D 。

那么這可以做到嗎？ 我不知道這是否可能，即使是流行的 Addthis 按鈕也會像在本網站上一樣顯示相同的警報以使用 ctrl+d。

Answer 1

在 HTML 中， accesskey屬性允許定義單個字母，並將修改鍵的處理留給瀏覽器和操作系統，以避免沖突。

<button aria-label="+ add this" accesskey="a"><span aria-hidden="true">+</span></button>

這在理論上很棒，但在實踐中存在一些可訪問性問題。 ARIA 標准還有一個關於鍵盤快捷鍵注意事項的冗長部分。

我仍然會選擇 go，因為這是我們目前擁有的最佳選擇。 您不想在代碼中處理平台約定。

您甚至可以使用accessKeyLabel屬性檢索瀏覽器最終分配的組合鍵，但瀏覽器支持不是很好。

button.title += ` [${button.accessKeyLabel || button.accessKey}]`;

如果您使用單字符快捷方式，則需要提供一種機制來更改這些快捷方式，以防止它們干擾其他 AT 快捷方式：

了解成功標准 2.1.4：字符快捷鍵