jquery - jquery tab wcag 可访问性：给定元素不允许角色表示；确保角色属性具有适合元素的值

Question

Jquery选项卡正在添加role="presentation"到锚点，并且根据ax工具，它违反了 WCAG，如何解决这个问题？

元素来源

<a href="#tabs-1" role="presentation" tabindex="-1" class="ui-tabs-anchor" id="ui-id-1">Nunc tincidunt</a>

要解决此违规问题，您需要： 修复以下问题：给定元素不允许角色呈现

标签： jquerytabswcag

Answer 1

从技术上讲，我可以穿上role="presentation"我想要的任何元素。但是，这样做会使元素成为非语义元素（链接本质上变成了 <span>）。拥有不再是链接的链接可能有正当理由，但在这种情况下，我认为 jquery 使用了错误类型的元素。让链接失去其语义意义并删除制表位（tabindex设置为-1）有什么意义？只需使用 <span> 代替。

选项卡似乎是通过tabindex<li> 上的设置来控制的。

jqueryui 选项卡也在aria-expanded选项卡本身上设置，这是错误的。它所需要的只是aria-selected（它正在设置）。该选项卡没有展开任何内容。

但是，使用 jqueryui 选项卡的屏幕阅读器体验与 W3 页面上的选项卡非常相似。也就是说，我在使用 jquery 选项卡和 W3 选项卡时会听到相同的通知（除了 jqueryui 多余的“展开”/“折叠”通知）。

所以最终的结果是它有效。链接具有的事实role="presentation"并不是真正的错误。您应该就此联系 ax。ax 努力不给出误报，他们善于回答问题。