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

【问题标题】：Making a clickable <div> accessible through tab structure?使可点击的 <div> 可通过选项卡结构访问？
【发布时间】：2015-09-18 18:51:13
【问题描述】：

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

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

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

提前感谢您的帮助。

【问题讨论】：

请发送您的代码。！！！
@Mxxpersian：在 JSFiddle 中。
了解.focus()。
这对我来说很好！！！！
@MatthewDarnell 在这种情况下使用锚点如何更符合语义？

标签： html css accessibility wcag2.0

【解决方案1】：

我注意到这个问题被标记为 WCAG 和“可访问性”。

因此，您的问题的答案是“不要那样做”。此页面上的其他答案都可以正常工作，除了需要它工作的人之外的每个人，即那些使用屏幕阅读器或其他辅助技术的人。这里所有基于 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 中捕获关键事件和点击；其他答案已经非常彻底地涵盖了这一点，所以我赢了不要重复细节）

【讨论】：

这里的问题是我正在使用遗留代码。如果我将<div> 更改为<button>，那么所有的样式都会完全混乱。我对 ARIA 标记一无所知，但你能解释一下我如何使用它吗？我同意“最佳”选项是将其更改为<button>。这可能就是我最终会做的事情。这将需要更多的工作。
如果您使用的是遗留代码，那么我敢打赌整个该死的东西都无法访问。
@Logiwan992 : <button> 可以包含你想要的任何标记，所以也许你可以在现有的<div> 周围包裹一个按钮标签，而不是用按钮替换 div。
我注意到这个问题被标记为 WCAG 和“可访问性”。因此，您的问题的答案是“不要那样做”。 天哪，你读懂了我的想法……
我最终将其更改为 <button>。感谢您的帮助，我认为这是最好的答案。

【解决方案2】：

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

像按钮一样工作是非常好的。这就是 ARIA 的全部意义所在。

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

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

还是

【讨论】：

【解决方案3】：

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

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

你必须照顾好元素的“角色”。

以下页面说明了如何从“span”创建“可访问链接”： https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role

另外，如前所述，最好的方法是尽可能依赖按钮/元素。

【讨论】：

【解决方案4】：

尝试在上述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

【讨论】：

这个解决方案需要 jQuery（不确定它是否是原始要求） - 但它应该与 TAB（键码 '9'）而不是 ENTER 一起使用
@ochi：很公平，我没有注意到 jQuery 不在 OP 标签中。
如果可能的话，我希望它在没有 JQuery 的情况下工作，但我确实希望它与 ENTER 一起工作。首先 div 从 TAB 接收焦点，然后 ENTER 就像单击 div 一样。
@ochi：当然可以，但是 OP 想要检测Enter 键on div 的按下。元素必须具有焦点才能触发事件处理程序，因此无需检测 focus 或 TAB 键。
如果它与Enter 一起使用，它也应该与Space 一起使用......当使用键盘导航时，其中任何一个都会激活按钮或链接。

【解决方案5】：

对这两个事件使用相同的事件处理程序。如果事件是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>

【讨论】：