JAWS + IE11 + aria live 时不工作

Question

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

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

我们添加了 role='alert' 和 aria-live='assertive' 来阅读那些 activity 消息。

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

如何解决这个问题？

Answer 1

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

Answer 2

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

也不需要 role="alert" 和 aria-live="assertive"。您可以删除角色="alert"。 JAWS + IE 倾向于多次阅读此组合。

Answer 3

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

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

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

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

JAWS + IE11 + aria live 时不工作

JAWS + IE11 + aria live not working when

wai-aria

angularjs

jaws-screen-reader