javascript - 屏幕阅读器 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 中的屏幕阅读器可以拾取文本。现在，文本将在页面加载期间的某个时间点被打断，焦点转到按钮。有没有办法让屏幕阅读器不被打断？

标签： javascripthtmlaccessibilitywcagwcag2.0

Answer 1

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

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

如果您确实需要在页面加载后阅读某些内容，那么它可能应该具有初始焦点。但要小心，因为将焦点放在非交互元素上，例如段落 ( <p>) 或非语义元素 ( <div>) 可能会造成混淆。如果您不得不求助于它，请确保该元素具有tabindex="-1"，以便该元素不会处于正常的键盘焦点顺序。