JAWS + IE11 + aria live 不工作时答案

【问题标题】：JAWS + IE11 + aria live not working whenJAWS + IE11 + aria live 不工作时
【发布时间】：2020-08-05 01:03:59
【问题描述】：

我们正在向我们的 SPA 网站添加 ARIA 支持。

在应用程序中，我们有一个活动区域，我们根据验证显示来自服务器的动态消息。

我们添加了 role='alert' 和 aria-live='assertive' 来读取这些活动消息。

在 FF 和 chrome 中它工作正常，但在 IE 中它的读取代码如“left-brace left-brace txtErrorMessage right-brace right-brace”，即使屏幕上有消息

<div role="alert" aria-live="assertive">
    <p class="scan-complete-text-auto">
        {{model.txtErrorMessage}}
    </p>
</div>

这里 txtErrorMessage 将从 api 结果中获取填充运行时。

我们正在使用 Angular JS。

如何解决这个问题？

【问题讨论】：

标签： angularjs wai-aria jaws-screen-reader

【解决方案1】：

尝试使用ng-bind="model.txtErrorMessage" 而不是{{model.txtErrorMessage}}

【讨论】：

你的解决方案也解决了我的一个问题
我有一个问题。如果我们有如下表达式，那么如何使用 ng-bind？ <p class="font-bold">{{'totalView.updatedTotalLabel' | i18next:model}}</p> 我正在尝试使用国际化（i18n）从资源文件（.json 文件）中获取标签
没关系我已经使用下面的行<p class="font-bold" ng-bind="'totalView.updatedTotalLabel' | i18next:model"</p>

【解决方案2】：

尝试使用 ng-show 或 ng-hide 来隐藏 div，直到您准备好消息。可以检查消息长度以显示或隐藏 div 本身。这将解决问题。

也不需要 role="alert" 和 aria-live="assertive"。您可以删除角色 =“警报”。对于这种组合，JAWS + IE 往往会多次阅读。

【讨论】：

【解决方案3】：

Angular 提供了内置的 CDK API 来处理这种情况。 https://material.angular.io/cdk/a11y/overview#example-1

@Component({...}) 
export class MyComponent {
constructor(liveAnnouncer: LiveAnnouncer) {
  liveAnnouncer.announce("Hey Google");
 }
}

否则您可以保留一个简单的 span 或 div，并以编程方式更新您的消息。

<span
    aria-live="polite"
    class="ada-visuallyhidden"
    [innerHTML]="yourCustomADAMessage"
  ></span>

【讨论】：