Html 制作一个可点击的<；部门>；可通过选项卡结构访问？

因此，我正在处理一个需要带有onclick事件的

的项目。我已经实现了主要功能，但有一个问题。我需要在用户点击

并按enter键时发生onclick事件。我在

中添加了一个tabindex，可以让它获得焦点，但当用户按enter键（或任何其他键）时，什么都不会发生

有人能帮我吗？还是我想要的根本不可能

下面是一个JSFIDLE演示我的问题。

---

提前感谢您的帮助。

尝试绑定所述

div

上的

keypress

事件，并检测是否按下了

Enter

键（其代码编号为

13

）

---

或者，您也可以使用jQuery：

jQuery(function($) {

    $('div').on('keypress', function(e) {
        if(e.keyCode == 13) {
            alert('div focused'); 
        }
    });

});

---

对两个事件使用相同的事件处理程序。如果事件为

keypress

请在执行前验证所按下的键是否为Enter键。

var divButton=document.querySelector（“#div button”）；
divButton.addEventListener（'单击'，激活）；
divButton.addEventListener（“按键”，激活）；
功能激活（e）{
如果（e.type=='keypress'&&e.keyCode==13）{
警报（“激活了div”）；
}
};
div{
外形：1px纯黑；
}
新闻组：焦点{
轮廓：1px纯红；
}

这是我的部门！
我注意到问题被标记为WCAG和“可访问性”

因此，您的问题的答案是“不要那样做”。本页上的其他答案对所有人都适用，但需要它工作的人除外，即使用屏幕阅读器或其他辅助技术的人。这里没有一个基于javascript的解决方案符合WCAG

您需要的是
。这使您可以免费使用选项卡索引和键盘控制

您还可以通过添加ARIA标记来强制
像
一样工作（尽管只使用已经完成所需任务的标记更好、更容易）

如果绝对必要，这里有一个很好的介绍如何使用ARIA进行伪按钮：

要点是，您需要添加
role=“button”
属性，并手动管理
aria pressed
属性的状态（通过在javascript中捕获关键事件和单击；其他答案已经完全涵盖了这一点，因此我不再重复细节）
如果您指定了正确的ARIA标记、角色和键盘事件，那么像按钮一样工作是完全可以的。这就是咏叹调的全部要点

不过，我确实同意，如果可能，您应该使用原生html元素。这是ARIA使用的第一条规则-。但我明白这并不总是可能的

有人提到使用focus（）。那是不对的。Focus（）用于将焦点移动到对象。它不用于处理事件。现在，也许他们指的是onFocus（），这是一个在对象接收到焦点时触发的事件，但这仍然不是正确的捕获事件。您不希望按钮（无论是实现为a还是a）仅仅因为您使用了选项卡就执行其功能。用户必须在其上单击或按enter/space

请查看定义按钮键盘行为的创作实践，以及讨论键盘事件的部分。特别要注意的是，您不应该依赖按键。并非所有浏览器都发送该事件

无论何时按下一个键，都可能发生三个事件：Keydown、keypress、keypup。所有浏览器都支持Keydown和keyup，并且可以访问event.keyCode。某些浏览器支持按键，并且可以访问event.charCode

keyCode和charCode之间有很大的不同，特别是当您试图实现快捷键（如Ctrl+/）时。许多非美国的键盘在键盘的不同位置有特殊的键，你可以为它们获得不同的键码。但这是另一个讨论的主题。
在链接上，“onclick”属性有一个特定的行为，因为它可以用enter键触发

请参阅以下WCAG故障：

您必须注意元素的“角色”

以下页面说明了如何从“范围”创建“可访问链接”：

另外，正如前面所说的，最好的方法是尽可能依赖按钮/a元素。
请发送您的代码@Mxxpersian：它在JSFIDLE中。了解。这项工作对我来说很好@MatthewDarnell在这种情况下如何使用锚更具语义？此解决方案需要jQuery（不确定它是否是原始需求）-但它应该与TAB（键代码“9”）一起使用，而不是ENTER@ochi：很公平，我没有注意到jQuery不在OP标记中。如果可能的话，我希望它在没有jQuery的情况下工作，但我确实希望它与ENTER一起工作。首先，div从TAB接收焦点，然后回车就像单击div一样。@ochi：当然，但是OP想要检测按下
div上的
ENTER
键。元素必须具有焦点才能触发事件处理程序，因此无需检测
焦点
或
选项卡
键。如果它与
输入一起工作，则它还应与
空格一起工作。。。当使用键盘导航时，其中任何一个都会激活按钮或链接。这里的问题是我使用的是遗留代码。如果我将
更改为
，那么所有的样式都会完全混乱。我对ARIA标记一无所知，但你能解释一下我如何使用它吗？我同意“最佳”选择是将其更改为
。这可能就是我最终要做的。这将需要更多的工作。如果您使用的是遗留代码，那么我敢打赌整个该死的东西都是不可访问的。@Logiwan992:a
可以包含您想要的任何标记，因此您可以在现有的
jQuery(function($) {

    $('div').on('keypress', function(e) {
        if(e.keyCode == 13) {
            alert('div focused'); 
        }
    });

});