Combobox异步加载状态的辅助技术无障碍适配问题咨询

问题分析 #

首先得明确：role="status"本身是用来做静默播报的（不需要焦点），但它的元素默认是可被焦点访问的，这就是你遇到的问题根源——脱离combobox上下文后，这个状态提示就变得无意义了。

解决方案思路 #

1. 把状态提示元素嵌套进combobox的语义范围内

你可以把这个状态元素直接放到combobox的关联区域里，比如作为下拉列表（<ul>）的子元素，或者和combobox的输入框、下拉列表放在同一个带role="combobox"的容器里。这样一来，当辅助技术访问到这个状态元素时，能通过上下文关联到combobox，播报的时候会带上组件的上下文信息，不会让用户困惑。

2. 用aria-live替代role="status"（更精准控制）

role="status"其实是aria-live="polite"和aria-atomic="false"的组合，我们可以自己用aria-live来定制：

• 给状态元素设置aria-live="polite"，确保状态变化时能被播报
• 加上aria-atomic="true"，让屏幕阅读器播报整个状态的上下文，而不是只播报变化的部分
• 关键：用CSS把它移出可视区域，同时保持它在DOM里的语义关联（绝对不能用aria-hidden="true"，否则会导致播报失效）：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

把这个类加给状态元素，这样视觉上不可见，也不会被焦点访问到，但live区域的播报功能依然正常。你可以把这个元素嵌套在combobox的容器里，让语义上下文更清晰，比如：

<div role="combobox" aria-expanded="true">
  <input type="text" aria-autocomplete="list" aria-controls="options-list">
  <ul id="options-list" role="listbox">
    <!-- 选项元素 -->
  </ul>
  <div class="visually-hidden" aria-live="polite" aria-atomic="true">
    <!-- 这里动态更新状态文本，比如“正在加载更多选项”“已加载20个选项” -->
  </div>
</div>

这样状态变化时，屏幕阅读器会播报完整的上下文，而且用户没法把焦点移到这个元素上，只会在状态变化时收到提示，不会在浏览页面时意外触发。

3. 针对不同加载场景的文本优化

• 初始加载时：可以把状态文本改成“正在加载下拉选项”，明确关联combobox的初始加载动作
• 滚动到底部加载更多时：改成“正在加载更多下拉选项”，让用户清楚是当前列表的追加加载
• 加载完成后：建议不要用无意义的“加载完成”，换成更有价值的信息，比如“已加载25个选项”，或者如果加载数量没有变化（比如已经到底了），可以直接不播报，避免冗余提示

4. 多工具组合测试

一定要用不同的屏幕阅读器+浏览器组合测试（比如NVDA+Chrome、VoiceOver+Safari、JAWS+Edge），不同组合对ARIA属性的支持细节可能有差异，确保你的方案在主流环境下都能正常工作。

内容来源于stack exchange