【问题标题】:div button accessibility clickablediv 按钮可访问性可点击
【发布时间】: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 做你想做的事。

标签: accessibility wai-aria screen-readers jaws-screen-reader wcag2.0


【解决方案1】:

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

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

希望这会有所帮助!

【讨论】:

    猜你喜欢
    • 2021-04-08
    • 2015-09-15
    • 2014-09-21
    • 1970-01-01
    • 2013-07-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多