legend必须是fieldset的第一个子元素，否则可访问性失效；不可包裹、不可隐藏、不可条件渲染；fieldset内需含可聚焦控件；动态渲染时须确保结构不被破坏。

legend 不是装饰性标题，它是 fieldset 的语义锚点——放错位置、加错包裹、隐藏不当，整组表单控件的可访问性就失效了。

legend 必须是 fieldset 的第一个子元素

浏览器和屏幕阅读器（NVDA/VoiceOver）只认一种结构：fieldset 开头紧跟着 legend。中间插任何东西都会断链。

• 地址
  → legend 不是首子节点，部分 Safari 版本直接跳过播报
• 支付方式
  → legend 被包裹，读屏器忽略分组语义
• React/Vue 中用 {show &&
  } 会导致它被条件渲染“挤”到非首位，等价于缺失
• 正确写法只有一种：
  收货地址
  ，无空格、无注释、无嵌套标签

别用 display: none 隐藏 legend 文本

视觉上不想显示标题？display: none 或 visibility: hidden 会彻底移除其在可访问性树中的存在，等于没写 legend。

• 安全做法是用标准视觉隐藏类，保留在 DOM 中且可被读屏器识别
• 例如：

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

• 然后：
  发票信息
• 注意：这不是常规推荐操作，仅适用于已有视觉标题、需避免冗余播报的极少数场景

fieldset 内必须有可聚焦控件才能激活分组语义

只包

DeepBI DHTML 页面生成器

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

下载

或说明文字的 fieldset，浏览器可能不渲染边框，辅助技术也感知不到这是个“组”。

• 有效子元素包括：input、select、textarea、button、input[type="radio"] 等可交互控件
• 错误示例：
  提示

  请核对信息

  → 对读屏器基本无效
• 纯说明内容建议直接用
  + CSS，别硬套 fieldset
• fieldset[disabled] 只对直属可聚焦控件生效，不穿透嵌套层级（如
  中的 input 不受影响）

动态渲染时最容易漏掉的 DOM 结构断裂点

服务端模板或前端框架里，legend 极易因条件分支没覆盖全而变成孤儿节点——HTML 验证器难发现，但 axe-core 会立刻报 aria-required-parent 错误。

• Jinja2/Twig 模板中，{% if show_billing %} 只包了 input，没把 legend 一起包进去 → 渲染出孤立 legend 节点
• Vue/React 中用 v-if 或 {show && } 包整个 fieldset，但忘了确保 legend 恒为首个子节点
• UI 框架（如 Ant Design）常在内部剥离你写的 fieldset 和 legend，导致它不再是直接子节点
• 真正难的不是手写一次正确结构，而是每次动态生成都守住“legend 是 fieldset 第一个子元素”这条线——它卡在语义链最前端，错一点，整组控件的可访问性就断了