HTML无障碍多条件筛选表单设计教程-html教程-PHP中文网

fieldset作为筛选分组容器可靠，但需满足语义正确（legend为首个子元素）、结构规范及样式重置（border:0/padding:0等），并配合aria-describedby、显式label绑定与预置错误容器以保障可访问性。

html无障碍多条件筛选表单设计教程

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 对绑定失效极其敏感，且手指点击容错率低。

必须坚持显式绑定：最低价。隐式嵌套（最低价）在 iOS 上极易因换行、JS 注入节点或 SSR 渲染差异而断开。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

注意细节：

for 和 id 必须逐字符一致：大小写、连字符、空格都不能差
React/Vue 中动态生成 ID 时，确保 htmlFor 和 id 同步更新，别硬编码字符串
用 DevTools 的 “Accessibility” 面板实时验证：label 的 “Name” 是否可读、是否指向正确控件

错误提示怎么写才真能被手机读出来？

不能靠 JS 插入 div 再填文案——很多情况下 TalkBack 根本不播报。错误容器必须预置在 HTML 中，哪怕初始为空。

正确结构示例：

<div id="brand-error" aria-live="polite"></div>

品牌 Apple

提交校验失败后：

用 document.getElementById('brand-error').textContent = '至少选择一个品牌' 更新内容
同时设 aria-invalid="true" 在对应控件上
焦点移到首个错误字段：document.querySelector('input[name="brand"]').focus()

别用 innerHTML 更新错误文案，XSS 风险 + 可访问性树不刷新；也别依赖 CSS opacity: 0 或 pointer-events: none 控制显示，它们会阻断点击和朗读。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！