如何使屏幕阅读器宣布何时在Angular或任何单页应用程序中加载了新页面？

编程问答 2022-10-27

问题描述

我一直在到处寻找针对此问题的最佳解决方案，但找不到任何好的解决方案。 我希望诸如NVDA或JAWS之类的屏幕阅读器在加载时宣布新页面。但是使用箭头键滚动页面时，它不应检测到此消息。

我尝试了很多事情。

例如，我添加了一个具有role =“ alert”和/或aria-live =“ polite”的span元素，并使用CSS将其隐藏，并向该元素动态添加了innerHtml以便屏幕阅读器宣布。但是，屏幕阅读器会在使用箭头键滚动浏览页面时检测到它，并再次阅读该消息。 因此，设置一个超时功能，将在2秒后将innerHtml设置为空。

以上操作在某些浏览器中工作正常，但在IE浏览器和JAWS中，当我两次更改innerHtml时，它将读取警报两次。与NVDA配合正常。

但是我想知道是否有更好的方法。

我还尝试将[attr.aria-label]属性绑定到ts文件中的变量。

<div [attr.aria-label]="title" role="alert"></div>

并使用我要宣布的消息更改title变量。但是屏幕阅读器将始终在滚动时检测到该div元素。

请帮助。

解决方法

angular 提供了一个“标题”服务，您可以使用它。

这基本上会将标题设置为浏览器选项卡中的整个页面，这将使屏幕阅读器在加载新页面时大声朗读标题。

import { Title } from '@angular/platform-browser';

constructor(private title: Title){}

ngOnInit() {
  this.title.setTitle('Your Title for the page');
}

注意：HTML 模板中不需要任何内容​​。只需完成此操作即可解决您的问题。

每个组件都有自己的有意义的标题。不像 page1、page2 等， 但例如客户详细信息页面、客户资料页面等

angularangularhtmljavascriptscreen-readerswai-aria