role="search" 应用在包裹整个搜索功能结构的容器上，如或，不可用于等内联元素；必须配合aria-label或aria-labelledby提供可访问名称，并确保内部input有name、id及label关联。
role="search" 应该用在哪个容器上？
role="search" 是 ARIA 角色，用来明确标识一个区域的用途是“搜索功能”，但它本身不提供交互能力，也不改变任何行为 —— 它只是告诉辅助技术“这里是个搜索区”。实际使用时，必须包裹整个搜索功能结构，包括 label、input 和可选的 button。
- 必须包裹
input[type="search"]或input[type="text"]，不能只加在按钮或单独的输入框上 - 推荐用
section或form作为外层容器，例如：<section role="search"><label for="q">搜索</label> <input type="search" id="q" name="q"><button type="submit">查找</button> </section>
- 不要对
form同时设置role="search"和role="form"（后者是默认隐式角色），会造成冗余甚至冲突
为什么不用 form 元素自带的语义？
HTML5 的 form 元素本身已有语义，但它的默认角色是 role="form"，不是 role="search"。只有当表单明确用于搜索目的（比如站内搜索、过滤器）时，才需要显式覆盖为 search。
- 如果表单提交后跳转到结果页或刷新页面，
role="search"是合理选择 - 如果是筛选列表、排序控件等非典型搜索场景，用
role="region"+aria-label可能更准确 - 某些旧版屏幕阅读器对
role="search"支持更好，但现代浏览器中，form[aria-label="搜索"]也能达到类似效果，不过语义精度略低
常见错误：把 role="search" 加在 input 上
这是最常踩的坑：role="search" 不能直接写在 input 元素上。
-
input是流内容元素，不支持role="search"（WAI-ARIA 规范中该角色只允许用在section、form等容器级元素上） - 这样写会导致辅助技术忽略或报错，Chrome DevTools 的 Accessibility 面板会标为“Invalid role”
- 正确做法是把
role="search"提一层，套住整个搜索块，输入框保持原生语义即可
和 aria-label、aria-labelledby 怎么配合？
role="search" 本身不带名称，必须通过 aria-label 或 aria-labelledby 显式提供可访问名称。
- 最简方式：
<section role="search" aria-label="站内搜索"></section> - 若已有可见
label，优先用aria-labelledby="search-label"关联它，避免重复播报 - 不要用空的
aria-label=""，否则屏幕阅读器可能跳过整个区域 - 名称应具体，比如“产品搜索”比“搜索”更利于上下文理解
实际中容易被忽略的是：即使用了 role="search"，如果内部 input 缺少 name 或 id，或者没配 label，整个搜索区域的可访问性仍然断裂。语义标签只是骨架，细节缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
