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

Question

所以我正在开发一个需要<div>onclick事件的项目.我有主要功能,但有一个问题.我需要在用户选中<div>并按下回车键时发生onclick事件.我添加了一个tabindex,<div>它允许它获得焦点,但当用户按下enter(或任何其他键)时没有任何反应.

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

这是一个证明我的问题的jsfiddle. http://jsfiddle.net/logiwan992/suwq7r09/

预先感谢您的任何帮助.

Answer 1

我注意到这个问题被标记为WCAG和"可访问性".

因此,你的问题的答案是"不要这样做".除了需要它工作的人,即那些使用屏幕阅读器或其他辅助技术的人之外,这个页面上的其他答案都可以正常工作.这里没有基于javascript的解决方案符合WCAG标准.

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

您还可以通过添加ARIA标记<div>来强制a 工作<button>(尽管使用已经完成您需要它的标记会更好更容易.)

它的要点是,你需要添加role="button"属性,并aria-pressed手动管理属性的状态(通过捕获javascript中的关键事件和点击;其他答案已经完全涵盖了这一点,所以我不会重复细节)

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