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

标签 html css accessibility wcag2.0

所以我正在做一个需要 <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/

相关文章:

javascript - 使用 javascript 更新 src

html - 无法使用 css 隐藏带有 ":"的输入字段

css - 如何将 Canvas 覆盖在段落上,以便在将鼠标悬停在整个段落上时显示其标题?

colors - 如何确保用户自定义颜色的评论仍然可读?

JavaScript循环选择选项

javascript - 如何在动态生成链接的 onClick 事件的函数中传递 JavaScript 变量?

javascript - 怎样制作按钮比较好?

html - BootStrap 3.0 网格系统不包含文本?

ios - iOS 特殊字符的辅助功能

swift - 如何在 MacOS 上实现 VoiceOver 可访问的 NSSlider?