筛选复选框列表的输入框需配置哪些WAI-ARIA标签？

一、先做好原生语义化（减少ARIA依赖的基础） #

优先用原生HTML标记，这是可访问性的核心：

• 筛选输入框用 <input type="search">，比普通text类型更有语义，屏幕阅读器会直接识别为搜索/筛选控件。
• 把整个筛选区+复选框组用 <fieldset> 包裹，搭配 <legend> 说明组件用途，比如 <legend>筛选并选择目标项目</legend>，让用户一眼（或屏幕阅读器一读）就知道这个区域是干嘛的。
• 每个复选框必须和 <label> 绑定，要么把复选框放在标签里，要么用for属性关联ID，确保点击标签能选中复选框，同时屏幕阅读器能正确读取复选框的描述文本。

二、需要补充的WAI-ARIA配置（处理动态筛选的可访问性） #

原生标记搞定基础，但动态筛选属于内容实时变化的场景，得加ARIA来补全：

1. 筛选输入框的ARIA属性 #

• aria-label/aria-labelledby：如果输入框没有可见的文字标签（只有占位符），用aria-label="筛选项目列表"直接描述功能；如果有可见标签（比如“筛选：”），就用aria-labelledby关联标签ID，示例：

  <label id="filter-title">筛选项目：</label>
  <input type="search" aria-labelledby="filter-title">
  

• aria-controls：指定输入框控制的复选框列表容器ID，让屏幕阅读器知道这个输入框会影响哪个区域的内容，比如：

  <input type="search" aria-controls="checkbox-group">
  <ul id="checkbox-group">
    <!-- 复选框列表 -->
  </ul>
  

• aria-live：这是最关键的部分——当筛选结果变化时，要实时告知用户。你可以在复选框列表容器上直接加aria-live="polite"，这样列表内容更新（显示/隐藏复选框）时，屏幕阅读器会自动朗读变化；或者单独做一个状态提示元素，专门播报结果数量，示例：

  <div aria-live="polite" id="filter-status"></div>
  

  然后用JS更新这个元素的文本，比如“已显示3个匹配项目”，比直接朗读列表内容更清晰。

2. 复选框列表的注意事项 #

• 被筛选隐藏的复选框，必须用hidden属性或display: none来隐藏，这两种方式会被屏幕阅读器忽略；别用visibility: hidden或opacity: 0，这些元素仍会被读取，造成混乱。
• 不需要给单个复选框额外加ARIA，只要做好和标签的绑定就行。

三、仅靠合理标记能不用WAI-ARIA吗？ #

不行。原生语义化能解决静态场景的可访问性，但动态筛选带来的内容实时变化，屏幕阅读器是无法自动感知的——必须靠aria-live来告知用户结果更新；另外aria-controls能明确输入框和列表的控制关系，让用户更清楚交互逻辑。

总的来说，先把原生语义化做扎实，再补充必要的ARIA属性，两者结合才能让这个筛选组件对所有用户都友好。

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