div 按钮可访问性可点击

Posted 2023-05-07

【中文标题】div 按钮可访问性可点击

【英文标题】：div button accessibility clickable

【发布时间】：2018-03-07 14:35:41

【问题描述】：

我有一个 div 元素（其中有另一个 div），它当前具有 role="button"。 该元素位于主体下方，当 使用某些可访问性评估工具（特别是 DAP）进行审计。

违规原因：“所有内容必须位于 WAI-ARIA 地标或标记区域角色内”

当使用“按钮”以外的角色时，使用 JAWS 屏幕阅读器时，它会变得无法点击。

我尝试将 role="complementary" 赋予主 div，并将 role="button" 赋予其子 div - 这使得使用键盘无法点击整个元素。

任何建议将不胜感激.. 谢谢！

【问题讨论】：

您能发布您的代码或测试页面的链接吗？

@QuentinC 点击这里 。这是造成上述违规的代码。当试图改变主 Div 的角色时，元素变得不可点击。

另外，使用 div 以外的 html 标记不是一个选项..

当说“元素变得不可点击”时——只有在使用键盘（鼠标点击仍然有效）和使用 NVDA 时才会这样。

好的。尝试 tabindex=0。但是：“另外，使用 div 以外的 HTML 标记不是一个选项……” – => 为什么？你可以用 CSS 做你想做的事。

【参考方案1】：

您使用角色作为补充的 div 的 tabindex 应该为 -1。您要关注的按钮的 tabindex 应为 0/1。这将确保可访问性读者将关注此组件，并且当他们这样做时，它将选择按钮。

这是一个可能有帮助的链接： https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/

希望这会有所帮助！