所以我正在做一个需要 <div>
的元素使用 onclick 事件。我的主要功能已正常运行,但存在一个问题。当用户切换到 <div>
时,我需要发生 onclick 事件并按下回车键。我在 <div>
中添加了一个 tabindex这允许它获得焦点,但当用户按下 enter(或任何其他键)时什么也没有发生。
谁能帮我解决这个问题?还是我想要的根本不可能?
这是一个演示我的问题的 jsfiddle。 http://jsfiddle.net/logiwan992/suwq7r09/
提前感谢您的帮助。
最佳答案
我注意到这个问题被标记为 WCAG 和“可访问性”。
因此,您问题的答案是“不要那样做”。此页面上的其他答案都可以正常工作,除了需要它工作的人,即那些使用屏幕阅读器或其他辅助技术的人。这里所有基于 javascript 的解决方案都不符合 WCAG。
你想要的是一个<button>
.这为您提供了免费的 tabindex 和键盘控制。
你也可以强制一个<div>
像<button>
一样工作通过添加 ARIA 标记(尽管使用已经完成您需要它做的事情的标签会更好也更容易。)
如果绝对必要,这里有一个关于使用 ARIA 伪按钮的很好的介绍: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
要点是,您需要添加 role="button"
属性,并管理 aria-pressed
的状态手动属性(通过在 javascript 中捕获关键事件和点击;其他答案已经非常彻底地涵盖了这一点,所以我不会重复细节)
关于html - 使可点击的 <div> 可通过选项卡结构访问?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32659099/