应使用 role="search" 作用于搜索容器（如 form 或 div），而非 role="searchbox"；input 必须用 type="search"，配以显式 label 和 name="q"/"s"；清除按钮需兼容高对比度模式并提供替代清空逻辑。
role="searchbox" 是错误用法，别这么写
HTML 中没有 role="searchbox" 这个合法值。WAI-ARIA 1.2 规范里根本不存在这个 role，浏览器和屏幕阅读器会把它当作无效语义忽略，甚至可能 fallback 成 role="generic" ——等于白写，还干扰无障碍树结构。
真正该用的是：role="search"，但它不能直接加在 <input> 上，而应作用于**搜索功能的容器**（比如 <form></form> 或 <div>），表示“这是一个搜索区域”。
<ul>
<li>
<code><form role="search"></form> ✅ 正确：语义完整，且 HTML5 中 <form></form> 已隐式支持 search landmark
<input type="search" role="searchbox"> ❌ 错误：ARIA 不认，部分读屏器报 warning<div role="search"><input type="search"></div> ✅ 可行：当无法用 <form></form> 包裹时的兜底方案type="search" 才是真正的语义起点
浏览器对 <input type="search"> 的识别，远比你手动加 role 更可靠。它自带三重语义信号：
- 被辅助技术识别为搜索控件（VoiceOver 会读作“搜索文本框”）
- 触发平台级优化：iOS 键盘显示“搜索”回车键，Safari 地址栏优先展示其历史记录
- 默认渲染清除按钮（
::-webkit-search-cancel-button），且点击后触发input和change事件
所以，别绕开 type="search" 去堆 role。它不是装饰，是基础能力载体。如果用了 type="text" 再加 role="search"，等于只交了半张答卷。
label 和 name 缺一不可，否则语义断裂
光有 type="search" 不够，两个硬性配套必须到位：
-
显式
<label></label>：必须用for属性绑定id，或把<input>包进<label></label>。仅靠placeholder或aria-label无法满足 WCAG 2.1 要求，且点击 label 文字无法聚焦输入框 -
合理的
name值：推荐用name="q"或name="s"。分析工具（如 GA）、Algolia、后端路由都依赖这个约定。用name="keyword"或name="search_input"会导致搜索行为日志丢失
特别注意：多个搜索框（如站内搜索 + 用户搜索）绝不能共用同一个 name，否则表单提交时值会覆盖，后端只能收到最后一个。
清除按钮消失？别只盯着 appearance: none
想隐藏默认 × 按钮，appearance: none 在 Safari 和 Firefox 上表现不一致，而且会连带干掉搜索图标或破坏高对比度模式下的可见性。
更稳妥的做法分两步：
- 先归一化：
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; } - 再针对性控制：
input[type="search"]::-webkit-search-cancel-button { display: none; }（仅 WebKit 有效） - 必须补上替代清空逻辑：比如监听
Escape键、加一个显式清空按钮，并确保它有aria-label="清空搜索"和键盘可聚焦
真正容易被忽略的点是：清除按钮在 Windows 高对比度模式下默认是透明的，得用 color-scheme: light dark 或显式设置 filter: invert(1) 才能保证可见。
