必须为 input[type="search"] 显式绑定 label，因 placeholder 非语义标签，无法替代；for 与 id 必须严格匹配，嵌套 label 更安全，复杂场景用 aria-labelledby 关联多元素。
label 必须显式绑定 input[type="search"]，不能只靠视觉排版“看起来像标签”——否则移动端点不中、屏幕阅读器读不出、键盘 Tab 跳过该控件。
为什么 search 输入框特别容易漏掉 label
开发者常误以为 input[type="search"] 自带“搜索”文字提示（比如浏览器渲染的放大镜图标或 placeholder），就省略 label。但 placeholder 不是标签：它会消失、不被屏幕阅读器稳定朗读、无法触发聚焦。没有 label 的搜索框，在无障碍测试中直接失败，且 iOS Safari 下点击文字区域常无响应。
-
placeholder="搜索"≠label；它只是临时提示，语义上不可替代 - 某些 UI 框架（如 Bootstrap）的 search 组件默认不生成
label，需手动补全 - 若用 icon + input 布局（如
<svg></svg><input>），label仍需存在并正确关联，不能靠 CSS 伪元素模拟
for 和 id 必须严格匹配，大小写/连字符/空格都不能错
这是搜索表单中最常翻车的一环。例如：label[for="search-input"] 对应 input[id="searchInput"] —— 多一个大写、少一个短横，绑定即失效。错误现象包括：点击“搜索”文字无反应、VoiceOver 读成 “text field” 而非 “搜索输入框”。
- id 值必须全局唯一；模板循环生成多个搜索框时，务必动态拼接唯一 id（如
id="header-search-1"） - 避免用 class 名、name 值或 data-* 属性凑合代替 id
- 可加简单 JS 验证：
document.querySelector('label[for]').forEach(l => { if (!document.getElementById(l.htmlFor)) console.warn('orphaned label:', l) })
嵌套写法更安全，但要注意移动端点击穿透风险
把 input[type="search"] 直接包进 label 是最简方案，无需 for/id，也杜绝匹配错误。但要注意：若 label 内含其他交互元素（如清空按钮 button[type="reset"] 或搜索图标 svg），部分 Android 浏览器可能忽略点击事件或触发两次 focus。
- 推荐结构：
<label>搜索<input type="search" name="q"></label> - 若需右侧清空按钮，用
<div role="search"> <label>...</label><button type="reset"></button> </div>，而非塞进同一label - 禁用
label内部的pointer-events: none或user-select: none，否则点击失效
复杂搜索场景必须用 aria-labelledby，不能硬套 for
当搜索框上方有独立标题（如 H2）、旁边有筛选下拉（select）、下方有“按文章/用户搜索”说明文字时，单一 for 已无法覆盖全部语义。此时必须用 aria-labelledby 引用多个 id，让屏幕阅读器按顺序朗读完整上下文。
- 示例：
<h2 id="search-title">站内搜索</h2> <p id="search-hint">支持关键词、作者名、标签</p> <input type="search" aria-labelledby="search-title search-hint"> -
aria-labelledby优先级高于for，二者不要共存 - 所有被引用的 id 必须存在且未设
aria-hidden="true"或display: none - 旧版 IE 不支持
aria-labelledby，但当前已无实际兼容压力（IE 已终止支持）
最易被忽略的是：搜索框常放在页眉固定位置，DOM 结构远离主内容流，导致 id 被意外复用或 aria-labelledby 引用的元素被 JS 动态移除。上线前务必用 Chrome 的 Lighthouse「Accessibility」审计和 VoiceOver 实测点击路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
