searchbox

何时使用

请使用 <input type="search">。浏览器会渲染清除输入的交互控件，移动键盘会切换为「搜索」回车键，且屏幕阅读器会将输入框宣告为「搜索编辑框」。

role="searchbox" 仅在以下两种情况下使用：

• 基于 contenteditable 元素构建的自定义搜索输入（如富文本标记、粘贴图片、复杂查询语法）。
• 将整个搜索区域包裹在 <search> 地标或 role="search" 区域中，内部输入框仍使用原生 type="search"。

对于带自动补全的搜索，应在搜索输入框上使用 role="combobox" 并配合 role="listbox" 展示建议列表 — searchbox 本身不支持弹出列表。

常见错误

• 在按钮上使用 role="searchbox"。该角色用于输入框，而非其旁边的搜索图标按钮。
• 搜索输入框缺少可访问名称。「搜索」应通过 <label>、aria-label 或 aria-labelledby 提供 — 而非仅依靠占位符文本。
• 构建搜索表单时未将输入框和按钮包裹在 <search> 地标或 role="search" 内，导致屏幕阅读器用户通过地标导航时丢失该功能入口。
• 将 role="searchbox" 用于「筛选此表格」的输入框。该场景不属于全站搜索；使用普通的 textbox 或 combobox 更为准确。
• 每次按键都触发表单提交且未做防抖处理 — 会持续触发辅助技术的宣告。

示例

<search>
  <form role="search" action="/search">
    <label for="q">Search the site</label>
    <input id="q" type="search" name="q">
    <button type="submit">Search</button>
  </form>
</search>