aria-describeby在Angular網站

Question

我正在開發一個需要符合aria標準的Angular應用程序。它已被標記爲我們需要添加aria-describedby屬性到我們的輸入字段，這些字段指向相關錯誤消息元素的id屬性。

我們的表單目前設置如下（這是有點僞代碼，並有一個name屬性OD「形式」形式）：

<input aria-describedby="" type="text" name="something" ng-model="mySomething" required> 
<label for="something">A field for something</label> 
<p ng-show="form.something.$dirty" id="validation-something-invalid"> 
    Please enter a valid something 
</p> 
<p ng-show="form.something.$pristine" id="validation-something-empty"> 
    Please enter the something 
</p> 

我的問題是，根據報告我需要爲每個錯誤元素添加單獨的ID（如上所示），並且aria-describedby應該從空開始，並且在錯誤相關時應將相應錯誤描述元素的ID添加到其中。這被證明是有問題的，因爲試圖編寫一個觀察模型有效性和其他狀態的指令非常困難/複雜。

我想簡化它（希望這會幫助我在這個衝刺中完成這項工作）通過添加一個帶ID的周圍元素並直接指向它（永久性地）指向aria描述。然後我會使用ng-if添加從DOM中刪除錯誤。

下面的文章表明，這是有效的（在最後一節，標題爲「方法來提供上下文相關的名稱/描述文本」）https://www.paciellogroup.com/blog/2015/05/short-note-on-aria-labelledby-and-aria-describedby/

修改後的代碼：

<input aria-describedby="validation-messages-something" type="text" name="something" ng-model="mySomething" required> 
<label for="something">A field for something</label> 
<div id="validation-messages-something"> 
    <p ng-if="form.something.$dirty"> 
     Please enter a valid something 
    </p> 
    <p ng-if="form.something.$pristine"> 
     Please enter the something 
    </p> 
</div> 

的思考？

Answer 1

我的解決方案現在已經通過我們的輔助功能團隊進行了測試，我上面發佈的解決方案確實有效。因此，要重申的是，該解決方案如下：

<input aria-describedby="validation-messages-something" type="text" name="something" ng-model="mySomething" required> 
<label for="something">A field for something</label> 
<div id="validation-messages-something"> 
    <p ng-if="form.something.$dirty"> 
     Please enter a valid something 
    </p> 
    <p ng-if="form.something.$pristine"> 
     Please enter the something 
    </p> 
</div> 

我會試着重溫這篇文章，只要我能使其少角爲中心。