必须作为的第一个子元素且仅含纯文本，否则屏幕阅读器无法正确识别分组语义，导致跳读、重复或忽略；DOM位置错位或样式误用（如display:none、order）会破坏可访问性与WCAG合规性。
<legend></legend> 必须作为 <code><fieldset></fieldset> 的第一个子元素，且只能是纯文本；缺它，分组就失去语义和可访问性支撑。
为什么 <legend></legend> 不能省略或放错位置
屏幕阅读器依赖 <legend></legend> 的 DOM 位置来宣告整组控件的用途。如果它不在 <fieldset></fieldset> 开头，或被 <h3></h3>、<div> 包裹，NVDA 或 VoiceOver 可能跳过、重复读、甚至完全忽略该分组。
<ul>
<li>浏览器解析时，<code><legend></legend> 不在首位 → 部分辅助技术不识别为标题，WCAG 检查直接报 fieldset-missing-legend
<legend><h3>地址信息</h3></legend> → <h3></h3> 会干扰可访问名称计算，读屏器只读“地址信息”或干脆静音order 或 position: absolute 移动 <legend></legend> → 它脱离语义流，键盘焦点顺序错乱
<legend></legend> 的样式控制要注意什么
默认渲染中，<legend></legend> 会“嵌入”边框左上角，但这个效果是浏览器 UA 样式实现的，不是语义本身。你可以改，但得守住两个底线：不破坏 DOM 顺序、不隐藏其可访问性。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 想右对齐？用
text-align: right或margin-left: auto，别碰flex排序 - 要视觉隐藏但保留语义？用标准
sr-only类（position: absolute; width: 1px;等），别写display: none或visibility: hidden - 禁用整组时，
<legend></legend>不响应disabled属性——这是对的，它本就不该被禁用；灰掉文字颜色需靠fieldset[disabled] legend单独加opacity或color
服务端渲染或条件分组时容易漏掉的点
模板里动态生成字段组，常因逻辑分支没覆盖完整，导致 <legend></legend> 缺失或 <fieldset></fieldset> 开闭标签不匹配。这类结构断裂在 SSR 场景下特别隐蔽。
- Vue/React 中用 v-if / conditional rendering 包裹整个
<fieldset></fieldset>，但忘了确保<legend></legend>总在内部最前 - 后端模板（如 Jinja2、Twig）中，
{% if show_billing %}只包了 input，没把<legend></legend>一起包进去 → 渲染出孤立的<legend></legend>，HTML 验证失败 - 自动化测试（如 axe-core）会报
aria-required-parent错误：因为<legend></legend>被解析为孤儿节点，而非<fieldset></fieldset>的合法子元素
<legend></legend> 看似简单，但它卡在语义链最前端——DOM 位置错一毫，可访问性就断一截；样式动一寸，读屏体验就偏一分。
