role="search" 应加在包裹整个搜索功能的容器上，如或，而非等子元素；它标识搜索区域整体语义，需配合aria-label或aria-labelledby命名，且不可与type="search"的原生语义混用。
role="search" 应该用在哪个容器上？
role="search" 是 ARIA 角色，用来标识整个搜索功能的边界容器，不是给输入框或按钮单独加的。常见错误是把它加在 <input type="search"> 上——这反而会覆盖原生语义，破坏屏幕阅读器对原生搜索控件的识别。
- 必须包裹整个搜索结构：包括
<form></form>、<input>、<button></button>（或<input type="submit">） - 推荐直接加在
<form></form>上，因为表单天然具备提交语义，和role="search"协同更自然 - 如果不用
<form></form>（比如纯 JS 提交），就用<div role="search">，但需手动补 <code>aria-label或aria-labelledby例如：
为什么不用 role="search" 也能被读作“搜索”？
原生
<input type="search">在多数浏览器+读屏组合中（如 Chrome + NVDA、Safari + VoiceOver）会自动暴露为“搜索文本框”，无需额外 ARIA。加role="search"的真正价值在于明确「这个区域整体是搜索功能」，尤其当页面有多个输入框时，能帮辅助技术区分上下文。-
type="search"自带语义，但仅限于输入框本身 -
role="search"告诉读屏：“这一块是搜索模块”，影响导航层级（比如 VoiceOver 的“按区域跳转”） - 如果搜索区没有
<form></form>或提交逻辑，只靠type="search"容易被当成普通输入框
和 aria-label、aria-labelledby 冲突吗？
会。如果容器已有
role="search"，再加aria-label="搜索"是冗余且可能干扰的——因为role="search"默认会被朗读为“搜索区域”，读屏会优先读容器标签（如果存在），而非硬编码的aria-label。- 容器内有可见标题（如
<h2>站内搜索</h2>），用aria-labelledby="id-of-h2"更准确 - 没有可见标题时，才考虑
aria-label="站内搜索"，但必须确保它描述的是整个区域，不是单个输入框 - 切忌同时写
role="search" aria-label="搜索框"——“搜索框”是输入控件的描述，放错位置会让读屏重复或混淆
React/Vue 项目里容易漏掉什么？
框架组件常把搜索封装成独立组件，但容易只给 input 加
type="search"，而外层 div 忘记加role="search"或没透传 label。- 使用自定义 hook 封装搜索时，确保返回的 JSX 外层容器带
role="search" - 若用
useId()生成唯一 ID，记得同步到aria-labelledby和label htmlFor - SSR 渲染下，避免服务端不渲染
role属性（某些模板引擎默认过滤 ARIA）
原生语义和 ARIA 不是二选一，而是分层协作：
type="search"解决输入框，role="search"解决区域意图。漏掉后者，对键盘用户和读屏用户来说，搜索模块就只是“一堆没上下文的表单控件”。 -
