輔助功能和 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。