label 加 hidden 会彻底移除其在渲染树和可访问性树中的存在，导致与 input 的语义关联断裂，破坏键盘聚焦和屏幕阅读器支持；应改用 css 视觉隐藏方案保全语义。
label 标签本身不支持 hidden 属性作为“隐藏 label”的推荐做法——加了 hidden，整个 label 会从渲染树、可访问性树和表单关联链路中彻底消失，导致它包裹或绑定的 input 失去语义关联，键盘用户无法通过点击 label 聚焦输入框，屏幕阅读器也读不到提示文本。
为什么给 label 加 hidden 会破坏表单可用性
label 的核心作用是建立可访问性桥梁：label 和控件之间不是视觉装饰关系，而是 DOM 级别绑定。一旦加上 hidden：
-
label元素自身被移出可访问性树 → 屏幕阅读器完全跳过，不会朗读其文本 - 显式绑定（
for="xxx"）失效：浏览器不再将该label与对应id的控件关联 - 隐式包裹（
<label><input></label>）同样失效：整个label子树不可见、不可聚焦，内部input失去 label 上下文 - 即使
input本身可见，它的aria-labelledby或隐含的 label 关系已断裂，WCAG 评估会报错
想“视觉隐藏但保留语义”，该用什么替代 hidden
真正需要的是“对人不可见，但对辅助技术可见”——这恰恰是 label 最不该被隐藏的场景。正确方案是用 CSS 实现视觉隐藏，同时保全 DOM 结构和语义：
- 用
position: absolute; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;把label移出视口，但保留其在可访问性树中的位置 - 避免
display: none或visibility: hidden：前者让 label 完全退出无障碍树，后者仍占布局空间且可能被误聚焦 - 若 label 内容纯属辅助说明（如错误提示），可改用
aria-describedby指向一个带hidden的div—— 这是合法用法，因为aria-describedby明确允许引用隐藏元素
label 里嵌套 input type="hidden" 是常见误用
有人试图写成 <label hidden><input type="hidden" name="token"></label>，这存在双重问题：
-
input[type="hidden"]本就不支持label关联 —— 浏览器规范明确排除它，任何绑定都无效 -
label加了hidden后，即使里面是普通input，整个语义链也断了 - 真正要传隐藏数据，直接写
<input type="hidden" name="token" value="xxx">即可，无需包在label里
唯一能安全加 hidden 的 label 场景
极少数情况：该 label 确实“当前逻辑上不存在”，且不参与任何表单流程。例如：
- 服务端预渲染一个待激活的步骤区域，其中
label暂未生效，后续 JS 会替换整个 DOM 片段（而非仅控制显隐） - 用作离屏模板（如
<template></template>内部），尚未挂载到真实 DOM
但注意：只要 label 出现在活跃 DOM 中并意图关联控件，加 hidden 就是反模式。复杂点在于，很多人混淆了“视觉隐藏”和“语义剔除”——hidden 做的是后者，而表单 label 的存在价值恰恰在语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
