应使用 <input type="search"> 而非添加 role="search"，因其自带 role="searchbox"；需配合 <form>、name="q" 和 aria-label 等最小无障碍补充。
直接用 <input type="search">，别加 role="search" —— 后者不仅没用，还会破坏无障碍结构。
为什么不能给搜索框加 role="search"
搜索框本身是单个控件，不是 landmark 区域。role="search" 是给整个搜索区域（比如包含输入框、按钮、筛选项的 <div> 或 <section>）用的，不是给 <input> 本人加的。强行加在 <input> 上，会覆盖它原本的 role="searchbox"（由 type="search" 自动提供），导致屏幕阅读器误读为“一个叫 search 的容器”，而不是“一个可输入的搜索框”。
常见错误现象：
- 语音朗读变成“search，编辑文本”，而非“搜索，编辑文本”
- 键盘导航跳过该输入框（因角色冲突被忽略）
- 部分检测工具报
aria-allowed-role错误
正确做法：语义标签 + 必要 ARIA 补充
<input type="search"> 已自带 role="searchbox" 和基础无障碍支持，但需配合以下最小必要补充才能真正可用：
立即学习“前端免费学习笔记（深入）”；
- 必须设
name="q"（行业惯例，后端和 SEO 友好） - 必须包裹在
<form>中，哪怕你用 JS 拦截提交 - 必须用
aria-label="搜索"或aria-labelledby关联可见标签——placeholder不能替代 - 若搜索框独立于表单（如顶部全局搜索），用
<section role="search">包一层，再把<input type="search">放进去
示例（推荐）：
<section role="search">
<form action="/search" method="GET">
<label for="site-search">搜索网站</label>
<input type="search" id="site-search" name="q" aria-label="搜索网站内容">
<button type="submit">搜索</button>
</form>
</section>
表格里嵌搜索框，role="search" 更不能乱加
在表格 <thead> 里加一行筛选输入框时，有人会给 <tr> 加 role="search"，这是高危操作。它会让该行脱离表格语义，导致 <th> 和 <td> 不再被识别为表头/单元格，触发 aria-requires-children 报错。
正确方式：
- 保持
<tr>原生语义，不加任何role - 每个筛选输入框单独配
aria-label="按姓名筛选"或aria-labelledby="name-header" - 确保
<th id="name-header" scope="col">姓名</th>存在且位置正确 - 整行仍属于
<thead>，不可移出表格结构
清空按钮、软键盘、历史下拉这些功能靠什么触发？
全靠 type="search" 这个值本身，不是靠 ARIA。浏览器看到它，就会：
- iOS / Android 软键盘显示“搜索”回车键（不是“前往”或“下一步”）
- Safari 自动添加右上角 × 清空按钮
- 部分浏览器提供搜索历史下拉（基于
name属性值自动记忆）
但注意：appearance: none 在 Safari 15.4+ 需配合 -webkit-appearance: none 才能隐藏原生清空按钮；若要自定义图标，得用额外 <button> 绝对定位覆盖，并手动绑定 input.value = "" 和 input.focus()。
真正容易被忽略的是：所有这些能力都依赖 <form> 结构和 name 属性。漏掉任何一个，移动端键盘就变回“文本”模式，历史记录也不生效——这不是 bug，是规范行为。
