ARIA：搜索框角色

searchbox 角色表示元素是一种用于指定搜索条件的 textbox 类型。

描述

当文本框位于具有角色 search 的元素中时，可以使用 searchbox 代替 textbox。searchbox 在语义上等同于 HTML 的 <input> 类型为 search 的元素，即 <input type="search">，如果可能，应该优先使用后者。

searchbox 必须具有可访问的名称。如果 searchbox 角色应用于 HTML <input> 元素，则应使用关联的 <label>。否则，如果存在可见标签，请使用 aria-labelledby，如果不存在可见标签，请使用 aria-label。

屏幕阅读器将宣布“搜索框”、“搜索编辑”或“搜索字段”，以及可访问的名称。如果标签中包含“搜索”，这可能会显得重复。

示例

html
<div tabindex="0" aria-label="search" role="searchbox" contenteditable></div>

虽然上述代码有效，但对于屏幕阅读器用户来说，以下代码更简单、更简洁，并且减少了冗余

html
<input type="search" />

以下是一个包含搜索框和按钮、ARIA 实时区域以及用于搜索结果的容器的搜索表单。

html
<form role="search">
  <input
    type="search"
    role="searchbox"
    aria-description="search results will appear below"
    id="search"
    value="" />
  <label for="search">Search this site</label>
  <button>Submit search</button>
</form>
<div aria-live="polite" role="region" aria-atomic="true">
  <div class="sr-only"></div>
</div>
<div id="search-results"></div>

如果表单是 search 并且标签指示元素是搜索，则包含 role="searchbox" 可能会导致辅助技术宣布类似于“搜索搜索此网站搜索框”的内容，这是重复的。包含 role="searchbox" 并非必要

html
<input
  type="search"
  aria-description="search results will appear below"
  id="search"
  value="" />

规范

规范
可访问富互联网应用程序 (WAI-ARIA)
# searchbox

另请参阅