React中如何关联表单与过滤结果表格且符合WCAG规范

关于你的两个问题解答如下： #

1. 输入框和搜索按钮放在form标签内的做法是否正确？

是完全正确的，这是符合HTML语义和WCAG标准的基础实现：

• 原生支持回车提交等默认表单行为，不用额外写JS兼容键盘操作
• 屏幕阅读器会自动识别这是一组可提交的表单控件，符合可访问性基础要求

2. 表格是否只需要放在form下方即可，还是需要额外关联？

仅放在form下方是不够的，必须补充关联逻辑才能满足WCAG标准，尤其是针对屏幕阅读器用户，他们不会默认识别出下方表格是表单的提交结果，需要做以下改造：

• 给包裹表格的容器添加aria-live="polite"属性，过滤结果更新时屏幕阅读器会自动播报更新后的结果信息，无需用户手动定位内容
• 建立表单和结果区域的明确关联：给结果容器设置唯一id，同时给form添加aria-describedby="结果容器id"属性，用户聚焦到表单控件时，屏幕阅读器会告知提交表单会更新对应区域的内容
• 建议给结果区域增加清晰的结果说明，比如<div id="result-count">共匹配到 N 条结果</div>，将这个说明元素的id也加入form的aria-describedby属性列表，同时把该元素放在aria-live容器内，过滤后自动播报结果数量

你现有的DOM结构不需要做调整，补充上述属性即可符合要求，参考改造后的代码结构：

<form aria-describedby="filter-result result-count">
  <label for="filter-input">表格内容过滤</label>
  <input type="text" id="filter-input" name="filter">
  <button type="submit">搜索</button>
</form>

<div aria-live="polite" id="filter-result">
  <div id="result-count">共匹配到 X 条结果</div>
  <table>
    <!-- 表格内容 -->
  </table>
</div>

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