AngularJS 站点中的 aria- describeby答案

【问题标题】：aria-describedby in an AngularJS siteAngularJS 站点中的 aria- describeby
【发布时间】：2020-12-20 20:52:38
【问题描述】：

我正在开发一个需要兼容 aria 的 AngularJS 应用程序。已标记我们需要将aria-describedby 属性添加到指向相关错误消息元素的id 属性的输入字段。

我们的表单当前设置如下（这是一种伪代码，并且有一个名称属性为“form”的表单）：

<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- describeby 的周围元素（永久地）来简化这一点（希望这将有助于我在这个 sprint 中完成这项工作）。然后我会使用 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>

想法？

【问题讨论】：

标签： angularjs wai-aria

【解决方案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>

我会尽快重温这篇文章，以减少它以 Angular 为中心。

【讨论】：

【解决方案2】：

我正在寻找一种使用 aria-describedby 实现动态反馈的方法，通过您的实现，您将面临我一直试图解决的相同问题。如果您没有指出存在多个可能的错误消息，则错误消息只会被评估一次，就好像它是静态的一样（用户必须移动焦点才能获得更新的反馈）。

解决方法是设置多个aria-describedby 值，以空格分隔。即使此时可能没有显示反馈消息，屏幕阅读器也会知道它应该在呈现后自动读取（并且每次更改时，只要列出了每个状态）。

来源：https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/

使用的屏幕阅读器：NVDA

因此，最好的方法是重用您的示例(note that Angular is not my framework of choice)：

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

【讨论】：