javascript - 新组件加载 Angular 后焦点不会改变

我正在尝试修复Angular2 Web应用程序中屏幕阅读器的可访问性错误。在Chrome中，加载componentA（Before下的代码）时，焦点是整个浏览器窗口，并且屏幕阅读器讲述人宣布了componentA页面的标题。但是，在Edge中，焦点与上一页保持不变，从而导致标题未宣布。目标是无论在哪个浏览器中，标题都应该发布一次，并且只能发布一次。

我通过修改componentA.html（After之后的代码）尝试了该解决方案，并将焦点设置为ngOnInit（）中的componentA-id。即：

document.getElementById('componentA-id').focus();

现在在Edge中，讲述人可以正确地关注整个componentA并宣布componentA的标题。但是，在Chrome中，整个窗口被聚焦，componentA也被聚焦，这导致标题被两次命名。有什么方法可以禁用Chrome焦点，或者有其他方法可以解决此问题以实现我的目标？

之前：
componentA.html

<div>
    <div title="ComponentA Title" role="banner">ComponentA Title</div>
    ...
    ...
</div>

后：
componentA.html

<div aria-label="ComponentA Title" id="componentA-id" tabindex="-1">
    <div title="ComponentA Title">ComponentA Title</div>
    ...
    ...
</div>

最佳答案

您有一个单页应用程序吗？你说：


  “ ...焦点保持与上一页相同”


这让我觉得您正在将新内容加载到当前页面中，例如单页面应用程序。

如果您要更新页面标题（对于单页面应用程序的屏幕阅读器来说是一件好事），由于屏幕阅读器不知道您更新了页面的某些内容，因此不必宣布新的页面标题。 。如果页面被重新加载，标题将被读取。

要读取页面标题，您需要更新将aria-live设置为“礼让”的元素。该元素可以在视觉上隐藏，以便只有屏幕阅读器才能知道。

<div class="sr-only" aria-live="polite"></div>

（有关“仅sr”类的信息，请参见What is sr-only in Bootstrap 3?）

更新页面时，将页面标题文本插入

中，如下所示：

<div class="sr-only" aria-live="polite">ComponentA Title</div>

屏幕阅读器将阅读新文本，您无需将重点放在新文本上。