role="search" 应加在包裹整个搜索功能的容器上，如<form>或<div>，而非<input type="search">等子元素；它标识搜索区域整体语义，需配合aria-label或aria-labelledby命名，且不可与type="search"的原生语义混用。
role="search" 应该用在哪个容器上？
role="search" 是 ARIA 角色，用来标识整个搜索功能的边界容器，不是给输入框或按钮单独加的。常见错误是把它加在 <input type="search"> 上——这反而会覆盖原生语义，破坏屏幕阅读器对原生搜索控件的识别。
- 必须包裹整个搜索结构：包括
<form>、<input>、<button>（或<input type="submit">） - 推荐直接加在
<form>上，因为表单天然具备提交语义，和role="search"协同更自然 - 如果不用
<form>（比如纯 JS 提交），就用<div role="search">，但需手动补aria-label或aria-labelledby
例如：
<form role="search" action="/search"> <label for="q">搜索</label> <input id="q" name="q" type="search"> <button type="submit">搜</button> </form>
为什么不用 role="search" 也能被读作“搜索”？
原生 <input type="search"> 在多数浏览器+读屏组合中（如 Chrome + NVDA、Safari + VoiceOver）会自动暴露为“搜索文本框”，无需额外 ARIA。加 role="search" 的真正价值在于明确「这个区域整体是搜索功能」，尤其当页面有多个输入框时，能帮辅助技术区分上下文。
-
type="search"自带语义，但仅限于输入框本身 -
role="search"告诉读屏：“这一块是搜索模块”，影响导航层级（比如 VoiceOver 的“按区域跳转”） - 如果搜索区没有
<form>或提交逻辑，只靠type="search"容易被当成普通输入框
和 aria-label、aria-labelledby 冲突吗？
会。如果容器已有 role="search"，再加 aria-label="搜索" 是冗余且可能干扰的——因为 role="search" 默认会被朗读为“搜索区域”，读屏会优先读容器标签（如果存在），而非硬编码的 aria-label。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 容器内有可见标题（如
<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" 解决区域意图。漏掉后者，对键盘用户和读屏用户来说，搜索模块就只是“一堆没上下文的表单控件”。
