使屏幕阅读器在 Angular 应用程序中读取新页面标题

Posted 2023-03-05

【中文标题】使屏幕阅读器在 Angular 应用程序中读取新页面标题

【英文标题】：Make screen reader read new page title in Angular app

【发布时间】：2016-12-15 22:44:25

【问题描述】：

我有一个 Angular 应用程序，我在其中使用 $stateChangeSuccess 事件处理程序设置每个页面的标题。当我更改页面时，标题正在更改。

问题：从可访问性的角度来看，当用户更改我的应用程序中的页面时，应该大声读出新标题，以便他/她知道他在哪个页面上。但是，由于这是一个单页应用程序，因此屏幕阅读器不会重新读取标题。

我已阅读 Stack Overflow 上有关屏幕阅读器的其他问题，但他们没有回答我的问题。

请帮忙。谢谢。

【问题讨论】：

我在某处阅读以使用aria-live="assertive"，因此屏幕阅读器将被中断并强制阅读我尝试使用<title> 标签上的aria-live="assertive" 属性。但是屏幕阅读器在更改时不会阅读新的标题文本。

【参考方案1】：

为此，您可以使用aria-label 指令，如here 所示，然后在需要出现时修改元素的可见性。

【讨论】：

为了清楚起见，我说的是<title> 标签，而不是我用作标题的任何 元素。