role="search" 必须加在包裹整个搜索功能的<form>元素上，不可用于<input>或<div>等其他元素；它需配合aria-label或aria-labelledby提供可访问名称，以确保屏幕阅读器正确识别为独立搜索区域。
role="search" 应该加在哪个 HTML 元素上
必须加在包裹整个搜索功能的 <form> 元素上，而不是 <input>、<div> 或其他容器。这是 WAI-ARIA 规范明确要求的：只有语义为“搜索表单”的顶层表单元素才允许使用 role="search"。
常见错误是把它加在 <div role="search"> 里——这会破坏表单语义，屏幕阅读器可能忽略内部的 <input type="search"> 或提交按钮，甚至无法触发搜索快捷键（如 JAWS 的 Insert+S）。
-
<form role="search">...</form>✅ 正确 -
<div role="search"><form>...</form></div>❌ 剥离了表单语义 -
<form><input role="search"></form>❌role="search"不适用于 input 元素
为什么不能只靠 type="search" 就省略 role="search"
type="search" 是 HTML5 提供的输入类型，它仅影响样式和部分浏览器行为（比如 Safari 自动添加清除按钮），但不提供足够的语义暴露给辅助技术。而 role="search" 是 ARIA 层面的显式声明，告诉屏幕阅读器“这是一个独立的、可跳转的搜索区域”。
实际影响包括：
立即学习“前端免费学习笔记（深入）”；
- 支持
role="search"的屏幕阅读器（NVDA、JAWS、VoiceOver）会把该表单注册为“搜索区域”，用户可通过快捷键（如Ctrl+Alt+S）直接跳转 - 某些 AT 会将
role="search"表单与页面其他<form>区分开，避免混淆主表单和搜索框 - 没有
role="search"时，仅靠<input type="search">，AT 往往只读作“编辑文本”，无法识别其功能意图
配合 aria-label 或 aria-labelledby 才算完整
光有 role="search" 不够，必须提供可访问的名称（accessible name）。否则屏幕阅读器会说“搜索区域”，但不说明“搜什么”——比如是站内搜索？商品搜索？还是文档搜索？
推荐优先用 aria-labelledby 指向一个可见标题：
<form role="search" aria-labelledby="search-heading"> <h2 id="search-heading">站内搜索</h2> <input type="search" name="q" /> <button type="submit">搜索</button> </form>
如果无可见标题，再用 aria-label：
<form role="search" aria-label="商品关键词搜索"> <input type="search" name="q" /> <button type="submit">搜索</button> </form>
- 避免用空的
aria-label=""或纯图标无文字按钮作为唯一 label - 不要依赖 placeholder 文本充当 label——它不是 accessible name，且失焦后即消失
-
aria-label和aria-labelledby二选一即可，不要同时写
注意嵌套结构和重复 role 的问题
一个页面中可以有多个 role="search"，比如顶部全局搜索 + 侧边分类搜索，但每个都必须是独立的 <form>，且各自有唯一可访问名称。
容易被忽略的坑：
- 不要在已有
<form role="search">内部再嵌套另一个role="search"—— ARIA 不允许嵌套相同 landmark role - 不要把导航栏里的搜索框和页脚搜索框共用同一个
id给aria-labelledby，会导致名称错乱 - 某些 CMS 或组件库生成的“搜索组件”可能默认加了
role="search"，但没配aria-label，上线前务必检查 DOM 输出
最常出问题的地方不在“怎么加”，而在“加完有没有名、有没有被正确识别”。用浏览器开发者工具的 Accessibility 面板或 axe DevTools 扫一下，看 role="search" 节点是否带上了 accessible name，比肉眼检查 HTML 更可靠。
