如何防止屏幕阅读器读取aria-live区域时因输入框获焦中断？

针对你遇到的屏幕阅读器中途停止读取live region消息的问题，以下是几个经过验证的实用方案：

1. 优化Live Region的ARIA属性配置 #

调整live region的aria属性，确保屏幕阅读器能完整识别并播报新增内容，避免片段式读取被焦点操作打断：

<div aria-live="polite" aria-atomic="true" aria-relevant="additions" class="chat-live-region"></div>

• aria-atomic="true"：强制屏幕阅读器读取整个live region的内容，而非仅更新的部分，即使播报中途有焦点变化，也能保证用户听到完整的消息上下文。
• aria-relevant="additions"：明确告知阅读器只关注区域内新增的内容，过滤掉不必要的修改通知，减少干扰。
• aria-live="polite"：保持原有“等待当前操作完成后播报”的逻辑，不会强制打断用户输入，仅在输入间隙完成播报。

2. 延迟焦点返回输入框的时机 #

如果你的业务逻辑需要在消息发送后自动将焦点切回输入框，添加短时间延迟，给屏幕阅读器足够时间完成播报：

function appendNewMessage(messageContent) {
  const liveRegion = document.querySelector('.chat-live-region');
  // 推荐用创建新元素的方式添加消息，避免文本拼接的兼容性问题
  const messageElement = document.createElement('div');
  messageElement.textContent = messageContent;
  liveRegion.appendChild(messageElement);

  // 延迟300ms再将焦点放回输入框，可根据消息长度调整时长（200-500ms区间）
  setTimeout(() => {
    document.getElementById('chat-input-field').focus();
  }, 300);
}

延迟时间的核心是让NVDA完成消息播报后再处理焦点切换，避免焦点抢占导致的播报中断。

3. 谨慎使用aria-live="assertive"（仅适用于高优先级消息） #

如果是必须让用户立刻知晓的关键消息（比如系统警告、错误提示），可以将live region的live级别改为assertive，它会强制屏幕阅读器中断当前操作优先播报：

<div aria-live="assertive" aria-atomic="true" class="critical-live-region"></div>

注意：此属性不要滥用，频繁的强制播报会严重干扰用户的输入体验，仅用于紧急或高优先级场景。

4. 放弃自动焦点切换（推荐给非即时回复场景） #

如果业务允许，不要在消息更新后自动将焦点切回输入框，让用户自主决定何时回到输入操作。这种方式从根源上避免了焦点切换对播报的干扰，用户可以先完整听完新消息，再手动切换到输入框继续操作。

测试建议 #

在NVDA+Firefox环境下测试时，尝试不同长度的消息内容，调整延迟时间，确保短消息和长消息都能被完整播报；同时验证焦点切换的流畅性，避免出现用户操作卡顿的情况。

内容的提问来源于stack exchange，提问作者Raviteja