$('#firstButton').focus();<div id="liveRegion" aria-live="assertive">
This is a very long text
</div>
<button id="firstButton">First Button</button>我是可访问性问题的新手。我基本上有一个按钮，我希望将焦点放在页面加载上，但我也希望 liveRegion 中的屏幕阅读器可以拾取文本。 现在，文本将在页面加载期间的某个时间点被中断，并且焦点转到按钮。 有没有办法让屏幕阅读器不被打断？
【问题讨论】：
标签： javascript html accessibility wcag wcag2.0
直播区域起初可能会令人困惑。实时区域的目的是公布页面的更改，而不是公布页面加载信息。页面加载后，如果页面发生变化，例如元素中的文本或添加了新元素，如果使用了aria-live 属性，则可以宣布这些变化。
大多数页面在加载时不会宣布任何内容。屏幕阅读器用户会听到页面正在加载，当它完成时（通常在屏幕阅读器中有一个声音提示，让您知道页面是否仍在加载或是否完成），通常会宣布页面标题，然后读取任何具有初始焦点的对象。
如果您确实需要在页面加载后阅读某些内容，那么它可能应该具有初始焦点。但要小心，因为将焦点放在非交互式元素上，例如段落 (<p>) 或非语义元素 (<div>) 可能会造成混淆。如果你不得不求助，请确保该元素具有tabindex="-1"，这样该元素就不会处于正常的键盘焦点顺序中。
【讨论】：
因此，无法通过按钮获得焦点来阻止阅读文本。 说什么的优先顺序很大程度上取决于屏幕阅读器/浏览器/操作系统的组合，但通常，获得焦点的元素优先于任何活动区域，包括断言。
您可以做的是在焦点移动到按钮后显示活动区域断言文本。 届时，它有更大的机会被不间断地宣布。
无论如何，页面加载时存在的活动区域并不是在所有平台上都能可靠地读取。 为确保它能够被有效地朗读，请在页面完全加载完成后让它出现在 DOM 中。
【讨论】：