如何向视障用户告知searchbox输入内容对应的suggestions列表已加载

核心通过WAI-ARIA标准属性实现，不需要额外修改原有交互逻辑，可直接适配主流读屏软件。 #

1. 新增视觉隐藏的aria-live状态通知区域 #

在页面中提前插入一个仅读屏软件可识别的隐藏区域，用于播报动态状态：

/* 通用视觉隐藏类，仅读屏软件可识别 */
.visually-hidden {
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  position: absolute;
}

<div class="visually-hidden" aria-live="polite" aria-atomic="true" id="autocomplete-status"></div>

• aria-live="polite" 会在用户输入暂停时自动播报内容，不会打断当前输入操作
• aria-atomic="true" 会播报整个区域的完整内容，不会只识别局部变化的字符
  当建议列表加载完成并展示时，往#autocomplete-status中插入文本：共找到N条匹配建议，可使用上下方向键选择，读屏软件会自动朗读该提示。如果没有匹配建议，也可以插入未找到匹配建议做同步提示。

2. 给组件补充标准ARIA语义属性 #

在现有组件结构上直接加属性即可，无需修改原有业务逻辑：

• 给搜索输入框添加aria-autocomplete="list"属性，告知读屏软件当前输入框带下拉建议列表
• 给搜索输入框添加aria-controls="suggest-list"属性，属性值对应建议列表的DOM ID，建立输入框和建议列表的关联
• 给搜索输入框添加aria-expanded属性，建议列表加载展示时设为true，列表隐藏时设为false，读屏软件会自动识别状态变化
• 建议列表容器添加role="listbox"属性，每个建议项添加role="option"属性，符合无障碍组件的标准语义

注意事项 #

不要仅用颜色闪烁、弹窗这类纯视觉的提示方式，所有状态变化都要同步更新ARIA属性或aria-live区域内容，确保视障用户可以同步获取信息。

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