javascript - 屏幕阅读器 aria 实时断言文本被中断

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"这样该元素就不会处于正常的键盘焦点顺序。