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

Making a clickable <div> accessible through tab structure?

提问by lfitzgibbons

So I am working on a project that requires a <div>with an onclick event. I've got the main functionality working, but there is one problem. I need the onclick event to happen when the user tabs to the <div>and presses enter. I added a tabindex to the <div>which allows it to gain focus, but nothing happens when the user presses enter (or any other key).

所以我正在做一个需要<div>onclick 事件的项目。我已经让主要功能正常工作，但有一个问题。我需要在用户切换到<div>并按下回车键时发生 onclick 事件。我向 中添加了一个 tabindex 以<div>使其获得焦点，但是当用户按下 Enter （或任何其他键）时没有任何反应。

Can anyone help me with this? Or is what I want not even possible?

谁能帮我这个？或者我想要的甚至不可能？

Here is a jsfiddle demonstrating my problem. http://jsfiddle.net/logiwan992/suwq7r09/

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

Thank you in advance for any help.

预先感谢您的任何帮助。

回答by Daniel Beck

I note the question is tagged WCAG and "accessibility".

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

The answer to your question is therefore "don't do that." The other answers on this page will all work fine, for everyone except the people who need it to work, i.e. those using screenreaders or other assistive technology. None of the javascript-based solutions here are WCAG compliant.

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

What you want is a <button>. That gives you your tabindex and keyboard control for free.

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

You can also force a <div>to work like a <button>by adding ARIA markup (though it's better and easier to just use the tag that already does what you need it to do.)

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

If absolutely necessary, a good introduction to using ARIA for pseudo-buttons is here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role

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

The gist of it is, you need to add the role="button"attribute, and manage the state of the aria-pressedattribute manually (by capturing key events and clicks in javascript; other answers have covered this pretty thoroughly so I won't repeat the details)

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

回答by slugolicious

It is perfectly fine to have a <div> work like a button provided you specify the right ARIA tags, roles, and keyboard events. That's the whole point of ARIA.

如果您指定正确的 ARIA 标签、角色和键盘事件，让 <div> 像按钮一样工作是非常好的。这就是 ARIA 的全部意义所在。

I do agree, though, that when possible you should use the native html elements. That's the first rule of ARIA use - http://www.w3.org/TR/aria-in-html/#notes-on-aria-use-in-html. But I understand that's not always possible.

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

There was a mention of using focus(). That's incorrect. Focus() is used to movethe focus to the object. It's not used to handle an event. Now perhaps they meant onFocus(), which is an event triggered when the object receives focus, but that's still not the right event to trap for. You don't want a button (whether implemented as a <div> or a <button>) to perform its function just because you tabbed to it. The user has to click or press enter/space on it.

有提到使用focus()。那是不正确的。Focus() 用于将焦点移动到对象上。它不用于处理事件。现在也许他们的意思是 onFocus()，这是一个在对象获得焦点时触发的事件，但这仍然不是捕获的正确事件。您不希望按钮（无论是作为 <div> 还是 <button> 实现）仅仅因为您使用了 Tab 键来执行其功能。用户必须单击或按回车键/空格键。

Please look at the authoring practices which define the keyboard behavior for a button, http://www.w3.org/TR/wai-aria-practices/#button, as well as the section that talks about keyboard events, http://www.w3.org/TR/wai-aria-practices/#focus_tabindex. In particular, note that you should notrely on keypress. Not all browsers send that event.

请查看定义按钮键盘行为的创作实践，http: //www.w3.org/TR/wai-aria-practices/#button，以及讨论键盘事件的部分，http:// /www.w3.org/TR/wai-aria-practices/#focus_tabindex。特别要注意，你应该不依靠按键。并非所有浏览器都会发送该事件。

Anytime you press a key, three possible events mighthappen: Keydown, keypress, keyup. Keydown and keyup are supported on all browsers and have access to event.keyCode. Keypress is supported on some browser and has access to event.charCode.

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

There's a significant different between keyCode and charCode, especially if you're trying to implement shortcut keys such as Ctrl+/. Many non-US keyboards have special keys in different places on the keyboard and you get different keyCodes for them. But that's a topic for another discussion.

keyCode 和 charCode 之间存在显着差异，尤其是当您尝试实现 Ctrl+/ 等快捷键时。许多非美式键盘在键盘的不同位置都有特殊的键，您会为它们获得不同的键码。但这是另一个讨论的话题。

回答by Adam

The "onclick" attribute has a specific behavior on links, because it can be triggered with the enter key.

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

See the following WCAG failure: http://www.w3.org/TR/WCAG20-TECHS/F59.html

看下面的WCAG失败：http: //www.w3.org/TR/WCAG20-TECHS/F59.html

You have to take care of the "role" of the element.

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

The following page illustrates how you can make an "accessible link" from a "span": https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role

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

Also, as already said, best way is relying on a button/a element when possible.

此外，正如已经说过的，最好的方法是尽可能依赖按钮/元素。

回答by D4V1D

Try to bind the keypressevent on the said divand detect if Enterkey was pressed (which has code number 13).

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

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

Working JSFiddle

工作 JSFiddle

---

---

You can, alternatively, use jQuery also:

或者，您也可以使用 jQuery：

jQuery(function($) {

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

});

Working JSFiddle

工作 JSFiddle

回答by Jacob Alvarez

Use the same event handler for both events. If the event is keypressverify the key pressed is the Enter key before executing.

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