Question

我正在开发一个需要符合Aria标准的Angular应用程序。标记为我们需要在输入字段中添加aria-describedby属性，这些属性指向相关错误消息元素的id属性。

我们的表单目前设置如下（这是一种伪代码，并且有一个名称属性为od＆＃34; form＆＃34;的表单）：

<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当错误相关时。这证明是有问题的，因为试图编写一个监视模型的有效性和其他状态的指令非常困难/复杂。

我想简化这个（希望这将有助于我在这个sprint中完成这项工作），方法是添加一个带有id的周围元素，并直接指向它（永久）。然后我会使用ng-if添加从DOM中删除错误。

以下文章表明这是有效的（在上一节标题为＆＃34;方法提供上下文敏感的名称/描述文字＆＃34;）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>

我会尽快重新审视这篇文章，以减少以角度为中心。

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

aria-Angby网站

2 个答案: