我有一组选项卡，其中包含适用于辅助功能支持的角色和属性。选项卡控件的内容通过ajax加载。但是，加载内容的每个包装器也具有适当的选项卡窗格角色和属性。
问题是，当我使用Chrome辅助功能工具运行自动审核时，测试失败，指出除了当前处于活动状态的选项卡之外，所有选项卡都缺少相应的ID选项卡窗格（因为已装入ID的包装器）。确切的错误说明：“通过ID引用其他元素的ARIA属性应该引用DOM中存在的元素。”
一旦具有相应ID属性的选项卡处于活动状态，aria-controls将存在，这真的是一个错误吗？或者这仅仅是假阳性的情况，因为它是一个自动测试，他们只能这么做。
总之，aria-controls做什么以及它真正需要引用DOM中当前存在的ID？
答案 0 :(得分：1)
aria-controls为您的辅助技术提供一种移动到受控元素的方法。
如果此元素不在DOM中或无法访问，那么是的，这是一个错误。
答案 1 :(得分：0)
两个（带有aria-controls的元素以及带有引用的id的元素）必须同时存在，无论是在页面渲染还是通过JS注入。
在用户甚至到达控件或您的脚本触发以使其存在之前，由UA / AT组合解析DOM。如果你使用JS注入，那么你需要确保重新解析DOM。
这也适用于aria-owns。
答案 2 :(得分：0)
我不知道以下内容是否适用于您的架构，但它可以解决错误问题： 设计选项卡，使其在加载时都在页面中。使用绝对定位格式化那些不应显示在视口外部的格式，例如＆＃34; left：-99em。＆＃34;在显示选项卡的时候，使用AJAX重置定位。结果是ARIA ID依赖项始终有效，因为选项卡始终是DOM的一部分。