使可点击的 <div> 可通过选项卡结构访问？

Question

所以我正在开发一个需要 <div> 和 onclick 事件的项目。我的主要功能已正常运行，但存在一个问题。我需要在用户切换到 <div> 并按下回车键时发生 onclick 事件。我在 <div> 中添加了一个 tabindex，它允许它获得焦点，但是当用户按下 enter（或任何其他键）时没有任何反应。

谁能帮我解决这个问题？还是我想要的根本不可能？

这是一个演示我的问题的 jsfiddle。 http://jsfiddle.net/logiwan992/suwq7r09/

提前感谢您的帮助。

Answer 1

尝试在上述 div 上绑定 keypress 事件并检测是否按下了 Enter 键（代码为 13）。

var div = document.getElementsByTagName('div');
div[0].addEventListener('keypress', function(e) {
    if(e.keyCode == 13) {
        alert('div focused');   
    }
});

Working JSFiddle

您也可以使用 jQuery：

jQuery(function($) {

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

});

Working JSFiddle

Answer 2

对两个事件使用相同的事件处理程序。如果事件是 keypress，请在执行前验证按下的键是否为 Enter 键。

var divButton = document.querySelector('#div-button');

divButton.addEventListener('click', activate);
divButton.addEventListener('keypress', activate);

function activate(e) {
  if (e.type === 'keypress' && e.keyCode == 13) {
    alert('activated the div'); 
  }
};

div {
    outline: 1px solid black;
}

div:focus {
    outline: 1px solid red;
}

<div id="div-button" tabindex="0">
    <h1>This is my div!</h1>
</div>

Answer 3

我注意到这个问题被标记为 WCAG 和 "accessibility"。

因此，您的问题的答案是 "don't do that." 此页面上的其他答案都可以正常工作，除了需要它工作的人，即那些使用屏幕阅读器或其他辅助技术的人。 None 的基于 javascript 的解决方案符合 WCAG。

你要的是<button>。这为您提供了免费的 tabindex 和键盘控制。

您还可以通过添加 ARIA 标记强制 <div> 像 <button> 一样工作（尽管使用已经完成您需要它做的事情的标签更好更容易。）

如果绝对必要，这里有一个关于使用 ARIA 伪按钮的很好的介绍： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

要点是，你需要添加role="button"属性，并手动管理aria-pressed属性的状态（通过捕获关键事件和点击javascript；其他答案已经很彻底地涵盖了这一点，所以我不会重复细节）

Answer 4

如果您指定了正确的 ARIA 标签、角色和键盘事件，让

像按钮一样工作是完全没问题的。这就是 ARIA 的重点。

不过，我同意您应该尽可能使用本机 html 元素。这是 ARIA 使用的第一条规则 - http://www.w3.org/TR/aria-in-html/#notes-on-aria-use-in-html。但我知道这并不总是可能的。

提到了使用 focus()。那是不正确的。 Focus() 用于移动焦点到对象。它不用于处理事件。现在也许他们指的是 onFocus()，这是一个在对象获得焦点时触发的事件，但它仍然不是捕获的正确事件。您不希望按钮（无论是作为

还是

Answer 5

"onclick" 属性在链接上有特定的行为，因为它可以用回车键触发。

查看以下 WCAG 故障： http://www.w3.org/TR/WCAG20-TECHS/F59.html

您必须注意元素的 "role"。

下一页说明了如何从 "span" 生成 "accessible link"： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role

此外，如前所述，最好的方法是尽可能依赖 button/a 元素。

使可点击的 <div> 可通过选项卡结构访问？

Making a clickable <div> accessible through tab structure?

html

css

accessibility

wcag2.0