fieldset作为筛选分组容器可靠，但需满足语义正确（legend为首个子元素）、结构规范及样式重置（border:0/padding:0等），并配合aria-describedby、显式label绑定与预置错误容器以保障可访问性。
fieldset 作为筛选分组容器是否可靠？
可靠，但必须满足语义和 DOM 结构前提。浏览器原生支持 fieldset 表示“一组相关控件”，搜索过滤器里“价格区间”“品牌”“发货地”这类并列维度，天然匹配该语义。不推荐用 div 替代——后者无法通过 disabled 属性递归禁用子控件，也无法被屏幕阅读器识别为逻辑分组。
常见错误现象：
-
legend不是fieldset的第一个子元素（比如前面加了div或注释），导致语义断裂 - 用
display: none或visibility: hidden隐藏legend，切断无障碍上下文 - 动态插入新
fieldset后没同步设置aria-labelledby，NVDA/TalkBack 无法朗读标题
如何让 fieldset 在视觉上“消失”又不丢语义？
不是隐藏，是重置。默认边框在 Safari 和 Firefox 下表现不一致，仅靠 border: none 不够。
必须全量重置样式：
立即学习“前端免费学习笔记（深入）”；
fieldset {
border: 0;
padding: 0;
margin: 0;
min-inline-size: 0;
}
legend {
padding: 0;
margin: 0;
font-size: 1em;
font-weight: normal;
line-height: 1;
}
如果不需要视觉图题，用 visually-hidden 类包裹 legend 文本（例如 clip-path: inset(100%)），而不是删掉或设 display: none。
label 与 input 的绑定为什么在移动端特别关键？
因为 VoiceOver 和 TalkBack 对绑定失效极其敏感，且手指点击容错率低。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
必须坚持显式绑定：<label for="price-min">最低价</label><input id="price-min" name="price[min]">。隐式嵌套（<label>最低价<input></label>）在 iOS 上极易因换行、JS 注入节点或 SSR 渲染差异而断开。
注意细节：
-
for和id必须逐字符一致：大小写、连字符、空格都不能差 - React/Vue 中动态生成 ID 时，确保
htmlFor和id同步更新，别硬编码字符串 - 用 DevTools 的 “Accessibility” 面板实时验证：
label的 “Name” 是否可读、是否指向正确控件
错误提示怎么写才真能被手机读出来？
不能靠 JS 插入 div 再填文案——很多情况下 TalkBack 根本不播报。错误容器必须预置在 HTML 中，哪怕初始为空。
正确结构示例：
<div id="brand-error" aria-live="polite"></div> <fieldset aria-describedby="brand-error"> <legend>品牌</legend> <label><input type="checkbox" name="brand" value="apple"> Apple</label> </fieldset>
提交校验失败后：
- 用
document.getElementById('brand-error').textContent = '至少选择一个品牌'更新内容 - 同时设
aria-invalid="true"在对应控件上 - 焦点移到首个错误字段：
document.querySelector('input[name="brand"]').focus()
别用 innerHTML 更新错误文案，XSS 风险 + 可访问性树不刷新；也别依赖 CSS opacity: 0 或 pointer-events: none 控制显示，它们会阻断点击和朗读。
