Question

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

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

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

在FF和chrome中它的工作正常但在IE中它的读取代码如“左括号左括号txtErrorMessage右支撑右括号”即使屏幕上有消息

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

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

我们正在使用角度JS。

如何解决此问题？

Answer 1

尝试使用ng-bind="model.txtErrorMessage"代替{{model.txtErrorMessage}}

Answer 2

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

同样不需要role =“alert”和aria-live =“assertive”。您可以删除role =“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");
 }
}

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

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

JAWS + IE11 + aria活不起作用的时候

3 个答案: