提问人：unknownrisk 提问时间：1/26/2022 最后编辑：unknownrisk 更新时间：1/28/2022 访问量：2669
jquery-ui 选项卡“交互式控件不得嵌套”
jquery-ui tab "Interactive controls must not be nested"
问：
我使用jquery-ui选项卡。示例代码：
<ul role="tablist">
<li role="tab"><a class="label" href="#tabs-1" aria-label="Description tab">Description</a></li>
<li role="tab"><a class="label" href="#tabs-2" aria-label="Reviews tab">Reviews</a></li>
<li role="tab"><a class="label" href="#tabs-3" aria-label="Credits tab">Credits</a></li>
<li role="tab"><a class="label" href="#tabs-4" aria-label="Cataloging tab">Cataloging</a></li>
</ul>
axe-core DevTools 辅助功能检查器标记了此代码的“严重”问题：“交互式控件不得嵌套”，并说明“交互式控件元素不得具有可聚焦的后代”，并引用指南 WCAG 4.1.2。
据我了解，问题在于 listitem 中有一个链接。在 axe-core （https://github.com/dequelabs/axe-core/issues/601） 的 Github 讨论中，列表项中的可单击链接会导致屏幕阅读器出现问题。
但这似乎是 jquery-ui 选项卡小部件的标准用法。如何更改选项卡小部件代码以使其可访问？
答：
4赞
GrahamTheDev
1/26/2022
#1
其中的项目将添加等以使它们可聚焦（实际的，而不是链接），然后锚点应该添加到其中。<ul role="tablist">tabindex="0"litabindex="-1"
这个想法是，如果 JS 失败，链接是回退的，这就是为什么它首先包含在首位而不仅仅是纯文本。
但是，这确实会导致交互式元素的嵌套，就像您现在在列表项上所做的那样（使其“交互式”/可聚焦），然后在其中创建一个链接。tabindex="0"
他们添加到链接以将其从焦点顺序中删除，但某些屏幕阅读器/浏览器组合仍会选择此链接，这就是它被标记的原因。tabindex="-1"
因此，有一个解决方法，但您需要自己实现它。
首先，添加到链接：role="none presentation"
<li role="tab"><a class="label" href="#tabs-1" role="none presentation">Description</a></li>
这样做的目的是表明，就辅助技术而言，应该将此锚点视为 a 或 a（它删除了所有语义含义）。<div><span>
其次，（但您必须检查它是否适用于 jQuery-UI）是通过 JS 从链接中删除该属性（因此只有在 Tab 组件初始化后才会删除它）。href
如果在执行此操作后检查元素（忽略添加的任何类等），则最终应该得到以下内容：
<li role="tab"><a class="label" role="none presentation">Description</a></li>
如果 JS 正常工作并正确加载，这将不再是可聚焦的项目，但如果 JS 无法加载，它将优雅地回退。
另请注意，我删除了您，因为您正在使用的事实已经告诉屏幕阅读器它是一个选项卡，因此不需要您的标签。aria-labelrole="tab"
所以总而言之：
- 添加到
role="none presentation"<li> - 通过 JavaScript 从链接中删除该属性。
href - 删除（与问题无关）
aria-label
这应该使选项卡在jQuery-UI中尽可能可访问，但是它可能存在其他问题，因此我不能说它是否可访问！
评论
0赞
unknownrisk
1/27/2022
我发现添加、删除属性以及删除 jquery-ui 添加的属性确实消除了 axe-core 标记的“不得嵌套交互式控件”错误。但是，看起来对选项卡小部件至关重要 - 删除选项卡后选项卡不起作用。我尝试改用 onclick，但这不起作用，并且没有标签的 jquery-ui 存在控制台日志错误。role="none"hreftabindexhrefhref
1赞
Steven Lambert
1/27/2022
查看源代码，无法更改选项卡的结构。它需要一个 ul 元素，并要求 ul 有一个带有 href 属性的锚元素的 li。考虑到这一点，我不确定您是否可以以使其可访问的方式破解选项卡创建。你必须在事后删除一些东西才能让它工作。
1赞
GrahamTheDev
1/27/2022
它是否真的在初始化后挂接到元素中，或者它只是需要它作为设置的一部分？如果您无法删除，则无法删除此错误，但您将在库约束范围内使用其他建议完成所有操作。显然，我的纯粹主义者说要找到一个可访问的库，但在现实世界中，这并不总是可能的，所以尽你所能，实际上只有少数屏幕阅读器用户会遇到问题，如果你实现这个部分。hrefhrefrole="presentation none"
2赞
Steven Lambert
1/28/2022
在代码中，很多时候它专门引用 来获取信息，但我不确定 jQuery UI 生命周期事件是否知道它们何时会被触发。例如，如果触发了 _refresh 函数，则它们仍然需要该属性。你必须做一些广泛的测试，以确保你可以在事后进行更改，以确保功能不会中断。hrefhref
1赞
unknownrisk
1/28/2022
使用 [ 我认为这是正确的顺序，因为 “presentation” 是比 “none” 角色更广泛支持的后备角色，根据 W3C] 在标签上标记为“使用的 ARIA 角色必须符合有效值”以及“ARIA 角色应该适合元素”;更改为删除“符合有效值”;但是标记了一个新问题，即该角色与“其他角色”冲突，我认为该角色指的是标签的全局属性？或者可能是斧头工具的问题。role="none presentation<a>role="presentation"<a>
评论