Jaws 不读取错误信息答案

【问题标题】：Jaws doesn't read error messageJaws 不读取错误信息
【发布时间】：2016-10-20 13:44:43
【问题描述】：

我正在使用 angularjs 并尝试使网站易于访问。当用户没有输入或忘记输入必填字段时，jaws 不会读出错误消息。我尝试将 role="alert" 添加到 div 但它似乎不喜欢它。任何建议

   <div aria-type-label="{{'some:error'}}">
   <span role="alert" class="error-message">Error</span>
   </div>

【问题讨论】：

标签： angularjs jaws-screen-reader

【解决方案1】：

Jaws 和浏览器正在寻找更新的内容以发出警报，因此我发现我必须完全添加和删除数据才能使警报始终如一地工作。例如，我在错误消失时删除了文本，并在出现错误时将文本放回原处。这可以通过几种方式完成。一，使用ng-if={{error}}，如果没有错误，HTML将从DOM中删除，一旦出现错误，就会放回DOM中。

另一种方法是在没有错误时将errorMessage值设置为空字符串，或者在有错误时将错误消息设置为。这样 DOM 中的文本实际上会发生变化，从而产生警报。

使用上述两种方法的可能示例：

<input name="theTextInput" type="text" ng-model="filled" placeholder="Add something"/>
<div role="alert" ng-if="filled" aria-type-label="">
   <span class="error-message">{{message}}</span>
</div>
<span class="sr-only" style="display: none;">{{message = "Has Error"}}</span>

Plunker

注意：这在 2016 年 10 月和 2016 年 11 月在 Chrome 中有效，但今天看起来它目前没有发出警报。仍然适用于 Firefox。

【讨论】：

【解决方案2】：

你必须同时使用 aria- describe by 和 role alert。请看：

<input type="textbox" id="yourField" aria-describedby="yourFieldError">
<span role="alert" data-bind="visible:yourCondition" class="error-message" id="yourFieldError">Error</span>

希望它会有所帮助。

【讨论】：