aria-describedby 在 AngularJS 站点中

Question

我正在开发一个需要与 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 应该是当错误相关时添加到其中。这被证明是有问题的，因为尝试编写一个指令来监视模型的有效性和其他状态是相当 tough/complicated.

我想通过添加一个带有 id 的周围元素并直接（永久）指向它 aria-describedby 来简化这个（希望这将帮助我在这个 sprint 中完成它）。然后我会使用 ng-if 添加删除 DOM.

中的错误

以下文章表明这是有效的（在最后一节中，标题为“提供上下文敏感 name/description 文本的方法”）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

我的解决方案现在已经过我们的辅助功能团队的测试，我在上面 post 编辑的解决方案确实有效。因此，重申一下，解决方案如下：

<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>

我会尽快重新审视这个 post 以减少它以 Angular 为中心。

Answer 2

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

解决办法是设置多个aria-describedby值，用space隔开。即使反馈消息目前可能不会显示，屏幕 reader 会知道它应该在呈现后自动读取（并且每次更改时，只要列出每个状态）。

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

使用的屏幕reader：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>

aria-describedby 在 AngularJS 站点中

aria-describedby in an AngularJS site

wai-aria

angularjs