辅助功能和 Angular：使用 aria-expanded 和 aria-controls 的正确方法 - 在所描述的几个选项中哪些选项是可接受的

Question

如果我在这里https://validator.w3.org/nu/#textarea验证此代码的可访问性问题，那么我没有任何错误：

<button aria-controls="t1" aria-expanded="false">Show</button>
<div id="t1">Some text</div>

不幸的是，我使用条件（Angular 中的 *ngIf）从 DOM 中删除<div>直到 aria-expanded 为真（页面加载时 myBoolValue 为假）：

<button aria-controls="t1" aria-expanded="myBoolValue">Show</button>
<div *ngIf="myBoolValue" id="t1">Some text</div>

结果，在验证时，我得到一个错误：错误：aria-controls 属性必须指向同一文档中的一个元素。 很明显：DOM 中没有 id="t1"。

我应该使用一些技巧让它与众不同。 据我了解，可能有几种选择（请更正）：

选项 1（使用额外的 div 作为包装器，它总是在 DOM 中）：

<button aria-controls="t1" aria-expanded="myBoolValue">Show</button>
<div id="t1"><div *ngIf="myBoolValue">Some text</div></div>

选项 2（显示：无；而不是从 DOM 中删除）：

<button aria-controls="t1" aria-expanded="myBoolValue">Show</button>
<div *ngClass="{hidden: !myBoolValue}" id="t1">Some text</div>

其中.hidden {display: none;}

选项 3（无 aria-control - 无错误）：

<button aria-expanded="myBoolValue">Show</button>
<div *ngIf="myBoolValue">Some text</div>

选项 1、2、3 是否足够好？ 选项 3 完全有效吗？ 如果选项 1 和选项 2 无法轻松实施，这是一种可接受的方法吗？

Answer 1

最好拥有 aria-controls 属性并让它始终指向现有元素（如果可以的话）。 但是你所有的解决方案都是可以接受的，即使是你的#3。

目前，辅助工具实际上并没有大量使用 aria-controls。 其中一些提供了从控制元素快速切换到受控元素并返回的快捷方式，但仅此而已。 因此，如果您必须像解决方案 #3 中那样完全删除它，这并不是什么大损失。

但是，我们永远无法想象 aria-controls 将来会用来做什么，因此，如果可以的话，从长远来看，解决方案 #1 和 #2 肯定会比 #3 更好。 以防万一。

解决方案 #2 可能比 #1 稍微好一点，因为你肯定不会破坏任何东西。 如果受控元素是交互式和可聚焦的，它可能很重要。 相反，让父母集中注意力是没有意义的，之后可能会导致微妙的焦点问题。 另一方面，display:none 总是意味着根本不渲染，无论渲染的类型是什么（屏幕、语音、盲文或任何尚未发明的）。

因此，按照优先顺序，我会推荐#2、#1、#3。