屏幕阅读器aria live断言文本被打断

Question

$('#firstButton').focus();

<div id="liveRegion" aria-live="assertive">
  This is a very long text
</div>
<button id="firstButton">First Button</button>

我在可访问性问题上是一个新手。我基本上有一个按钮，希望将焦点放在页面加载上，但我也希望liveRegion中的屏幕阅读器可以拾取文本。 现在，页面加载期间的某个时刻文本将被插入，并且焦点将移至该按钮上。 有没有办法让屏幕阅读器不被打扰？

Answer 1

活动区域起初可能会令人困惑。活动区域的目的是宣布对该页面的更改，而不是宣布页面加载信息。页面加载后，如果页面上发生了某些更改（例如，元素中的文本或添加了新元素），则可以使用aria-live属性来宣布这些更改。

大多数页面在加载时不会宣布任何内容。屏幕阅读器用户将听到页面正在加载，完成后（通常在屏幕阅读器中会有声音提示，让您知道页面是否仍在加载或完成），通常会先声明页面标题，然后读取具有初始焦点的任何对象。

如果在页面加载后确实需要阅读某些内容，那么它可能应该是最初的重点。但请注意，因为将重点放在诸如段落（<p>）或非语义元素（<div>）之类的非交互式元素上可能会造成混淆。如果必须这样做，请确保该元素具有tabindex="-1"，以使该元素不会处于正常的键盘焦点顺序。

Answer 2

因此，无法阻止按钮获得焦点来阅读文本。 何时说什么的优先级顺序在很大程度上取决于屏幕阅读器/浏览器/操作系统的组合，但是通常，关注焦点的元素要优先于任何活动区域，包括断言。

您可以做的是，将焦点移到按钮上后，使实时区域断言文本出现。 这样便有更大的机会可以不间断地宣布。

在任何情况下，并非在所有平台上都可靠地读取页面加载时存在的活动区域。 为了确保可以有效说出它，请在页面完全加载完毕后将其显示在DOM中。