加 role="search" 未必生效，需配合语义化结构：必须包含可聚焦的搜索控件（如 type="search" 输入框或带 aria-label 的按钮），推荐与 form 元素结合使用，避免语义污染和延迟渲染。
role="search" 确实用于标记页面中的搜索区域，但它不是万能的“自动语义增强开关”——浏览器和读屏软件是否真正将其识别为搜索区，取决于结构是否符合可访问性规范。
为什么加了 role="search" 却没被读屏器识别？
常见原因是缺少必要的内部结构支撑。仅给一个 <div> 加 role="search"，但里面没有 <input type="search"> 或明确的搜索按钮（如含 aria-label="搜索" 的 <button>），多数读屏器会忽略该 role。
- 必须至少包含一个可聚焦、语义明确的搜索控件（推荐用
<input type="search">，而非type="text"） - 如果使用
<form>包裹，<form>本身无需再加role="search"（<form>已隐含搜索意图，重复添加反而可能干扰） - 避免套在导航栏或页眉容器上——若整个
<header>都标role="search"，而实际搜索框只是其中一小块，会导致语义污染
role="search" 和 <input type="search"> 能否只选一个？
可以，但推荐两者共存：它们解决不同层面的问题。
-
<input type="search">触发移动端键盘的搜索键、提供默认清除按钮、被部分浏览器用于搜索历史聚合 -
role="search"是对「整个搜索功能区块」的语义声明，比如把输入框 + 按钮 + 提示文字一起包裹，告诉辅助技术：“这一块整体是搜索功能” - 单独用
role="search"不提供输入行为优化；单独用type="search"不声明区域边界——二者互补，不是替代
哪些 HTML 结构搭配 role="search" 最稳妥？
最简且兼容性最好的写法是用 <form> 包裹，并确保有明确提交动作：
立即学习“前端免费学习笔记（深入）”；
<form action="/search"> <label for="site-search">站内搜索</label> <input type="search" id="site-search" name="q" required> <button type="submit">搜索</button> </form>
如果非得用 role="search"（例如无法用 <form> 的 SPA 场景），则需手动补全关键语义：
- 外层容器加
role="search" -
<input>必须有id和对应的<label>（不可仅靠 placeholder） - 提交按钮需有
aria-label="搜索"或含可见文本“搜索” - 避免用
display: none隐藏标签——可用visually-hidden类替代
容易被忽略的是：当搜索框动态渲染（比如通过 JS 插入 DOM）时，role="search" 必须在元素挂载后立即存在，不能延迟添加；否则读屏器可能错过初始化通告。
