如何修复a11y交互式控件不得嵌套错误

Question

我有以下标记：

<ul role="listbox">
    <li role="option">
        <span>Active</span>
        <button>Expand</button>
    </li>
    <li role="option">
        <span>A list item only</span>
    </li>
    <li role="option">
        <span>Additional List</span>
        <button>Expand</button>
    </li>
</ul>

li

元素有一个单击处理程序，可以触发操作。列表项中的按钮还会触发展开另一组面板的操作。

但是由于 role="option"，我在按钮元素上收到 AX 错误“交互式控件不得嵌套”错误。

我们需要 ul 和 li 角色拥有适当的屏幕阅读器输出，以便需要保留。有点卡在正确的修复上，非常感谢任何想法！谢谢你。

删除 ul 和 li 中的角色解决了问题，但屏幕阅读器不再宣布跨度标签。

Answer 1

根据列表框模式的规范：

列表框角色向辅助技术传达的交互模型不支持与选项内的元素进行交互。由于列表框小部件的这些特征，它不提供一种可访问的方式来呈现交互式元素列表，例如链接、按钮或复选框。

这就是您收到该错误的原因。如果您需要在

options

中包含交互式元素，请考虑使用 网格图案:

要呈现交互元素列表，请参阅网格图案。

但是，如果您的目的是创建导航链接列表，则可以仅使用

nav

元素。

不过，应该提供有关您正在尝试构建的内容的更多信息。
我希望您觉得这有帮助。