如何让屏幕阅读器在 Angular 或任何单页应用程序中加载新页面时发出通知？

Question

我一直在到处寻找这个问题的最佳解决方案，但我没有找到任何好的解决方案。我希望像 NVDA 或 JAWS 这样的屏幕 readers 在加载时宣布新页面。但在使用箭头键滚动页面时，它不应该检测到此消息。

我尝试了很多东西。

例如，我添加了一个带有 role="alert" and/or aria-live="polite" 的 span 元素，并使用 CSS 隐藏它，并动态地将 innerHtml 添加到该元素屏幕 reader 宣布。但是屏幕 reader 会在使用箭头键滚动页面并再次阅读消息时检测到它。所以设置一个超时函数，在 2 秒后将 innerHtml 设置为空。

以上内容在某些浏览器中运行良好，但在 IE 浏览器和 JAWS 中，当我两次更改 innerHtml 时，它会读取警报两次。与 NVDA 配合良好。

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

我也尝试过使用 [attr.aria-label] 属性绑定到 ts 文件中的变量。

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

并用我想宣布的消息更改标题变量。但是屏幕 reader 将在滚动时始终检测到此 div 元素。

请帮忙

Answer 1

angular 提供了一项 'Title' 服务，您可以使用它。

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

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

constructor(private title: Title){}

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

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

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

如何让屏幕阅读器在 Angular 或任何单页应用程序中加载新页面时发出通知？

How to make screen readers announce when a new page is loaded in Angular or any single page apps?

html

javascript

screen-readers

wai-aria

angular